Question

为了节省窄表格单元格中的空间，我想使用引导工具提示在悬停时显示额外的内容。但是，工具提示在a标记中使用：rel选项。我不需要链接，只需要它的选项...而且我不希望链接到达任何地方。我用过：

  link_to display.text, "#", :rel => "tooltip", ...blah..blah
  link_to_function display.text, "#", :rel => ...blah...blah

两者都有效，但两者都返回到页面顶部。

它可能是臭臭的代码，使用的链接并不是真正的链接来获取其他功能。是否有创建虚拟链接的轨道方式？是否有“认可”的方法来实现这一目标？

Answer 1

您可以在锚点之外的其他元素上初始化工具提示。试试span或div。

Answer 2

我有同样需要为元素添加工具提示，但我不希望它成为标记。

我选择使用标签，而不是这样：

<span class="glyphicons glyphicons-medicine pharmacy-icon" data-toggle="tooltip" data-placement="right" title="Pharmacy Tooltip"></span>

将显示（当悬停在药物glyphicon上时）消息：Pharmacy Tooltip

如果您想更进一步，您甚至可以根据需要设置工具提示的样式，以下代码块将是您如何更改它的样式：

.tooltip {
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 5px);
  .tooltip-inner {
    background-color: white;
    color: red;
  }
  .tooltip-arrow {
    border-right-color: white;
  }
}

这会将工具提示的背景颜色和工具提示的箭头更改为白色，并带有红色文字和工具提示周围的阴影。

如果您使用的是bootstrap，请确保在使用工具提示时包含以下代码行：

$('.someClass').tooltip();

这将确保您使用引导工具提示而不是默认的内置浏览器工具提示

没有链接的Bootstrap工具提示

2 个答案: