Tooltip: оформление атрибута title ссылок на jQuery

jQuery & JavaScript WordSmall

При наведении курсора на ссылку, которая содержит атрибут title, появляется всплывающая подсказка. По умолчанию она не имеет полного оформления, а лишь однообразный вид, не всегда подходящий современному дизайну. Но при помощи одних стилей CSS нет возможности автоматически стилизовать сразу все title на сайте. Поэтому приходится прибегнуть к JavaScript, чтобы добиться желаемого результата.

Весь скрипт состоит из несколько строк, что делает его таким легким и простым. Его суть, если сказать по-простому, добавить title ссылки в блок див за последующим оформлением всплывающих подсказок. Оформление будет произведено средствами CSS, так как вам захочется. Еще один момент, для работы скрипта необходимо подключение библиотеке jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

На первом шаге займемся подключением скрипта. Лучше всего добавить код в уже имеющий файл js, а если нет такого, то создать самому. Затем просто в футере сайта подключить этот файл. Это один из вариантов, можно обычным способом прям в тело файла между тегами <script>…</script> поместить весь код.

<script>
$(function() {
    $("a").each(function(b) {//работа с элементом (ссылка)
        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"
                })
            })
        }
    })
    });
</script>

Вторым шагом идет стилизация. Ограничений нет, только все в рамках ваших фантазий. На примере показано два варианта:

№1

#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:12px;
        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:'';
}

№2

#tooltip {
    background: #f3f3f3;
    max-width:250px;
    border-radius: 3px;
    box-shadow: 0 0 3px #000;
    color: #000;
    display: none;
    font-size: 12px;
    padding: 3px 8px;
    position: absolute;
    text-align: center;
    text-shadow: none;
    z-index: 9999;
}

Посмотреть Demo

На этом все.

Источник: http://blog.kilvn.com/jquery-tooltip/

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 4
  • Олег

    Здравствуйте.

    Как сделать, чтобы подсказка появлялась над курсором?

    Спасибо.

    • WordSmall

      Здравствуйте. В этом варианте нет особой гибкости с настройками. Можете что-то вроде отрицания сделать var y = -55;, но это некорректность. Попробуйте такой вариант tooltip codepen.io/chinchang/pen/lICaq

  • Андрей

    Доброго времени суток. С кодом java script всё понятно – добавлять в футер, а стили – в style.css, я правильно понимаю?

    • WordSmall

      Здравствуйте! Да, вы правильно понимаете. Добавляйте стили в файл style.css или любой другой файл стилей, который подключается к сайту.

Добавить комментарий
bold quote code