ツールチップの方向mozilla

Question

私は実際に実装して変更するには簡単な愚かなツールチップを作ろうとしています。私は実際にこれを実装するためにスパンなどを追加したくありません。私はdivs、span、およびlinkに "tooltip = '私のツールチップの例'を追加できるようにしたいだけです。私はこれをかなりうまく絞り込んだのですが、この戦略ではうまくいきません。問題は、要素の上のホバーでdirection = rtlを使用することです。クロームベースのブラウザではうまく動作しますが、Firefoxではうまく動作しません。私がここで見つけた答えは問題を解決しません。ここまでは私のコードです。

CSS first 

html,body, div, dir, pre { 
display: block; 
unicode-bidi: embed; 
} 
BDO[DIR="ltr"] { 
direction: ltr; 
unicode-bidi: bidi-override; 
} 
BDO[DIR="rtl"] { direction: rtl; 
unicode-bidi: bidi-override 
} 
*[DIR="ltr"] { direction: ltr; 
unicode-bidi: embed; 
} 
*[DIR="rtl"] { 
direction: rtl; 
unicode-bidi: embed; 
} 
body { 
font-family: arial; 
text-align: center; 
} 
.tooltip:hover { 
direction: rtl; 
unicode-bidi: bidi-override; 
unicode-bidi: embed; 
cursor: pointer; 
} 
.tooltip:hover:after { 
position: absolute; 
-webkit-transform: translateY(45px) translateX(30px); 
-moz-transform: translateY(45px) translateX(30px); 
transform: translateY(45px) translateX(30px); 
background: aquamarine; 
color: blue; 
border-radius: 5px; 
content: attr(tooltip); 
padding: 5px 12px 5px 12px; 
z-index: 13; 
width: auto; 
font-style: normal; 
font-size: 22px; 
white-space: nowrap; 
border: 3px solid blue; 
} 
.tooltip:hover:before { 
position: absolute; 
text-align: right; 
-webkit-transform: translateY(22px) translateX(-90px); 
-moz-transform: translateY(22px) translateX(-90px); 
transform: translateY(22px) translateX(-90px); 
content: "▲"; 
font-size: 32px; 
z-index: 13; 
color: blue; 
} 

Javascript next 

window.onload=function(){ 
document.getElementsByTagName("a")[0].setAttribute("class", "tooltip"); 
} 

and the html 

<a tooltip="supercalifragilisticexpialidocious">link element test</a> 

ここクロムフィドルを作業https://jsfiddle.net/rwmy5kpn/14/

私が午前1つの他の問題は、複数の要素にこのクラスを割り当てるしようとしています。別の要素を追加しようとするたびにスクリプトが無効になります。これは最初のものよりも問題にはなりませんが、ここでどのように間違っているのかを知ることはうれしいでしょう。

おかげ

Answer 1

あなたはposition: relativeとtop, left, right, bottomプロパティを使用することができます。

.tooltip:hover { 
    .... 
    position:relative; 
} 
.tooltip:hover:after { 
    .... 
    position: absolute; 
    right:20px; 
    left:auto; 
    top:30px; 
} 
.tooltip:hover:before { 
    ... 
    position: absolute; 
    right:30px; 
    left:auto; 
    top:10px; 
} 

DEMO