Sådan oprettes en værktøjstip med CSS & jQuery

Værktøjstips er små tip, der dukker op, når brugeren svæver over et ikon. Du kan opnå denne praktiske effekt med HTML div-containere, der bruger jQuery. CSS designer layoutet for værktøjstipen, og jQuery udfører alle funktionerne til pop op og viser værktøjstip til dine læsere. For at komme i gang med værktøjstips, opretter du en simpel værktøjstipbeholder og jQuery-kode til ethvert HTML-element på din webside.

1.

Højreklik på den HTML-fil, du vil bruge til at oprette værktøjstipen. Klik på "Åbn med" og vælg din foretrukne editor.

2.

Opsæt værktøjstip-CSS-koden. Den følgende CSS-kode er et eksempel på et simpelt værktøjstiplayout til en popup, men du kan bruge dine egne farver, bredde og skrifttypeindstillinger:

.tooltip {position: absolute; z-index: 999; venstre: -9999px; background-color: #dedede; padding: 5px; grænse: 1px solid #fff; bredde: 250 px; }

3.

Opret værktøjstip div container. Div-elementet indeholder den tekst, du vil vise til brugeren. Følgende kode viser "Hej, Verden" i værktøjstip:

Hej Verden

4.

Opret jQuery-funktionen, der udfører popup-aktiviteten til værktøjstipen. Følgende kode tilføjer popup-funktionaliteten:

$ (dokument) .ready (funktion () {$ (dette) .removeAttr ("title"). mouseover (funktion {) {my_tooltip.css ({opacity: 0.8, display: "none"}) ;}). mouseout (funktion () {my_tooltip.fadeOut (400);});

Funktionen ovenfor viser værktøjstip, når brugeren svæver over et HTML-element, og det skjuler værktøjstipen, når brugerens mus bevæger sig væk fra elementet.

5.

Tilføj det HTML-element, du vil bruge til at vise værktøjstipen. Dette kan være et link, et knap eller et billedikon. Følgende kode bruger et link til værktøjstip:

tooltip

 

Efterlad Din Kommentar