Hoe maak je een tooltip in jQuery?

Wanneer een gebruiker over bijvoorbeeld een link of afbeelding gaat met zijn muis dan verschijnt er een heel eenvoudige vorm van een tooltip.

Deze versie heeft echter weinig tot geen mogelijkheden om er wat mee te doen.

Tooltips kun je goed gebruiken als informatiegereedschap. In deze tutorial wil ik een tooltip maken met behulp van jQuery, die extra informatie biedt bij bijvoorbeeld een link.

Title attribuut

Om het eenvoudig te houden maken we gebruik van het title attribuut. Het voordeel is dat mensen die JavaScript niet gebruiken toch ook de extra informatie kunnen zien.

Nadeel van het title attribuut is het niet of onvoldoende kunnen gebruiken van HTML in de tooltip. Daar zijn dan weer andere oplossingen voor.

Voordeel is natuurlijk dat je los kunt gaan met het stijlen van je tooltip dus we gaan maar eens aan de slag.

De css en html code

De link wordt met de volgende html code in je website geplaatst:

HTML templates kopen?

We gaan nu eerst stijl toevoegen aan de tooltip. Die we als class maar even de naam ’tooltip’ geven.

.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #333;
  background-color: #ffed8a;
  width: 200px;
  padding: 2px 6px;
}

Je ziet dat de tooltip absoluut wordt gepositioneerd. Standaard is de tooltip met deze CSS code natuurlijk niet zichtbaar. We moeten dus een hover functie maken zodat bij het over de link gaan met je muis, de tooltip wel verschijnt.

Basis van het script

Dat doen we met de volgende basis:

$('.location').hover(function(e) {
  // Hover over code
}, function() {
  // Hover out code
}).mousemove(function(e) {
  // Muis beweegt code
});

Stap voor stap code invoegen

We moeten nu een stapje verder de code in om ervoor te zorgen dat de hover code de title gaat vervangen en omzetten naar een tooltip. Deze tooltip komt op een specifieke positie te staan, afhankelijk van de plaats van de muis. Daarvoor gebruiken we x en y coordinaten.

// Zet dit in het vorige script onder de regel Hover over code
var titleText = $(this).attr('title');
$(this)
  .data('tipText', titleText)
  .removeAttr('title');
$('
')
  .text(titleText)
  .appendTo('body')
  .css('top', (e.pageY - 10) + 'px')
  .css('left', (e.pageX + 20) + 'px')
  .fadeIn('slow');

Je ziet dat we de title weghalen, maar deze tekst moet natuurlijk wel verschijnen in onze tooltip.

W3C standaard of niet

We hebben nu alles wat we nodig hebben om de tooltip te laten verschijnen. Nu zou je aan de title wel html code kunnen toevoegen. Echter de W3C standaard staat dat niet toe. Mocht je daar verder geen probleem mee hebben dan zou je dat eens kunnen proberen natuurlijk.

Tenslotte nog de code om de hover weer te laten verdwijnen. Dit is het tegenovergestelde van de eerdere code:

// Dit deel komt in het script te staan onder Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
// Dit is de Muis beweegt code
$('.tooltip')
  .css('top', (e.pageY - 10) + 'px')
  .css('left', (e.pageX + 20) + 'px');

Aan het einde nog een korte code zodat de tooltip met de muis mee beweegt als we deze iets verplaatsen. Precies zoals het normaal gesproken ook gaat.

Het resultaat

Het resultaat tonen we in de pagina tooltip met ’title’. Let erop dat je dus ook gebruik maakt van jQuery door in de broncode van je webpagina <script src=”jquery-1.4.min.js” type=”text/javascript”></script> toe te voegen. Deze versie kun je in de betreffende map vinden en op je eigen server plaatsen.