工具提示方向莫西亚 [英] tooltip direction mozilla

问题描述

我试图做一个工具提示，这是非常简单的愚蠢的实现和更改。我真的不想添加跨度或任何类似的东西来实现这一点。我只是想能够添加tooltip ='我的工具提示示例'到div，跨度和链接。我已经缩小了很好，除了firefox这真的不能很好地与这个策略。问题是使用direction = rtl在悬停元素后面。工程伟大的基于chrome的浏览器，但不是firefox。没有答案我在这里找到解决问题。这里是我的代码到目前为止。

  CSS第一个
 
 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）; 
背景：海蓝宝石
 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下一页
 
 window.onload = function（）{
 document.getElementsByTagName（a）[0] .setAttribute类，工具提示）; 
} 
 
和html 
 
< a tooltip =supercalifragilisticexpialidocious>链接元素测试< / a> 
  

在这里工作chrome fiddle https://jsfiddle.net/rwmy5kpn/14/

我遇到的另一个问题是尝试分配这个类到多个元素。每次尝试添加另一个元素都会禁用脚本。这不是一个问题比第一个，但很高兴知道我将在这里出错。

感谢

c>和可以使用 position：relative， right>，属性。

  .tooltip：hover {
 .... 
 ：相对; 
} 
 .tooltip：hover：after {
 .... 
 position：absolute; 
 right：20px; 
 left：auto; 
 top：30px; 
} 
 .tooltip：hover：before {
 ... 
 position：absolute; 
 right：30px; 
 left：auto; 
 top：10px; 
} 
  

DEMO

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

解决方案

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

这篇关于工具提示方向莫西亚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！