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

86

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

jquery

1

Если это не динамически сгенерированный элемент или всплывающая подсказка, содержимое которой может измениться, я бы предложил использовать title="My tooltipатрибут с самим элементом

— Судипта Чаттерджи,

пожалуйста, обратитесь, я проверил, что он работает безупречно: stackoverflow.com/questions/11781665/…

— Дэниел Аденью

25

Предлагаю qTip .

— андрейалеку
источник

36

qTip очень тяжелый (55kb, больше, чем некоторые целые JS-фреймворки). См. Ответ психотика об использовании атрибута HTML. Но если вы хотите что-то легкое и красивое, попробуйте этот плагин JQuery под названием PowerTip, всего 12 КБ и совместимый даже со старыми браузерами - stevenbenner.github.com/jquery-powertip

— sdailey

190

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

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

— психотик
источник

11

Обратите внимание, что всплывающую подсказку можно также разместить в атрибуте непосредственно в HTML: <div id = "DivWithTooltip" class = "DivClass" title = "Ваше сообщение при наведении">

— Марк Бриттингем

3

У меня это не сработало в IE! Пришлось использовать propвместо этого. $("#yourElement").prop('title', 'This is the hover-over text');

— SNag 06

Привет @psychotik. Можно ли выделить это название жирным шрифтом?

— krish___na

16

Следующее будет работать как шарм (при условии, что у вас есть 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')изменит указатель мыши при наведении курсора.

— being_ethereal
источник

2

как добавить стиль на apeared подсказке

— Utpal

11

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

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

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

— Расс Кэм
источник

5

Вы можете использовать всплывающую подсказку начальной загрузки . Не забываем его инициализировать.

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

Слева отобразится текст Объяснение.

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

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

— Черный
источник

4

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

— Berni
источник

2

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

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

— Pixparker
источник

0

Вы можете сделать это, используя только CSS, без использования jQiuery.

<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>

— Налан Мадхесваран
источник

Этот ответ не является ответом на вопрос.

— Девин Филдс