Код
<script>
//My tooltip htmlstart.ucoz.net
$(document).ready(function() {
var tooltip
$('[title]').on('mouseenter', function() {
var title = $(this).attr('title');
$(this).data('tooltip', title).removeAttr('title');
tooltip = $('<div class="tooltip"></div>')
.text(title)
.appendTo('body')
.css({
position: 'absolute',
top: $(this).offset().top - $(this).height() - 0,
left: $(this).offset().left + $(this).width() / -2,
});
}).on('mousemove', function(event) {
tooltip.css({
top: event.pageY - tooltip.outerHeight() - 2,
left: event.pageX - tooltip.outerWidth() / - 10
});
}).on('mouseleave', function() {
$(this).attr('title', $(this).data('tooltip'));
tooltip.remove();
});
});</script>
//My tooltip htmlstart.ucoz.net
$(document).ready(function() {
var tooltip
$('[title]').on('mouseenter', function() {
var title = $(this).attr('title');
$(this).data('tooltip', title).removeAttr('title');
tooltip = $('<div class="tooltip"></div>')
.text(title)
.appendTo('body')
.css({
position: 'absolute',
top: $(this).offset().top - $(this).height() - 0,
left: $(this).offset().left + $(this).width() / -2,
});
}).on('mousemove', function(event) {
tooltip.css({
top: event.pageY - tooltip.outerHeight() - 2,
left: event.pageX - tooltip.outerWidth() / - 10
});
}).on('mouseleave', function() {
$(this).attr('title', $(this).data('tooltip'));
tooltip.remove();
});
});</script>
в ваш в CSS файл записываем данные строки
Код
.tooltip {
position: absolute;
z-index: 9999;
max-width:200px;
padding: 5px 8px;
background: rgba(60,60,60,0.7);
font: 12px/11px Calibri, Arial, Helvetica, sans-serif;
color: #fff;
font-style: italic;
line-height: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.tooltip:before {
content: '';
position: absolute;
bottom: 33%;
border: 5px solid;
border-color: transparent #0000008a transparent transparent;
left: -10px;
}
position: absolute;
z-index: 9999;
max-width:200px;
padding: 5px 8px;
background: rgba(60,60,60,0.7);
font: 12px/11px Calibri, Arial, Helvetica, sans-serif;
color: #fff;
font-style: italic;
line-height: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.tooltip:before {
content: '';
position: absolute;
bottom: 33%;
border: 5px solid;
border-color: transparent #0000008a transparent transparent;
left: -10px;
}
Этот код является отличным примером того, как с помощью jQuery можно создавать интерактивные элементы на веб-страницах.
и на этом пожалуй всё. и не забываем говорить спасибо)