PÉLDA tooltipre
2013.07.07. 13:21
A css kódban át kell írni a ".tooltip-container > div:before {" résznél a "right" deklarációt, de szerintem így, ahogy beállítottam, neked is jó lesz. :)
CSS Kód:
<style type="text/css">
.tooltip-container {
position:relative;
}
.tooltip-container > div {
opacity:0;
z-index:-1;
position:absolute;
background:rgba(0,0,0,0.8);
border:1px solid rgba(0,0,0,0.9);
color:#FFF;
padding:5px;
color:#FFF;
width:150px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
transition: all 0.2s ease-in;
left:0px;
top:30px;
}
.tooltip-container > div:before {
content:"";
top:-10px;
left:100px; /*ezt a kód részletet kell álligatni*/
position:absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent rgba(0,0,0,0.9);
}
.tooltip-container a:hover ~ div {
opacity:1;
z-index:1;
}</style>
Úgy tudtam azt megcsinálni, hogy a tooltip a szöveg mellé kerüljön, hogy Forráskód nézetbe beillesztettem a kódot, azután vissza, és a kód elé beírtam a szöveget. :) De inkább be illesztem ide a HTML kódot is, hogy csak át kelljen írni a TÖRTÉNET részt:
<div class="tooltip-container">
TÖRTÉNET: <a href="www.fuckinway.gportal.hu">Mutass erre a linkre!</a>
<div>
Ide jöhet a te szöveged.</div>
</div>
|