Question

我有一个使用bootstrap toggle插件的切换按钮，当我将鼠标悬停在它上面时，我想要一个工具提示弹出。

<input type="checkbox" data-size="mini" data-toggle="toggle" data-hover="tooltip" data-placement="bottom" title="Automatic Refresh is ON" data-onstyle="success" />


<script>
  $(document).ready(function(){
    $('[data-hover="tooltip"]').tooltip();   
});
</script>

当我使用data-hover="tooltip"时，它似乎无法正常工作。我在这里做错了什么？

这是我到目前为止所获代码的链接 - http://jsbin.com/zexijemija/edit?html,output

Answer 1

放data-toggle="tooltip"

而不是

data-toggle="toggle"

并了解有关jQuery中选择器的更多信息。：）

Answer 2

当您使用选择器data-toggle="toggle"在不存在的元素上调用.tooltip()时，您的输入元素已[data-toggle="tooltip"]。

因此要么改变输入数据属性值，要么改变选择器以匹配。

Answer 3

添加ID以选择按钮：

<input id="foo" type="checkbox" data-size="mini" data-toggle="toggle" data-hover="tooltip" data-placement="bottom" title="Automatic Refresh is ON" data-onstyle="success" />

<script>
  $(document).ready(function(){
    $("#foo").tooltip();   
});
</script>

jsfiddle

当我将鼠标悬停在上面时，为什么工具提示不起作用？

3 个答案: