фонарик,
<!DOCTYPE HTML>
<html>
<head></head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#title {
/*Всплывающая подсказка*/
position:absolute;
display:block;
text-shadow: -1px -1px 0px #FFFFFF;
border:2px ridge #bb9f72;
border-radius:9px;
padding:4px;
min-height:5px;
max-height:300px;
min-width:50px;
max-width:530px;
color:#332207;
background-color: rgba(221, 203, 174, 0.8);
background-size:100% 100%;
}
</style>
<body>
<div id='ff' class='tt' title='ololo' style="width:100px; height:100px; background-color:gray; border:1px solid red;" onmousedown="info(this)"></div>
<script type="text/javascript">
function info(elem) {
alert(elem._title)
}
</script>
<script>
var s_x = 13,
s_y = 0; //смещения подсказки относительно курсора
$(document).ready(function () {
$(('<span id=title></span>')).appendTo('body').hide()
$('[title]').each(function (i, e) {
//запоминаем значение атрибута в свойстве _title
//сам атрибут удаляем (чтобы браузер не показывал собственные подсказки)
e._title = $(this).attr('title').replace(/\\n/gim, '<br>');
$(this).removeAttr('title')
.mouseover(function (evt) {
$('#title')
.html($(this).get(0)._title)
.fadeIn(0).css({
left: (evt.pageX + s_x) + 'px',
top: (evt.pageY + s_y) + 'px'
})
})
.mouseout(hide_title)
.mousemove(function (evt) {
$('#title').css({
left: (evt.pageX + s_x) + 'px',
top: (evt.pageY + s_y) + 'px'
})
});
})
})
function hide_title() {
$('#title').hide();
}
</script>
</body>
</html>