vueのスタイルバインディングを持つ矢印のツールチップ

Question

vueのスタイルバインディングを使用してツールチップを作成したいと思います。私はattr()機能をCSSから使用することを考えています。これは反応性のあるオブジェクトである属性値を取ります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> 

しかし、それは動作しません。私は何らかの理由でブートストラップを使いたくない。私は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>