基础4自定义工具提示没有点子

Question

基础默认工具提示如下所示：

我想摆脱我网站上的小三角形。

要在任何地方摆脱它，你只需要从foundation_and_overrides.scss文件中将$ tooltip-pip-size变量值更改为0（如果你没有使用带有rails的基础gem，也称为_settings.scss）。

是否可以在没有点数的情况下定义基础工具提示的自定义版本？

修改

这里的困难在于，当我写出像

这样的东西时

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

基础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类被复制到第二个类，但这只是基础特定类的情况，例如tip-left，tip-right等。

我想要做的是能够在第一个跨度（我实际写的唯一一个）中添加“no-pip”类，并且能够改变包含“nub”元素的生成范围的外观

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

Answer 1

小三角只是span，只有nub类所有您需要做的就是从中移除css border然后您将工具提示放在同一位置没有小三角形的正常情况

Answer 2

只需将显示属性设置为无

即可隐藏它

.tooltip > .nub {
    display: none;
}

Answer 3

使用foundation version 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>';
      }
    }
  });