- 17, May 2024
- #1
Может кто-нибудь сказать мне, почему этот переход к облегчению выхода игнорируется?
http://jsfiddle.net/gqnGN/264/
http://jsfiddle.net/gqnGN/264/
<a href="#" data-tooltip="Link Title" data-tooltip-position="right">LINK</a>
<style>
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: absolute;
background: #000;
color: #fff;
padding: 2px 2px 2px 2px;
font-size: 14px;
line-height: 18px;
min-width: 68px;
text-align: center;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
opacity: 0;
}
[data-tooltip-position="right"]:before {
top: 45px;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
[data-tooltip-position="right"]:before {
left: 45px;
margin-left: 6px;
}
[data-tooltip]:after {
content: '';
display: none;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
[data-tooltip-position="right"]:after {
top: 45px;
margin-top: -6px;
}
[data-tooltip-position="right"]:after {
left: 45px;
border-width: 6px 6px 6px 0;
border-right-color: #000;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
z-index: 100;
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
</style>
Код (разметка):