Question

通过JQueryUI，有没有办法提供工具提示（不是默认值），显示选项集/下拉列表的各个选项？

我有一个不工作的人 Sample

我不是要求所选的选项显示它的标题，这是在样本中发生的。

我的问题是，当我将鼠标悬停在选项上时，有时候工具提示会根据浏览器显示在下拉列表后面。这通常发生在Firefox或IE10中。

或者它不使用JQueryUI工具提示。 Chrome只使用默认工具提示

如果你不想看JSFiddle，那么下面是我的示例代码：

$(function () {
    $(document).tooltip({items:"select,option,.optionClass",position:{ my: "left top", at: "left bottom"}
    }); 
});

Answer 1

只有为<option>

设置size属性时，

jQuery UI工具提示才适用于<select>

仅当在select元素上设置了size属性时，才执行事件工具提示实际工作所必需的。 - source

这里是updated example

Answer 2

仅当为<option>元素设置了size属性时，jQuery UI工具提示才适用于<select>

我做了一个对我有用的解决方法find it here

Answer 3

作为一个选项，您是否可以将工具提示放在下拉的右侧？将margin-left：70px添加到示例中的.ui-tooltip类中 - 它不是您的要求，但可能是一种解决方法。

Answer 4

我目前无法自己解决这个问题，但我想出了一种方法，至少可以使用工具提示小工具和选择。

想象一下，您<div id="SelectFieldDiv">持有<select id="SelectField">。您可以<div id="SelectFieldDiv">获得工具提示样式的悬停文字：

$(document).ready(function() {
        $(document).tooltip();

        $('#SelectField').change(function(e) {
                $('#SelectFieldDiv').prop('title', $('#SelectField').find(':selected').prop('title'));
        });

        $('#SelectField').change();
});

不幸的是，问题的答案看起来似乎是：不，你不能在select上使用工具提示，除非你将size属性设置为大于1 （很少选择是那样的。）

我测试了最新版本：jQuery v.3.2.1; jQuery-UI v.1.12.1。

jquery ui工具提示显示在选择选项上

4 个答案: