Hva er den enkleste måten å lage en HTML Mouseover Tooltip

Vi ser ofte litt mer informasjon om noen elementer på skjermen mens vi flytter, peker eller svever musen på skjermen på forskjellige nettsteder og webapplikasjoner. Informasjonen som plutselig vises mens du peker markøren på et bestemt element og forsvinner når musen blir flyttet til andre deler av grensesnittet er Mouseover ToolTip -setningen.

Hva er en musoveringsverktøytip?

En museover -verktøytip er et vanlig grafisk brukergrensesnittelement som brukes til å gi ekstra informasjon om et element når brukeren peker eller svever musen over den. Hovedformålet med denne verktøytipen er å veilede og lette sluttbrukerne slik at de lett kan forstå innholdet. Denne metoden brukes i et stort antall programvare og applikasjoner for å utdype formålet med forskjellige ikoner, knapper, avsnitt, URL -lenker, bilder osv.

For å lage en musoveringsverktøytips, er det eneste som kreves å legge til en Tittelattributt. Forklart nedenfor er metoden for å legge til en tittelattributt for å lage en musoveringsverktøytip på et element:

Opprette en HTML Mouseover ToolTip

Sett først elementet, enten det. For eksempel, hvis vi setter inn et bilde ved å legge til bildeplassen som "src”:

Dette vil generere følgende utgang:

For å opprette en MouseOver ToolTip, legg til en tittelattributt inne i taggen som inneholder elementet som verktøytipen skal opprettes. Skriv en Mouseover ToolTip -setning som skal vises på musen som svever etter “tittel =”. For eksempel skriver vi "klikk her for detaljer" for å vise det mens du svever:

title = "Klikk her for detaljer">

Dette vil vise verktøytips -tittelen “Klikk her for detaljer” mens musen peker på bildet:

Dette var den enkleste metoden for å lage en HTML Mouseover Tooltip.

Konklusjon

Det er veldig enkelt å lage en musoveringsverktøy for forskjellige ikoner, bilder og lenker på grensesnittet. For å opprette en Mouseover ToolTip, er det eneste trinnet som kreves å legge til en tittelattributt i HTML -taggen som inneholder elementet som Mouseover ToolTip skal opprettes. Denne artikkelen forklarte godt hvordan du oppretter en Mouseover Tooltip.