Tooltip: differenze tra le versioni

Versione delle 17:17, 21 apr 2022

Versione attuale delle 12:02, 5 gen 2025

(9 versioni intermedie di 7 utenti non mostrate)

Riga 1:

[[File:VisualEditor Edit tab tooltip with access key.png|framed|right|Un tooltip di un browser sopra ad un [[collegamento ipertestuale]] di [[Wikipedia]].]]

Il '''tooltip''' (letteralmente{{Lett}}: consiglio su uno strumento) è un breve messaggio a comparsa ([[popup]]), comune in diverse [[Interfaccia grafica|interfacce grafiche]], in particolare quelle che prevedono un [[mouse]] od altri [[Dispositivo di puntamento|dispositivi di puntamento]]. In genere, se un elemento prevede questa interazione, il tooltip compare quando il [[cursore]] è posizionato sull'elemento, scoparendoscomparendo nuovamente al suo allontamanentoallontanamento.<ref name="w3c-wcag21">{{Cita web

|url = https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html

|titolo = Content on Hover or Focus

Riga 22:

|lingua = en

}}

</ref> In genere, per avere un tooltip in un elemento di una pagina [[HTML]], è sufficiente modificare il tag [[HTML]] di quell'elemento ed aggiungere l'attributo <code>title</code>.<ref name="mozilla-hyperlink-title" /><ref>

{{Cita web

|url = https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute

Riga 30:

|accesso = 27 ottobre 2021

}}

</ref>

</ref><ref name="mozilla-hyperlink-title" />

== Varianti ==

Riga 61:

=== Tooltip in CSS3 ===

Esempio completo di tooltip in [[CSS3]]<ref>{{Cita web|url=https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip|titolo=Tryit Editor v3.6|sito=www.w3schools.com|lingua=en-US|accesso=2021-03-01}}</ref>:

<syntaxhighlight lang="html">

Riga 101:

=== Tooltip in JavaScript (Bootstrap) ===

Esempio completo di tooltip in [[JavaScript]] con [[Bootstrap (framework)|Bootstrap]]<ref>{{Cita web|url=https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tooltip&stacked=h|titolo=Tryit Editor v3.6|sito=www.w3schools.com|lingua=en-US|accesso=2021-03-01}}</ref>:

<syntaxhighlight lang="html">

Riga 164:

* Solo gli elementi interattivi dovrebbero attivare i tooltip

* I tooltip dovrebbero descrivere direttamente il controllo dell'interfaccia utente che li attiva (cioè non creare un controllo puramente per attivare un tooltip)

* Utilizzare <code>aria-describedby</code> o <code>aria-labelledby</code> per associare il controllo dell'interfaccia utente alla descrizione comando. Evitare <code>aria-haspopup</code> e <code>aria-live</code><syntaxhighlight lang="html">

<label for="name">Nome</label>

<input id="name" type="text" aria-describedby="name-hint">

Riga 186:

== Note ==

<references/>

== Altri progetti ==

{{interprogetto}}

== Voci correlate ==

Line 194 ⟶ 191:

* [[Dispositivo di puntamento]]

* [[HTML]]

== Altri progetti ==

{{interprogetto}}

{{Portale|informatica}}

[[Categoria:Interfacce grafiche]]