направление подсказки mozilla

Question

Я пытаюсь сделать всплывающую подсказку, которая действительно проста, чтобы реализовать и изменить. я действительно не хочу добавлять промежутки или что-то подобное, чтобы реализовать это. Я просто хочу добавить «tooltip = 'мой пример подсказки» в divs, spanans и links. Я получил это довольно хорошо, за исключением firefox, который действительно не очень хорошо работает с этой стратегией. Проблема заключается в использовании 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/

одной другой проблемы я имею пытается присвоить этот класс более одного элемента. каждая попытка, которую я делаю при добавлении другого элемента, отключает скрипт. это меньше проблемы, чем первая, но было бы неплохо узнать, как я ошибаюсь здесь.

благодарит

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