1
  1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
Приветствуем вас,Гость, на форуме IFUD.WS. Обязательно рекомендуется к прочтению правила форума http://ifud.ws/threads/obnovleno-pravila-foruma.7759

Всплывающие подсказки title на JQuery + CSS

Тема в разделе "Программирование", создана пользователем Dodger, 28 авг 2015.

  1. TopicStarter Overlay
    Dodger

    Dodger

    Регистрация:
    28 фев 2015
    Сообщения:
    34
    Симпатии:
    35
    Обычные всплывающие подсказки с текстом при наведении на какой-либо HTML элемент, чаще ссылку, можно сделать более эффективными и полезными для пользователей применив маленький jQuery скрипт и стилизацию CSS. Ниже приведен рабочий скрипт с пояснениями.

    JQuery скрипт для всплывающих подсказок:
    --------JQuery скрипт-----------------------
    this
    .tooltip = function(){
    xOffset = 0; // отступ по оси xот положения курсора yOffset = 20; // отступ по оси yот положения курсора
    $('a[title]').hover(function(e){
    this.t = this.title;
    this.title = "";
    $("body").append("");
    $("#tooltip")
    .css("top",(e.pageY - xOffset) + "px")
    .css("left",(e.pageX + yOffset) + "px")
    .delay(800) //задержка в миллисекундах до появления подсказки
    .fadeIn(200); // эффект постепенного проявления
    },
    function(){
    this.title = this.t;
    $("#tooltip").remove(); // удаляем подсказку при выходе курсора за пределы элемента
    });
    $('a[title]').mousemove(function(e){
    $("#tooltip")
    .css("top",(e.pageY - xOffset) + "px") // подсказадвигаетсязакурсором
    .css("left",(e.pageX + yOffset) + "px");
    });
    };
    $(document).ready(function(){
    tooltip();
    });
    -----------JQuery скрипт--------------

    CSS стилизация:
    ----------CSS----------
    #tooltip {
    position:absolute; /* позиция подсказки не привязана к другим элементам */
    background:#FFF; /* цвет фона подсказки (белый) */
    padding:3px; /* отступы (3 пикселя) */
    display:none; /* делаем невидимой до обработки jQueryскриптом */
    color:#666/* цвет текста подсказки */
    }

    ------CSS-----



    B HTML коде ничего не нужно менять, скрипт обрабатывает все элементы <a href="ссылка" title="текст всплывающей подсказки"> считывая только атрибут title для ссылок.
     
    • Like Like x 4
    Метки:

Поделиться этой страницей

Загрузка...