Tooltips i Divi 5: informationsbobler

De fleste selvbyggere har prøvet det samme scenarie. Du har en prisliste, en funktionsoversigt eller en formular med et felt, der kræver en kort forklaring, men den forklaring passer ikke naturligt ind i det visuelle flow. Løsningen bliver ofte enten en lang brødtekst under overskriften, som ingen læser, eller slet ingen forklaring, som efterlader den besøgende i tvivl.

En tooltip er en lille informationsboble, der dukker op, når brugeren holder musen over eller trykker på et bestemt element. Den giver dig et sted at gemme detaljer, som er relevante for nogen, men ikke for alle, uden at det belaster resten af siden. Det er samme princip, som store SaaS-produkter har brugt i årevis til at forklare fagudtryk eller funktioner uden at oversvømme brugerfladen.

Divi 5 bygger tooltip-funktionen direkte ind i modulsystemet, så den ikke kræver et separat plugin. Du knytter en tooltip til stort set ethvert element på siden, det være sig en tekst, en knap, et ikon eller et billede, og indholdet i boblen redigeres på samme måde som resten af dit Divi-layout. Det betyder, at du kan style tooltippen med samme designsprog som resten af siden i stedet for at leve med en fremmed pop-up, der ser ud til at komme fra et andet system.

Tooltips er stærke til korte, understøttende informationer: en definition af et fagudtryk, en note om leveringstid, en detalje om en produktvariant. De er ikke det rigtige værktøj til information, som brugeren har brug for at se med det samme, for eksempel priser, hovedbudskaber eller call to action-tekst. Hvis indholdet er kritisk for beslutningen, skal det stå synligt i layoutet, ikke gemmes bag et hover.

Tommelfingerreglen er enkel: brug en tooltip, når informationen er en uddybning, ikke en forudsætning. Sæt den ind, hvor en nysgerrig bruger vil lede efter mere kontekst, men hvor en travl bruger sagtens kan handle uden den. Gjort rigtigt giver det dig et renere layout med færre visuelle forstyrrelser, samtidig med at de detaljeorienterede besøgende stadig får deres svar.

Gjort rigtigt giver det dig et renere layout med færre visuelle forstyrrelser, samtidig med at de detaljeorienterede besøgende stadig får deres svar. Det er den slags detalje, der ofte skiller en side, der føles gennemtænkt, fra en side, der bare virker. Når du bygger videre på dit Divi-layout, er det værd at spørge sig selv ved hvert tekstblok: skal dette stå fremme, eller kan det gemmes i en tooltip, indtil nogen aktivt beder om det? Samme tankegang gælder for magasin-stil blogsider med billedbeskæringer, hvor bevidste designvalg også afgør, hvad der skal vises direkte, og hvad der kan forenkles.