Foundation 4自定义工具提示无需管道

Question

Foundation默认的工具提示如下所示：

我想要在我的网站上去掉一些地方的小三角形。

要想在所有地方去掉它，只需从foundation_and_overrides.scss文件（如果您没有使用rails，则也称为_settings.scss）中更改$tooltip-pip-size变量值为0即可。

是否可以定义一个没有尖头的自定义版本的Foundation工具提示？

编辑

这里的难点在于当我编写类似于

<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span>

Foundation JavaScript会在文档末尾创建一个特定的元素，其中包含实际的提示工具。

<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span>

您可以看到，我将 tip-bottom 类添加到第一个 span 中，但这只适用于 Foundation 特定的类，如 tip-left、tip-right 等。

我希望能够向第一个 span（实际编写的唯一一个）添加“no-pip”类，并能够修改包含“nub”元素的生成 span 的外观。

<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span>

- Daniel Ristic

Answer 1

只需将display属性设置为none即可隐藏它。

.tooltip > .nub {
    display: none;
}

- Adesh M

Answer 2

那个小三角形只是一个带有类名为nub的span标签，你需要做的就是从它身上移除border样式，这样你就可以得到一个没有小三角形的普通工具提示了。

- ebram khalil

---

请查看我的更新问题，但这里的难点不在于一旦选择了元素就要摆脱三角形，而是要选择包含三角形的元素，因为它是由 foundation 自动生成的。我只想更改某些工具提示，而不是所有工具提示。 - Daniel Ristic

Answer 3

使用 foundation 版本 5，您可以自定义工具提示模板。

只需删除 <span class="nub"></span> 即可：

  $(document).foundation({
    tooltip: {
      tip_template : function (selector, content) {
        return '<span data-selector="' + selector + '" class="'
          + Foundation.libs.tooltip.settings.tooltip_class.substring(1)
          + '">' + content + '<span class="nub"></span></span>';
      }
    }
  });

- mate64