Як можна відобразити підказку під час наведення курсору за допомогою jQuery?

Як зазначено в заголовку, як можна відобразити підказку під час наведення курсору за допомогою jQuery?

Я пропоную qTip .

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

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

Далі будуть працювати як шарм (за умови, що у вас є div / span / table / tr / td / etc with "id"="myId")

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

Як безкоштовний, .css('cursor','pointer')змінює вказівник миші при наведенні.

погляньте на плагін jQuery Tooltip . Ви можете передати об'єкт параметрів для різних параметрів.

Доступні також інші альтернативні підказки, серед яких декілька

• Підказка jQuery AJAX для Random.Next ()

• dhtml ласощі AJAX підказка

• clueTip

Погляньте на демонстраційні демонстрації та документацію та, будь ласка, оновіть своє запитання, якщо у вас є конкретні запитання про те, як їх використовувати у своєму коді.

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

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

Буде показано текст Пояснення зліва.

і запустіть його за допомогою js:

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

Оскільки рекомендовані qTip та інші проекти досить старі, я рекомендую використовувати qTip2, оскільки він є найсучаснішим.

Погляньте на ToolTipster

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

Ви можете зробити це, використовуючи лише 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>