tooltip direction mozilla

Question

I am trying to make a tooltip that is really simple stupid to implement and change. i really don't want to add spans or anything like that to implement this. I just want to be able to add "tooltip='my tooltip example'" to divs, spans, and links. I've got it narrowed down pretty well, except for firefox which really doesn't play well with this strategy. The problem is using direction=rtl on a hover after element. works great in chrome based browsers, but not firefox. no answers i have found here fix the problem. here is my code so far.

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>

working chrome fiddle here https://jsfiddle.net/rwmy5kpn/14/

The one other problem i am having is trying to assign this class to more than one element. every attempt i make at adding another element disables the script. this is less of a problem than the first one, but it would be nice to know how i am going wrong here.

thanks

Answer 1

You can use position: relative and top, left, right, bottom properties.

.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