隐藏的“选择”元素上的工具提示不起作用答案

【问题标题】：tooltip on hidden "select" element doesnt work隐藏的“选择”元素上的工具提示不起作用
【发布时间】：2012-05-20 19:27:46
【问题描述】：

我使用 jquery UI 中的组合框开发网站，一切正常。但是当我尝试在“选择”元素上应用工具提示时，工具提示不起作用。

html:

<select id="combobox_courses" title="tooltip test text" style="display: none;">

所有问题都是cs jquery组合框覆盖“隐藏”上的“选择”css样式显示并用smth这样改变它： <span class="ui-combobox"> <input class="ui-state-default ui-autocomplete-input ....

我尝试了很多工具提示插件，但没有人能解决这个问题。通常所有的工具提示插件都有这样的语法：

$("selector").anytooltip({settings});

使用像 .ui-combobox 这样的类选择器也不起作用。

任何想法如何解决这个问题？抱歉，我是 Jquery 的初学者，可能问题很简单，谢谢您的帮助...

已解决！

所以如果有人遇到这个问题 - js：

$(document).ready(function(){

$('#wrapper').tipsy({ trigger: 'manual', gravity: 'n'});

$( "#combobox" ).combobox();
$("#wrapper input").bind("click", function() {
      $("#wrapper").tipsy('show');
}).bind("focusout",function(){
      $("#wrapper").tipsy('hide');
}); });

#wrapper 是原始组合框选择元素的包装器：

<div class="ui-widget">
    <div id="wrapper" title="test wrapper">
    <label>Your preferred programming language: </label>
    <select id="combobox">
        <option value="">Select one...</option>
    </select>
</div></div>

if $("#wrapper input").bind(...);仅添加 span - $("#wrapper span input").bind(...);

不起作用

tipsy 是 jquery 的免费工具提示插件

非常感谢@tpaksu 的帮助！

【问题讨论】：

您正在尝试显示隐藏元素的工具提示？？
实际上是的。任务是在 jquery 组合框的选择元素上显示工具提示。邪恶之处在于 jquery UI 自动完成 ovveride 原始选择元素具有自己的代码（跨度，输入等）并实际上隐藏了初始元素:(你可以在这里看到它 - jqueryui.com/demos/autocomplete/combobox.html
您是否尝试将工具提示添加到包含元素（例如 P、DIV）而不是 SELECT 本身？
正如我在下面建议的 Tpaksu 所做的那样，但在我看来这不是灵活和粗略的解决方案......但总比没有好:)

标签： javascript jquery jquery-ui combobox tooltip

【解决方案1】：

<select id="combobox_courses" title="tooltip test text" style="display: block;">

或尝试获得一个跨度和谁包装您的选择并获得他的工具提示

【讨论】：

感谢您的回答，但这不起作用，cs jquery 组合框插件覆盖原始 html - 并且“显示”属性应该为“无”以使该插件正常工作，请查看 jqueryui.com/demos/autocomplete/combobox.html
我写了 span 和 wrap 不能正常工作...我无法在这个选择器上绑定工具提示，它根本不起作用:(

【解决方案2】：

你可以用另一个容器包装这个元素并将工具提示设置为该元素，如下所示：

<div id="combo_container">
    <select id="combobox_courses" title="tooltip test text" style="display: none;">
</div>

然后您可以为该容器元素定义工具提示：

$("#combo_container").anytootip({options});

【讨论】：

谢谢，这正在工作。但是 lil 有点粗略的解决方案......例如cs我有2个带有输入的自动完成选择框，并且必须在第一个上绑定“focusout”事件以在第二个上显示工具提示，当焦点来到第二个时，使用“false”组合框容器我做错了吗？
您可以使用$( ".selector" ).autocomplete({ open: function(event, ui) { ... } });等组合框事件来触发工具提示焦点。
好主意，这可以工作:)。在其他情况下，我想我应该重写组合框/自动完成脚本以更灵活的方式解决这个问题？
我认为你可以做的主要是事件。修改稳定的代码可能会破坏你看不到的其他东西。
如你所说尝试绑定一些事件，但没有成功，你能给我举个例子吗？试过了-$(document).ready(function(){ $( "#municipality_cb" ).combobox({ focus: function(event, ui) { //tipTip(); - tooltip script// $("#municipality_wrap").tipTip({maxWidth: "auto", edgeOffset: 10}); } }); }); 我做错了什么？

【解决方案3】：

您可以添加一些带有标题的包装器元素并将ui-combobox 附加到此包装器。

$('element').combobox({
  appendTo: 'elementWithTitle'
});

【讨论】：