tooltip with arrow with vue's style binding

Question

I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:

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

But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.

Answer 1

As suggested by @Stephan-v in comments, I added separate element for arrow. The final code looks like something below:

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