带箭头的工具提示与 vue 的样式绑定

Question

我想用 vue 的样式绑定创建工具提示。我正在考虑使用 CSS 中的 attr() 函数，该函数采用反应对象 dynamicColor 的属性值。我现在的代码是：

<div class="test">
    <span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
       smallText
    </span>
</div>

<style>
div.test span.marker {
  position: absolute;
  width: 28px;
  height: 15px;
  border-radius: 2px;
  display: block;
  top: -25px;
  font-size: 10px;
  text-align: center;
}

div.test span.marker::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: attr(color) transparent transparent transparent;
}
</style>

但是不行。由于某些原因，我不想使用 bootstrap。我试图查看是否可以在 vue 样式绑定中找到伪选择器，但找不到太多。关于如何实现这一目标的任何想法？谢谢。

Answer 1

正如@Stephan-v 在评论中所建议的，我为箭头添加了单独的元素。最终代码如下所示：

<div class="test">
    <span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
    <span class="marker" :style="{'background': dynamicColor}">
       smallText
    </span>
</div>

<style>
div.test span.marker {
  position: absolute;
  width: 28px;
  height: 15px;
  border-radius: 2px;
  display: block;
  top: -25px;
  font-size: 10px;
  text-align: center;
}

div.test span.markertip {
    content: "";
    position: absolute;
    top: -45%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
}
</style>

带箭头的工具提示与 vue 的样式绑定

tooltip with arrow with vue's style binding

tooltip

pseudo-class

vue.js