г. Саратов
+7 (927) 130-20-79
mail@promo64.ru

Вывести title элемента в виде всплывающей подсказки

Разработка и продвижение сайтов в Саратове

Способ вывести 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;
}