javascript - 工具提示方向 mozilla

Question

我正在尝试制作一个实现和更改起来非常简单愚蠢的工具提示。我真的不想添加跨度或类似的东西来实现它。我只想能够将“tooltip='my tooltip example'”添加到 div、span 和链接。我已经很好地缩小了它的范围，除了 firefox，它真的不适合这个策略。问题是在悬停在元素之后使用 direction=rtl 。适用于基于 chrome 的浏览器，但不适用于 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>

在这里工作 chrome fiddle 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