変更スタイル::属性

Question

の後、私はあなたが要素に属性を付けることができるシンプルなツールチップシステムを作成しています： <div data-tooltip-content="testing out tooltip.">

（私はSASSを使用していますPS）

スタイリング：

content: attr(data-tooltip-content) 
    color: white 
    background: black 
    padding: 5px 
    position: absolute 
    white-space: nowrap 
    border-radius: .20rem 
    margin-top: -2rem 
    z-index: 14000 !important 
    pointer-events: none 

これらのツールチップは、カードに関する情報の表示に使用されています。これらのカードは、ユーザーがクリックすると展開され、折りたたまれます。しかし、今私はクリックすると、カードのためのjavascriptのel.style['z-index'] = '0';を行うとき。ツールチップは、その結果、重複しています。なぜなら、ツールチップのZ-インデックスがJavaScriptでオーバーライドされているために、より高いZ-インデックスを持つ他のものとツールチップが重なってしまうからです。 javascriptでツールチップのスタイリングを変更できる方法はありますか？

Answer 1

疑似要素はDOM内に実際には存在しないため、ターゲティングや操作はできません。

しかし、あなたはjavascriptでスタイルブロックを挿入することができます。それはトリックを行う可能性があります。