I put a title attribute on all the <option> in a <select> dropdown, but I'd like to style the title so it looks more like the rest of the site. I tried the code from this answer - the question was about <a> titles, but it also works with <input> and sort-of works on <option>, but the title ends up behind and underneath the select dropdown regardless of what I set its z-index to. How can I position it just to the right of the dropdown?
Update: I just tried this on IE, and the embedded snippet below doesn't seem to work at all. But this fiddle does - at least for a and input, but not for option.
// Use a closure to keep vars out of global scope
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());#tooltip {
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" title="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" title="This is another link">Mauris placerat</a> eleifend leo.</p>
<select name="selection1">
<option value="first" title="first tooltip">First</option>
<option value="second" title="second tooltip">Second</option>
<option value="third" title="third tooltip">Third</option>
<option value="fourth" title="foourth tooltip">Fourth</option>
</select>
<select name="selection2">
<option value="first" title="first tooltip">First</option>
<option value="second" title="second tooltip">Second</option>
<option value="third" title="third tooltip">Third</option>
<option value="fourth" title="foourth tooltip">Fourth</option>
</select>
<input name="input" type="text" placeholder="type shit here" title="hey hey"/>After some investigation, I found that Firefox and Chrome (ie "good browsers") properly support "title" in <option> tags, and they provide Javascript events when you move from one option to another in a select, which would allow something like @guest271314's proposed solution. But IE 11 (and no doubt earlier versions, because for most things IE 11 is the least worst IE)
<option> correctly - the options above the currently selected one don't show a popup at alloptionSo I decided to look for a third party library, and I found exactly what I wanted, Greg Franko's SelectBoxIt. The "BootstrapOptionPopovers" look really good, and they fit in well with my existing Bootstrap theme.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments