在select（jquery或javascript）中的选项上移动时显示工具提示

Question

我想显示一个jquery工具提示：

• 在焦点选择选项（没有多个属性）的情况下移动选项（键盘上有向上和向下箭头）。
• 在打开选择选项（没有多个属性）的情况下移动选项（使用鼠标指针）。

这个想法基本上就像上面的例子来自jquery页面（附加了URL）

https://api.jquery.com/selected-selector/

但没有多个属性，并在jquery工具提示中显示红色文本。

这是我的最后一次尝试，但是当悬停select-option时会触发工具提示。

<select id="garden" title="">
    <option value="0">Select and Option</option>
    <option value="1">OPTION ONE</option>
    <option value="2">OPTION TWO</option>
</select>

$( "select" )
.change(function() {
var str = "";
$( "select option:selected" ).each(function() {
    if ($( this ).val() != 0) {
        if ($( this ).val() == 1) {
            str += " tooltip one";
        } else if ($( this ).val() == 2) {
            str += " tooltip two";
        }
        $('#garden').prop('title', str);
        $("#garden").tooltip();
    }
});
}).trigger( "change" );

提前致谢...

Answer 1

尝试将鼠标悬停在选项上。只有在用户选择了选项后，才会触发更改事件。

$( "select option" ).hover(function() {
   // The rest of your code to show a tootlip.
});