Hint (Подсказка) на CSS
Слепил тут подсказку (hint) на CSS, может кому пригодится))) Подсказку можно делать любого вида/стиля
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow-x: hidden;
padding: 0 20px;
}
.wink {
position: relative;
display: inline-block;
background-image: url('http://javascript.ru/forum/images/smilies/wink.gif');
width: 20px;
height: 20px;
}
.agree {
position: relative;
display: inline-block;
background-image: url('http://javascript.ru/forum/images/smilies/agree.gif');
width: 37px;
height: 23px;
}
.thanks {
position: relative;
display: inline-block;
background-image: url('http://javascript.ru/forum/images/smilies/thank_you2.gif');
width: 36px;
height: 29px;
}
/* Простой вид подсказки */
[data-hint]:after {
opacity: 0;
content: "";
}
[data-hint]:hover {} /* IE10 без этой строчки не работает */
[data-hint]:hover:after {
opacity: 1;
-webkit-transition: opacity 0.2s 50ms ease;
-moz-transition: opacity 0.2s 50ms ease;
-o-transition: opacity 0.2s 50ms ease;
transition: opacity 0.2s 50ms ease;
position: absolute;
content: attr(data-hint);
white-space: pre;
top: 90%;
left: 60%;
border: 1px solid #999;
border-radius: 3px;
font: normal 11px Tahoma;
padding: 5px 5px 5px 25px;
box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.5);
z-index: 1000;
cursor: default;
background: #ffffed url('http://spb-piksel.ru/20x20-Info.png') 2px center no-repeat;
}
/* Отображает внизу контента подсказку */
[data-hint-down]:after, [data-hint-down]:before {
opacity: 0;
content: "";
position: absolute;
top: 100%;
left: 50%;
z-index: 1000;
cursor: default;
white-space: pre;
}
[data-hint-down]:hover {} /* IE10 без этой строчки не работает */
[data-hint-down]:hover:before {
opacity: 1;
-webkit-transition: opacity 0.2s 50ms ease;
-moz-transition: opacity 0.2s 50ms ease;
-o-transition: opacity 0.2s 50ms ease;
transition: opacity 0.2s 50ms ease;
content: attr(data-hint-down);
border: 1px solid #999;
border-radius: 3px;
font: normal 11px Tahoma;
padding: 5px 5px 5px 25px;
box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.5);
background: #ffffed url('http://spb-piksel.ru/20x20-Info.png') 2px center no-repeat;
margin: 9px 0 0 -10px;
}
[data-hint-down]:hover:after {
opacity: 1;
-webkit-transition: opacity 0.2s 50ms ease;
-moz-transition: opacity 0.2s 50ms ease;
-o-transition: opacity 0.2s 50ms ease;
transition: opacity 0.2s 50ms ease;
content: "\25B2";
color: #ffffed;
margin: -5px 0 0 -7px;
text-shadow: 0px -1px 1px #444;
}
/* Отображает вверху контента подсказку */
[data-hint-up]:after, [data-hint-up]:before {
opacity: 0;
content: "";
position: absolute;
bottom: 100%;
left: 50%;
z-index: 1000;
cursor: default;
white-space: pre;
}
[data-hint-up]:hover {} /* IE10 без этой строчки не работает */
[data-hint-up]:hover:before {
opacity: 1;
-webkit-transition: opacity 0.2s 50ms ease;
-moz-transition: opacity 0.2s 50ms ease;
-o-transition: opacity 0.2s 50ms ease;
transition: opacity 0.2s 50ms ease;
content: attr(data-hint-up);
border: 1px solid #999;
border-radius: 3px;
font: normal 11px Tahoma;
padding: 5px 5px 5px 25px;
box-shadow: 3px 3px 3px -2px rgba(0,0,0,0.5);
background: #ffffed url('http://spb-piksel.ru/20x20-Info.png') 2px center no-repeat;
margin: 0 0 9px -10px;
}
[data-hint-up]:hover:after {
opacity: 1;
-webkit-transition: opacity 0.2s 50ms ease;
-moz-transition: opacity 0.2s 50ms ease;
-o-transition: opacity 0.2s 50ms ease;
transition: opacity 0.2s 50ms ease;
content: "\25BC";
color: #ffffed;
margin: 0 0 -5px -7px;
text-shadow: 1px 2px 2px #666;
}
</style>
</head>
<body>
<p>Наведите на смайл, увидите подсказку сделанную на CSS.<br />Плавное появление работает только в FireFox, другие браузеры применять transition на псевдоэлемент не хотят ;(</p>
<br />
<span class="wink" data-hint="Подмигиваю ;)"></span>
<span class="agree" data-hint="Согласен :agree:"></span>
<span>Простая подсказка</span>
<br />
<br />
<br />
<span class="wink" data-hint-down="Подмигиваю ;)"></span>
<span class="agree" data-hint-down="Согласен :agree:"></span>
<span>Подстказка отображается снизу с указывающей стрелкой вверх</span>
<br />
<br />
<br />
<span class="wink" data-hint-up="Подмигиваю ;)"></span>
<span class="agree" data-hint-up="Согласен :agree:"></span>
<span>Подстказка отображается сверху с указывающей стрелкой вниз</span>
<br />
<br />
<br />
<span class="thanks" data-hint-up="Слепил тут подсказку (hint) на CSS,
может кому пригодится)))
Подсказку можно делать любого вида/стиля"></span>
<span>Многострочная подсказка</span>
</body>
</html>
|