Tooltips die het ook op tablets en smartphones doen

De ‘oude’ manier om tooltips te maken werkt niet op smartphones en tablets. Maar deze manier wel!

Een tooltip wordt op websites vaak gebruikt om even een korte uitleg over iets te geven, bijvoorbeeld over de betekenis van een woord of afkorting. Je beweegt met je muis over het woord heen, en de verklaring verschijnt vanzelf in beeld.

Een tooltip was altijd simpel te maken: alles wat je hoefde te doen is van het woord een element te maken – bijvoorbeeld door het tussen een set link-tags of span-tags neer te zetten, en aan dit element een zgn. title toe te voegen met de verklaring. Op deze manier bijvoorbeeld:

<a href="#" title="Omschrijving in een tooltip">tooltip</a>

Alleen, in de huidige tijd van tablets en smartphones voldoet deze manier niet meer. Op een tablet of smartphone beweeg je niet meer met je muis over een element heen, en zul je dus de inhoud van die tooltip ook niet meer te zien krijgen.

Een alternatieve oplossing – die ik in de eerste alinea heb gebruikt – is een soort van popup op te roepen als op het betreffende woord wordt geklikt. En om duidelijk te maken dat het niet om een gewone link gaat, maar om een tooltip, komt er bij de muisaanwijzer een vraagtekentje te staan in plaats van een handje als hij zich boven het woord bevindt waaraan de tooltip is gekoppeld. Dit woord heb ik een iets ander uiterlijk gegeven dan een gewone link, zodat voor de bezoeker duidelijk is dat dit iets speciaals is.

De tooltip op deze pagina maakt gebruik van jQuery, en daarvoor moet je eerst in de head van je pagina een link naar jQuery neerzetten, anders zal het niet werken. In de head van je pagina zet je daarom het volgende neer:

<script src="http://code.jquery.com/jquery-3.1.1.min.js"</script>

Daarna geef je aan welk woord een tooltip moet krijgen. Dit woord zet je tussen een set span-tags. Dit span-element geef je een uniek id, bijvoorbeeld: tooltiplink1. Bij mij ziet het er zo uit:

<span id="tooltiplink1" class="ttlink">tooltip</span>

Zoals je ziet heb ik dit span-element ook nog een class gegeven, voor de vormgeving van de tooltiplink. Deze stijleigenschappen kun je in een stijlblok in de head van je pagina neerzetten, of in je stylesheet. Ook kun je ze natuurlijk aan het span-element zelf toevoegen, door middel van style="". Tussen de set dubbele aanhalingstekens zet je dan de stijleigenschappen voor dit element neer. Hoe dan ook, voor de tooltiplink hierboven heb ik de volgende eigenschappen gebruikt:

border-bottom: 1px dotted black; cursor: help;

Het tweede element dat je moet maken, is natuurlijk het tooltipkadertje zelf. Dat is gewoon een div-element, met een uniek id, en eventueel ook weer een class voor de vormgeving ervan. Het kadertje op deze pagina ziet er zo uit:

<div id="tooltip1" class="ttkader">Een <strong>tooltip</strong> of hint is, in een grafische gebruikersomgeving, een informatieve tekst die verschijnt wanneer de gebruiker de muisaanwijzer boven een object plaatst. Tooltips verschijnen bij items waar dat wenselijk is, bijvoorbeeld als toelichting of als extra informatie. <em>(Bron: Wikipedia.org)</em></div>

De vormgeving heb ik weer vastgelegd in een class zoals je ziet (ttkader). Deze heeft de volgende opmaakkenmerken:

    display: none;
    width: 150px;
    margin: 50px 80px;
    background-color: white;
    font-size: 0.8em;
    color: firebrick;
    padding: 1em;
    border: 1px solid #606060;
    border-radius: 5px;
    box-shadow: 2px 2px 2px #808080;
    z-index: 2;
    

Wat hieraan opvalt, is de eigenschap display: none. Die zorgt ervoor dat dit kadertje normaal niet te zien is, en dat hij alleen tevoorschijn komt als er op de juiste link wordt geklikt.

En ten slotte moet je in de head van je pagina nog het script opnemen dat ervoor gaat zorgen dat het kadertje ook daadwerkelijk tevoorschijn komt als je op de goede link klikt. Dat is het volgende script:

    <script>
        $(document).ready(function(){
        $('#tooltiplink1').click(function(){
        var pos = $(this).position();
        var width = $(this).outerWidth();
        $('#tooltip1').css({
        position: "absolute", 
        top: (pos.top - 30) + "px", 
        left: (pos.left - width/2 -15) + "px"
        }).show('slow');
        });
        $(document).mousedown(function(sluittt) {
        var clicked = $(sluittt.target); 
        if (clicked.is('.ttkader')) {
        return; 
        } else { 
        $('.ttkader').hide("slow");
        }
        });
        }); 
    </script>
    
    

Om meer dan één tooltip op een en dezelfde pagina te maken, moet je het script bovenin je pagina wat uitbreiden. Want je moet daarin natuurlijk heel goed duidelijk maken welke tooltiplink bij welk tooltipkader hoort. Daarvoor moet je de regels 3 t/m 11 uit het script kopiëren en er direct onder plakken (en natuurlijk de id's aanpassen).