$IMAGE1$
Вот сделал подсказки. Кому понравились ставте себе на сайт.
html
--------------------------------------------------------------------------------------------------------------------
<a href="#" class="tooltip">
Слово<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>
--------------------------------------------------------------------------------------------------------------------
В head
--------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
$(function() {
$('.tooltip').mouseover(function(){
$(this).children('div').fadeIn(2000);
})
$('.tooltip').mouseout(function(){
$(this).children('div').fadeIn(1000);
})
$('#tooltip_content').mouseover(function(){
$(this).children('div').fadeOut(2000);
})
});
</script>
-------------------------------------------------------------------------------------------------------------------------------------------- -------------
CSS
-------------------------------------------------------------------------------------------------------------------------------------------- -------------
.tooltip
{
position: relative;
display: inline-block;
text-decoration: none;
outline: none;
}
.tooltip div
{
visibility: hidden;
position: absolute;
bottom: 40px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #000000;
opacity: .9;
background-color: #000000;
-moz-border-radius: 4px;
border-radius: 4px;
cursor:auto;
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover div
{
visibility: visible;
}
.tooltip div:before,
.tooltip div:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #000000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip div:before
{
border-top-color: #000000;
bottom: -8px;
}
.tooltip_text {
color:#fff;
}
-------------------------------------------------------------------------------------------------------------------------------------------- -------------
Помог? Ставь + в репутацию и наградку, отвечу тем же!!
Сообщение отредактировал admin2 - Воскресенье, 27.01.2013, 19:13
