Question

我在<option>下拉列表中的所有<select>上添加了title属性，但我想设置标题样式，使其看起来更像网站的其余部分。我尝试了this answer中的代码 - 问题是关于<a>标题，但它也适用于<input>和<option>的排序，但标题最终落后于无论我将其z-index设置为什么，都在选择下拉列表下方。我怎样才能将它放在下拉列表的右侧？

更新：我刚刚在IE上试过这个，而下面的嵌入式代码段似乎根本不起作用。但this fiddle确实如此 - 至少对a和input有效，但对option则无效。

＆＃13;

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

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

Answer 1

注意，尝试使用附加到hover元素的mouseenter，select个事件，在span元素之后添加select元素，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);  
  });

＆＃13;

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

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

Answer 2

经过一番调查后，我发现Firefox和Chrome（即“好浏览器”）正确支持<option>标签中的“标题”，并且当您在选择中从一个选项移动到另一个选项时，它们会提供Javascript事件，这将允许像@ guest271314提出的解决方案。但是IE 11（毫无疑问是早期版本，因为对于大多数IE 11来说是最差的IE）

不正确支持<option>中的“标题” - 当前所选内容之上的选项根本不显示弹出窗口
不会提供任何可以在JavaScript中挂钩的事件，以显示option

所以我决定寻找第三方图书馆，我找到了我想要的，Greg Franko's SelectBoxIt。 “BootstrapOptionPopovers”看起来非常好，它们与我现有的Bootstrap主题非常吻合。

在选择下拉列表上设置标题样式

2 个答案: