嗨,我在网站中使用了很多工具提示,最近我想在页脚中添加一个工具提示,该网站的皮肤为白色,因此主体中的工具提示为黑色背景,但是页脚具有黑色背景,因此我需要工具提示具有白色背景,但只有放置在页脚中的工具提示。

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

<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选择它,因为id动态,因此它会更改,而且我也无法通过.tip-top选择它,因为我在所有网站中都有top-tops,因此它会更改所有这些内容。

任何想法?如何将自定义类传递给弹出窗口?

最佳答案

我刚刚使用此方法在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或类,请尝试在代码之前添加该ID或类,以在网站的该部分中设置工具提示的样式。即

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


要么

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


使用这些设置来获得所需的内容。 .nu​​b是三角形。希望这可以帮助?

干杯
G

关于css - 基础中特定于样式的工具提示弹出窗口,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28532529/

10-12 00:47
查看更多