Css 特定风格的工具提示弹出式

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

我试图寻找一个我可以单独设计风格的课程，但我找不到

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

Preguntas？

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

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

Lámanos al（+57）（7）440342

我不能按id选择它，因为id是dinamic，所以它会更改，我也不能按.tip top选择它，因为我在所有网站中都有tip top，所以它会更改所有这些

---

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

我刚刚在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或类，以便在站点的该部分设置工具提示的样式。i、 e

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

或

使用这些设置可以得到您想要的。核心是三角形。希望这有帮助

干杯

---

G.P/P> < P>这一变化为基础6 .3。因为工具提示不可见，所以在花了一些时间尝试获取此信息之后。我可以用以下方法来设计三角形（nub）：

.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;
  }
}

---

！重要事项不是很好的做法，但在我遇到这种情况时，它们是必要的。
谢谢，迟到了，但很有帮助谢谢！
.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;
  }
}