2

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"/>
Community
  • 1
  • 1
Paul Tomblin
  • 179,021
  • 58
  • 319
  • 408
  • 1
    Can you use a custom js select like [https://github.com/joyblanks/jq-plugins](https://github.com/joyblanks/jq-plugins) – joyBlanks Aug 28 '15 at 13:34
  • @joyBlanks I ended up going with this plugin: http://gregfranko.com/jquery.selectBoxIt.js/#BootstrapOptionPopovers because it is integrated will with Bootstrap. – Paul Tomblin Aug 31 '15 at 21:21

2 Answers2

2

Note, attempt at workaround utilizing hover , mouseenter events attached to select element , adding span element after select element , css

html

<select name="selection1">
    <option value="first" data-title="first tooltip">First</option>
    <option value="second" data-title="second tooltip">Second</option>
    <option value="third"  data-title="third tooltip">Third</option>
    <option value="fourth"  data-title="foourth tooltip">Fourth</option>
</select><span></span>
<select name="selection2">
    <option value="first" data-title="first tooltip">First</option>
    <option value="second" data-title="second tooltip">Second</option>
    <option value="third"  data-title="third tooltip">Third</option>
    <option value="fourth"  data-title="foourth tooltip">Fourth</option>
</select><span></span>

css

select + span {
  font-size:16px;
  width:100px;
  background:#000;
  color:#fff;
  position: relative;
  display:block;
  left:75px;
  top:-20px;
}

js

 $("select").on("change mouseenter", function(e) {
    $(this).next("span")
    .html(this.selectedOptions[0].dataset.title);  
  });


// 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();
    });
  $("select").on("change mouseenter", function(e) {
    $(this).next("span").html
    (this.selectedOptions[0].dataset.title)
  
  });

    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);
}

select + span {
  font-size:16px;
  width:100px;
  background:#000;
  color:#fff;
  position: relative;
  display:block;
  left:75px;
  top:-20px;
}
<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" data-title="first tooltip">First</option>
    <option value="second" data-title="second tooltip">Second</option>
    <option value="third"  data-title="third tooltip">Third</option>
    <option value="fourth"  data-title="foourth tooltip">Fourth</option>
</select><span></span>
<select name="selection2">
    <option value="first" data-title="first tooltip">First</option>
    <option value="second" data-title="second tooltip">Second</option>
    <option value="third"  data-title="third tooltip">Third</option>
    <option value="fourth"  data-title="foourth tooltip">Fourth</option>
</select><span></span>
<input name="input" type="text" placeholder="type shit here" title="hey hey"/>
guest271314
  • 1
  • 15
  • 104
  • 177
  • That's very close to what I want, except I want the span to show the details for the option as you move over it. It appears IE doesn't give me any event to do that, although Firefox does fire `mouseenter` and `mouseleave`. Once again IE ruins my life. – Paul Tomblin Aug 28 '15 at 16:04
  • Due to the fact that IE doesn't give any proper events when you move between options, and their support for "title" in the dropdown is sketchy (if you've got an item selected, you don't get title popups for the one above the selected, for instance), I ended up going with a third party select replacement. – Paul Tomblin Aug 31 '15 at 21:24
  • @PaulTomblin If possible , can post solution found as Answer http://stackoverflow.com/help/self-answer ? – guest271314 Aug 31 '15 at 21:27
1

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)

  • does not support "title" in <option> correctly - the options above the currently selected one don't show a popup at all
  • does not provide any event that you can hook in JavaScript to show the currently moused over or keyboarded over option

So 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.

Paul Tomblin
  • 179,021
  • 58
  • 319
  • 408