Question

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

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

<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 dinamic所以它会改变，我也无法通过.tip-top选择它，因为我在所有网站都有提示顶部所以它会改变所有这些。

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

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或类，请尝试在代码之前添加该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}

使用这些设置来获得您想要的效果。 .nub是三角形。希望这有帮助吗？

干杯 ģ

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并不是很好的做法，但是在我遇到这种情况的情况下，这是必要的。

基础风格特定的工具提示弹出窗口

2 个答案: