Способ вывести title элемента в виде всплывающей подсказке.
Работает и с <area>.
html:
<a href="/link.html" title="текст" alt="текст">ССЫЛКА</a>
Скрипт:
$(function() { $("#ddd a").each(function(b) {//работа с элементом (ссылка в блоке с id=ddd) if (this.title) { var c = this.title; var x = 0;//расположение по горизонтали(left) var y = 35;//расположение по вертикали (top) $(this).mouseover(function(d) { this.title = ""; $("body").append('<div id="tooltip">' + c + "</div>"); $("#tooltip").css({ left: (d.pageX + x) + "px", top: (d.pageY + y) + "px", opacity: "0.8"//полупрозрачность }).show(300)//скорость появления подсказки }).mouseout(function() { this.title = c; $("#tooltip").remove() }).mousemove(function(d) { $("#tooltip").css({ left: (d.pageX + x) + "px", top: (d.pageY + y) + "px" }) }) } }) });
CSS стили:
#tooltip{ background:#000; color:#f3f3f3; text-align:center; padding:6px 0; position:absolute; max-width:250px; z-index:9999; display:none; border-radius:3px; box-shadow:4px 4px 8px rgba(0, 0, 0, 0.3); padding:5px 8px; font-size:20px; text-shadow:none; } #tooltip:before{ position: absolute; width: 0; height: 0; line-height: 0; border: 6px dashed #000; top: -6px; left:15px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; content:''; font-size:20px; }