Tooltip: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Nessun oggetto della modifica |
Etichetta: Ripristino manuale |
||
| (24 versioni intermedie di 15 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''' ({{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, scomparendo nuovamente al suo allontanamento.<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
|lingua = en
|pubblicazione = Web Content Accessibility Guidelines
|accesso = 27 ottobre 2021
}}</ref><ref name="mozilla-hyperlink-title">{{Cita web
|url = https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#adding_supporting_information_with_the_title_attribute
|titolo = Creating hyperlinks § Adding supporting information with the title attribute
|lingua = en
|accesso = 27 ottobre 2021
}}
</ref>
== Adozione ==
Uno degli ambienti che ha diffuso maggiormente il tooltip è il [[web]], soprattutto agli inizi, quando il web era principalmente accessibile tramite [[personal computer]] con un [[mouse]]. Il tooltip ha un supporto completo da tutti i principali [[browser web]] conosciuti, anche dalle loro versioni più storiche.<ref>
{{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
|titolo = title - HTML: HyperText Markup Language
|citazione = The title global attribute contains text representing advisory information related to the element it belongs to.
|lingua = en
|accesso = 27 ottobre 2021
}}
</ref>
== Varianti ==
[[File:Reference Tooltips reworked - nested tooltips animation.gif|framed|right|Alcuni 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 [[
Un altro termine per tooltip, utilizzato da [[Microsoft]] per la documentazione per l'utente finale, è "ScreenTip" (letteralmente: consiglio a schermo).
=== Tooltip in HTML ===
Esempio di tooltip in una pagina HTML:
<syntaxhighlight lang="html">
<p>Paragrafo di esempio <span title="Testo informativo">posiziona il mouse sopra</span>.</p>
</syntaxhighlight>
=== Tooltip HTML5 ===
In [[HTML5]] esiste un tooltip che si apre nativamente non al passaggio del mouse ma con un click.<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details|titolo=: The Details disclosure element - HTML: HyperText Markup Language {{!}} MDN|sito=developer.mozilla.org|accesso=2021-03-01}}</ref><ref>{{Cita web|url=https://stackoverflow.com/questions/37798967/tooltip-on-click-of-a-button|titolo=javascript - Tooltip on click of a button|sito=Stack Overflow|accesso=2021-03-01}}</ref>. Ad esempio:
<syntaxhighlight lang="html">
<details>
<summary>Dettagli</summary>
Contenuto mostrato al click
</details>
</syntaxhighlight>
=== 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|lingua=en|accesso=2021-03-01}}</ref>:
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">Posiziona in mouse qui sopra
<span class="tooltiptext">Testo del tooltip</span>
</div>
</body>
</html>
</syntaxhighlight>
=== 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|lingua=en|accesso=2021-03-01}}</ref>:
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio di tooltip con Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="#" data-toggle="tooltip" title="Hooray!">Posiziona qui il mouse</a>
</div>
<script>
$( function(){
$( '[data-toggle="tooltip"]' ).tooltip();
} );
</script>
</body>
</html>
</syntaxhighlight>
== Considerazioni ==
[[File:Tooltip-vs-text.png|alt=L'utente in questo caso non può leggere il tooltip (che sparisce quando il puntatore del mouse o il dito viene spostato) e scrivere la password contemporaneamente|centro|miniatura|480x480px|L'utente in questo caso non può leggere il tooltip (che sparisce quando il puntatore del mouse o il dito viene spostato) e scrivere la password contemporaneamente]]
Sui tooltip vengono solitamente sollevate alcune considerazioni.<ref>{{Cita web|url=https://www.trychameleon.com/blog/why-tooltips-are-terrible-and-why-you-should-use-them|titolo=Why Tooltips are Terrible and How to Better Design Them|sito=Chameleon|lingua=en|accesso=2021-03-01}}</ref><ref>{{Cita web|url=https://adamsilver.io/blog/the-problem-with-tooltips-and-what-to-do-instead/|titolo=The problem with tooltips and what to do instead – Adam Silver – Designer, London, UK.|sito=Adamsilver.io|lingua=en|accesso=2021-03-01}}</ref>.
=== Individuazione ===
Alcuni utenti potrebbero non notare il tooltip e quindi scoprire il suo contenuto anche se è evidenziato rispetto al resto del contenuto.
=== Potrebbero essere tagliati nella versione mobile della pagina ===
[[File:Tooltip-cropped.png|alt=Tooltip che termina fuori schermo su un dispositivo mobile|miniatura|290x290px|Tooltip che termina fuori schermo su un dispositivo mobile]]
Anche se la pagina web è responsiva, non è detto che lo siano anche i tooltip che contiene.
=== Oscurano lo schermo ===
Ciò significa che non è possibile in alcuni casi leggere la descrizione del tooltip e utilizzare contemporaneamente il resto dello schermo. Ad esempio non si può digitare nei campi di un form e contemporaneamente leggere le istruzioni per completarlo se sono racchiuse in un tooltip, poiché il mouse non può fare entrambe le cose contemporaneamente.
Gli utenti devono lavorare sodo per ricordare il suggerimento o passare ripetutamente da una modalità di funzionamento all'altra.
=== Non funzionano bene con il riconoscimento vocale ===
I tooltip costituiti da icone richiedono un'etichetta accessibile. Ma anche se ne hanno una, gli utenti vocali devono interpretare ciò che vedono e indovinare di cosa si tratta.
=== Rivelare il contenuto al passaggio del mouse è a volte inaccessibile ===
In primo luogo, è necessario utilizzare un mouse o un altro dispositivo di puntamento per utilizzare una descrizione comando che esclude gli utenti della tastiera e del touch screen.
In secondo luogo, lo stazionamento non è sempre un'intenzione per attivare un controllo. L'utente potrebbe spostare il cursore su un suggerimento che lo attiva accidentalmente.
In terzo luogo, richiede abilità motorie fini per funzionare. Gli utenti devono spostare con precisione il mouse sull'area interessata e tenerlo fermo per evitare di nasconderlo accidentalmente.
In quarto luogo, non è possibile per gli utenti degli schermi "lente di ingrandimento" (screen magnifier) spostare il proprio campo visivo senza nascondere la descrizione comando<ref>{{Cita web|url=https://www.youtube.com/watch?v=XYOO3VA3DZM|titolo=esempio screen magnifier}}</ref>.
Infine, gli utenti non possono selezionare o interagire con il contenuto all'interno della descrizione comando.
È possibile fornire un'esperienza paragonabile agli utenti della tastiera mostrando il tooltip in primo piano. Ma questo non è convenzionale ed esclude gli utenti [[touch screen]].
== Accessibilità ==
Ci sono alcune pratiche consigliate dalle ''[[Web Content Accessibility Guidelines]]''<ref>{{Cita web|url=https://sarahmhigley.com/writing/tooltips-in-wcag-21/|titolo=Tooltips in the time of WCAG 2.1|sito=Sarah Higley|lingua=en|accesso=2021-03-01}}</ref>:
* 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">
<div id="name-hint" aria-hidden="false">
Scrivi il tuo nome e cognome
</div>
</syntaxhighlight>
* Non utilizzare l'attributo<code>title</code> per creare una descrizione comando
* Non inserire informazioni essenziali nei tooltip
* Fornire un mezzo per chiudere il tooltip sia con la tastiera che con il puntatore
* Consentire al mouse di spostarsi facilmente sul tooltip senza chiuderlo
* 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.
File:Tooltip firefox wikipedia.png|alt=Immagine di una pagina web con testo alternativo nel tooltip|Posizionando il cursore sopra ad una immagine di una pagina web, può attivarsi il tooltip contenente il testo alternativo.
File:Uploadwizard-learnmore1.png|alt=Link all'interno di un tooltip|Alcuni tipi di tooltip possono contenere un link.
</gallery>
== Note ==
<references/>
== Voci correlate ==
* [[Pop-up]]
* [[Dispositivo di puntamento]]
* [[HTML]]
== Altri progetti ==
{{interprogetto}}
{{Portale|informatica}}
[[Categoria:Interfacce grafiche]]
| |||