如何在选择的jquery插件中添加工具提示?

时间:2013-07-23 18:27:29

标签: jquery jquery-chosen

嗨iam正在处理选择的jquery插件,我需要将工具提示添加到所选插件中的所有元素。我尝试在选择中调整,但没有得到任何积极的结果。有谁有想法吗?

代码:

  <div id="synonyms_div" style="height:auto;width:170px;">
     <select id="tagger-tags" class="tagger-tags" multiple style="width:150px; font:7px;" tabindex="4">
                @foreach(var tag in ViewBag.tags)
                {
                    <option id="sel-tags" value="@tag.ID" parent="@tag.PARENT_ID" style="font:6px;">
                        @tag.NAME [@tag.EL_COUNT]
                    </option>
                }               
      </select>
    </div>
<script>
$(document).ready(function () {
    jQuery(".tagger-tags").chosen({ search_contains: true });

});
 </script>

2 个答案:

答案 0 :(得分:4)

这是一个可能的解决方案,无需使用任何其他库或其他任何...这可以通过一些CSS来完成。

<强> HTML:

<!--// we have to wrap the select in a span to use :after with it //-->
<span class="tooltip" title="some title for your tooltip">
<select>
    <option>Something</option>
    <option>Something Else</option>
</select>
</span>

<强> CSS:

.tooltip:hover:after {
    position: relative;
    /* we can get the title attribute from the relevant item */
    content: "" attr(title) "";
    /* style however you want */
    border: 1px dashed black;
    top: -1.5em;
    left: 12em;
    padding: 0.5em;
}

会给你类似的东西:

chosen w/ tooltip

<强> DEMO

逐字地将单词multiple添加到选择框中,以便对其进行修改以符合OP的要求......

<强> DEMO 2

Screenshot 2

答案 1 :(得分:0)

我不确定我是否理解这个问题,但我几乎肯定你想要使用它: http://jqueryui.com/tooltip/