如何正确实现Bootstrap工具提示？

Question

我正在尝试实施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>

单击图像显示“我的文字”。但是出现了两个问题：

• 点击help.png后，#会添加到页面的网址中，页面会自动滚动到页面顶部。
• 点击help.png后，图片周围有一个虚线框：

如何解决这个问题？

Answer 1

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

我认为虚线框是点击的焦点。添加如下所示的CSS应解决此问题：

.example:focus {
    outline: none;
}

Answer 2

对于第一期：＃添加到您的网页网址，您可以使用“javascript：void（0）;”

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

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