3

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

在此处输入图像描述

我想去掉我网站部分的顶部小三角形。

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

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

编辑

这里的困难在于，当我写类似的东西时

<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>

您会看到我添加到第一个 span 的 tip-bottom 类被复制到了第二个 span，但这仅适用于基础特定类，如 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>
4

3 回答 3

1

只需通过将display属性设置为none来隐藏它

.tooltip > .nub {
    display: none;
}

看截图

于 2014-03-14T15:12:52.253 回答
0

那个小三角形只是span与类nub所有你需要做的就是从中删除 cssborder然后你将把你的工具提示放在与正常相同的位置而没有小三角形

于 2013-06-18T13:20:15.733 回答
0

使用 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>';
      }
    }
  });
于 2015-03-01T02:13:36.507 回答