Twitter bootstrap 如何正确实现引导工具提示？

我正在尝试实现一个引导工具提示。在我添加的表单中：

<a href="#" data-toggle="tooltip" data-placement="right" data-trigger="click" title="My text..."><%=image_tag('help.png')%></a>
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>

$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
})

它的工作原理是单击图像显示“我的文本”。但出现了两个问题：

• 单击help.png后，

  #

  将添加到页面的url，页面将自动滚动到页面顶部
• 单击help.png后，图像周围有一个虚线框：

---

如何解决这个问题？

可以将Bootstrap中的工具提示功能添加到任何具有数据属性和标题的HTML中。因此，考虑到这一点，您可能可以将“a”标记更新为“span”

我相信虚线框是点击的焦点。添加CSS（如以下内容）可以解决此问题：

.example:focus {
    outline: none;
}

对于第1期：#添加到您的页面URL，您可以使用“javascript:void（0）；”

---

它不会在页面URI中附加#。

您在调试控制台中是否遇到任何javascript错误？您不应该向

a

元素添加工具提示，而应该添加

span

检查此JSFIDLE感谢您的建议！用

span替换它

解决了它。你能加上它作为答案吗？

<a href="javascript:void(0);" data-toggle="tooltip" data-placement="right" data-trigger="click" title="My text..."><%=image_tag('help.png')%></a>