基础样式特定的工具提示弹出窗口

Question

你好，我在我的网站上使用了很多工具提示，我最近想在页脚中添加一个工具提示，网站的皮肤是白色的，所以正文中的工具提示是黑色背景，但页脚是黑色背景，所以我需要to 的工具提示具有白色背景，但只有放置在页脚中的工具提示。

我试图寻找一个 class 可以单独设置样式的地方，但找不到。

<span data-tooltip aria-haspopup="true" class="has-tip tip-top tip-footer" title="Llámanos al (+57)(7)440342">Preguntas?</span>

这是工具提示，生成的弹出窗口是

<span data-selector="tooltip-i672cwnm0" id="tooltip-i672cwnm0" class="tooltip tip-top" role="tooltip" style="visibility: visible; display: none; width: auto; top: 387.375px; bottom: auto; left: 865px; right: auto;">Llámanos al (+57)(7)440342<span class="nub"></span></span>

我不能通过 id select 它，因为 id 是动态的，所以它会改变，我也不能通过 .tip-top select 它，因为我在所有网站上都有 tip-tops 所以它会改变所有这些。

有什么想法吗？如何将自定义 class 传递给弹出窗口？

Answer 1

我刚刚在我的 app.css 文件中编辑了 CSS，使用这个...

.tooltip{background:#000;color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.opened{border-bottom:dotted 1px #FFF !important;color:#FFF !important}
.tap-to-close{color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.tip-top>.nub{border-color:#FFF transparent transparent transparent}
.tooltip.tip-left>.nub{border-color:transparent transparent transparent #FFF}
.tooltip.tip-right>.nub{border-color:transparent #FFF transparent transparent}

如果您为页脚分配了 id 或 class，请尝试将其添加到代码之前，以便在网站的该部分设置工具提示的样式。即

#yourid .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}

或

.yourclass .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}

尝试这些设置以获得您想要的。 .nub 是三角形。希望这有帮助吗？

干杯 G

Answer 2

这在 Foundation 6.6.3 中已经改变。在花了一些时间试图得到这个之后，因为工具提示不可见。我能够用这个来设计三角形（小块）的样式：

.tooltip.top:before {
  border-color: $yourColor transparent transparent;
}
.tooltip.bottom:before {
  border-color: transparent transparent $yourColor;
}
.tooltip.right:before {
  border-color: transparent $yourColor transparent;
}
.tooltip.left:before {
  border-color: transparent transparent transparent $yourColor;
}

我使用 sass 和一些变量所以我的看起来像这样：

.tooltip {
  background: $tooltip-background !important;
  width: auto !important;
  max-width: 80vw !important;
  &.top:before {
    border-color: $tooltip-background transparent transparent !important;
  }
  &.bottom:before {
    border-color: transparent transparent $tooltip-background !important;
  }
  &.right:before {
    border-color: transparent $tooltip-background transparent  !important
  }
  &.left:before {
    border-color: transparent transparent transparent $tooltip-background !important;
  }
}

!importants 不是很好的做法，但在我遇到的情况下，它们是必要的。

基础样式特定的工具提示弹出窗口

style specific tooltip popup in foundation

css

tooltip

zurb-foundation