So erstellen Sie Tooltips mit jQuery

Im Folgenden finden Sie eine einfache Idee zum Erstellen einer QuickInfo-Nachricht mit jQuery.

Idee…

Identifizieren Sie die "target", die die Tooltips-Meldung anzeigen müssen.
Erstellen Sie eine QuickInfo-Nachricht und einen CSS-Stil dafür.
Drei Funktionen: -showTooltips,hideTooltips,changeTooltipsPosition.
Während Sie mit der Maus dietarget eingeben, verwenden SieshowTooltips, um die QuickInfo-Meldung anzuzeigen und die Position mitchangeTooltipsPosition zu initialisieren.
Während Sie sich mit der Maus um die „target“ bewegen, ändern Sie die Position der QuickInfo-Nachricht mitchangeTooltipsPosition.
Verwenden Sie hideTooltips, während Sie das „Ziel“ verlassen, um die QuickInfo-Nachricht auszublenden.
Verwenden Sie dazu jQuery :)

1. Ziel

Der "Hinweis" und "Benutzername" sind das Ziel, um die QuickInfo-Meldung anzuzeigen.

Username : 
hint (mouseover me)

2. Tooltips CSS

Erstellen Sie einen CSS-Stil für QuickInfos.

.tooltip{
    margin:8px;
    padding:8px;
    border:1px solid blue;
    background-color:yellow;
    position: absolute;
    z-index: 2;
}

3. Tooltips anzeigen

Fügen Sie die QuickInfo-Nachricht an das Tag "body" an und initialisieren Sie die Position der QuickInfo-Nachricht.

var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('I\' am tooltips! tooltips! tooltips! :)')
     .appendTo('body');
   changeTooltipPosition(event);
};

5. Tooltips ändern

Ändern Sie die Position der QuickInfos.

var changeTooltipPosition = function(event) {
    var tooltipX = event.pageX - 8;
    var tooltipY = event.pageY + 8;
    $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

6. Tooltips ausblenden

Blenden Sie die QuickInfo-Nachricht aus.

var hideTooltip = function() {
    $('div.tooltip').remove();
};

7. Binde es

Binden Sie die Mausereignisse an das Ziel.

$("span#hint,label#username'").bind({
    mousemove : changeTooltipPosition,
    mouseenter : showTooltip,
    mouseleave: hideTooltip
});

Versuch es selber

Bewegen Sie in diesem Beispiel den Mauszeiger über den Hinweis oder die Beschriftung, um den Tooltip-Effekt anzuzeigen.












jQuery tooltips example

Username : 
hint (mouseover me)

Probieren Sie die Demo aus

TOC

So erstellen Sie Tooltips mit jQuery