Tooltip: differenze tra le versioni

Versione delle 11:19, 27 ott 2021

Versione attuale delle 12:02, 5 gen 2025

(13 versioni intermedie di 9 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 18:

{{Cita web

|url = https://caniuse.com/mdn-html_elements_title

|titolo = HTML element: title

|accesso = 27 ottobre 2021

|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 ==

[[File:Reference Tooltips reworked - nested tooltips animation.gif|framed|right|AltriAlcuni esempi di tooltip estratti dalla gestione delle [[Fonte (storiografia)|fonti]] in Wikipedia.]]

Alcuni tooltip avanzati permettono di fissare il riquadro (che quindi rimarrà visualizzato, allo scorrere della pagina o alla chiusura del documento), agendo sulla "clip" (puntina) presente sul bordo superiore del riquadro.

Una variante molto comune, specialmente nei [[software|programmi]] più datati, è mostrare la descrizione dell'oggetto in una [[barra di stato]], ma questo tipo di descrizioni non sono chiamate di solito tooltip.

Un altro sistema che mirava a risolvere lo stesso problema, fu introdotto sui computer [[Macintosh]] dal [[System 7]], con il nome di ''[[balloon help]]''. In questo caso il testo di aiuto compariva in una [[Balloon|nuvoletta]] simile a quella utilizzata nei dialoghi dei [[fumetto|fumetti]].

Un altro termine per tooltip, utilizzato da [[Microsoft]] per la documentazione per l'utente finale, è "ScreenTip" (letteralmente: consiglio a schermo).

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 177:

* Non utilizzare un timeout per nascondere il tooltip

== Galleria d'immagini ==

<gallery>

File:Screen shot of impact module from Beta Wiki 2019-06-16.png|alt=Icona che apre un tooltip|Esempio di una icona che informa l'utente della presenza di un tooltip da poter aprire con un click.

Riga 186:

== Note ==

<references/>

== Altri progetti ==

{{interprogetto}}

== Voci correlate ==

* [[Pop-up]]

* [[Dispositivo di puntamento]]

* [[HTML]]

== Altri progetti ==

{{interprogetto}}

{{Portale|informatica}}

[[Categoria:Interfacce grafiche]]