humans.txt

Humans txt

Ist keine Erfindung von mir. Sondern ein Projekt, um die Menschen hinter einer Webseite kennen zu lernen. Hier die Projektseite von humans.txt

Team

Chef: Rocco Wernicke
Contact: r.wernicke-schleswig[at]email.de
From: Deutschland

Site

Last update: 2015/03/10
Language: Deutsch
Doctype: HTML5
TECHNOLOGY: Html5, Css3, jQuery, Modernizr
IDE & Software: Sublime Text, Notepad++, Netbeans, PhpStorm, FileZilla, Gimp
 
Ansicht
Sie befinden sich definitiv hier: [ zur Startseite ]Pages » Tutorial »

Sidebar Open Mediaquerie anzeigen

jQuery-Tooltip

Tooltip-Plugins lassen sich sicher jede Menge im Netz finden, wir werden jedoch unseren eigenen programmieren.

siehe auch

Wer nicht das Title-Attribute des A-Tag nutzen möchte, findet hier eine Alternative von mir. Dieses Plugin erzeugt bei hover() einen Span-Tag und entfernt diesen wieder.
Wenn es nur eine Css3-Variante sein soll, schauen euch dieses Tutorial an.

Schlüsselworte

Tooltip

Schreiten wir also zur Tat. Schaut euch vorerst folgenden Code an.

var tooltip = {
  
  init: function()
  {
    var $oTooltip = $('.tooltip');
   
    if(!$oTooltip.length) return;
    
    $('body').append('<div class="tip" />');
    
    var $sTip = $('.tip');
    
    var $sTitle;
    
    
    $oTooltip.hover(function(e)
    {
      $sTitle = $(this).attr('title') ? $(this).attr('title') : "No Title";
      
      $sTip.html($sTitle);
      
      $sTip.css({
        top  : e.pageY + 10,
        left : e.pageX + 10
      });
      
      $sTip.stop(true, true).delay(50).fadeIn("slow");
      
    }, function(){
      
      $(this).attr('title', $sTitle);
      
      $sTip.stop(true, true).fadeOut("slow");
    });
  }
}



Hier hängen wir mit der Methode append() den Tooltip an das <body>-Element. Im Css haben wir zuvor festgelegt, dass unser Tooltip-Behälter nicht sichtbar ist. Im nächsten Schritt wird mittels hover() der Event-Händler initialisiert und an jedes Element angehängt.
Im weiteren wird der Wert des Title-Attributes gespeichert und nach der Abfrage ob etwas vorhanden ist im Tooltip-Container abgelegt.

... 
$sTitle = $(this).attr('title') ? $(this).attr('title') : "No Title";
      
     $sTip.html($sTitle);

...

Wichtig ist in unsern Beipiel die Funktion stop(). Diese verhindert bei mehrmaligen mouseover() das wilde herum flackern des Tooltip.

...

$sTip.stop(true, true).delay(50).fadeIn("slow");

...

Hier unser Ergebnis

Example