Как я могу отображать всплывающее сообщение при наведении курсора с помощью jQuery?

Как говорится в заголовке, как я могу отображать всплывающее подсказку при наведении с помощью jQuery?

ОТВЕТЫ

Ответ 1

Я предлагаю qTip.

Ответ 2

Плагин подсказки может быть слишком тяжелым для того, что вам нужно. Просто установите атрибут "title" с текстом, который вы хотите показать в своей подсказке.

$("#yourElement").attr('title', 'This is the hover-over text');

Ответ 3

взгляните на jQuery плагин подсказки. Вы можете передать объект опций для разных параметров.

Существуют и другие альтернативные плагины для всплывающих подсказок, из которых несколько -

Взгляните на демонстрации и документацию и, пожалуйста, обновите свой вопрос, если у вас есть конкретные вопросы о том, как их использовать в вашем коде.

Ответ 4

Следующее будет работать как шарм (если у вас есть div/span/table/tr/td/etc с "id"="myId")

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

Как бесплатный, .css('cursor','pointer') изменит указатель мыши на зависание.

Ответ 5

Как рекомендовано qTip и другие проекты довольно старые, я рекомендую использовать qTip2, поскольку он является самым современным.

Ответ 6

Вы можете использовать bootstrap tooltip. Не забудьте инициализировать его.

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

Будет показан текст Объяснение на левой стороне.

и запустите его с помощью js:

$('.tooltip-r').tooltip();

Ответ 7

Взгляните на ToolTipster

  • простой в использовании
  • гибкий
  • довольно легкий, по сравнению с некоторыми другими плагинами всплывающих подсказок (39kB)
  • выглядит лучше, без дополнительного стиля
  • имеет хороший набор предопределенных тем.

Ответ 8

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>