使用jQuery在列表框中显示选定值的工具提示

当鼠标单击列表框值时，如何显示标题或工具提示，如下图所示

.

参见示例：

<!-- Include custom code to handle the tooltip -->
<script type="text/javascript">
  //After loading the page insert the title attribute.
  $(function(){
    $("select option").attr( "title", "" );
    $("select option").each(function(i){
      this.title = this.text;
    })
  });

  //Attach a tooltip to select elements
  $("select").tooltip({
   left: 25
  });
</script>

<!-- When moving the mouse over the below options -->
<select>
   <option>very long option text 1</option>
   <option>very long option text 2</option>
   <option>very long option text 3</option>
   <option>very long option text 4</option>
   <option>very long option text 5</option>
   <option>very long option text 6</option>
</select>

//加载页面后，插入title属性。
$（函数（）{
$（“选择选项”）.attr（“标题”和“）；
$（“选择选项”）。每个（功能（i）{
this.title=this.text；
})
});
//附加工具提示以选择图元
$（“选择”）。工具提示({
左：25
});
非常长的选项文本1
非常长的选项文本2
非常长的选项文本3
非常长的选项文本4
非常长的选项文本5
非常长的选项文本6

html：

<select id="sel">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

---

你在编写代码方面有困难吗，或者你只是在寻找一个通用的解决方案？我没有任何模型，但我有一些开源的jquery代码片段，这取决于三个以上，包括，我想有一个jquery函数，我们可以用它来做jquery工具。上面对我来说不是很直观，因为它只是为工具提示显示相同的文本。对我来说，有效的方法是将id隐藏为超长的工具提示文本，将“超长选项文本”替换为普通的选择组合框值，并将

this.title=this.text

替换为

this.title=this.id

。我也不需要“附加工具提示”部分，不过我想这可能有助于选择它的放置位置（默认情况下看起来不错）。

$(document).ready(function(event) {
    $('#sel').mouseenter(function(e) {
        this.title = $("#sel option:selected" ).text();
    });
});