Tooltip: differenze tra le versioni

Versione delle 15:55, 25 ago 2021

Versione delle 11:19, 27 ott 2021

Riga 1:

[[File:HTMLVisualEditor Edit tab tooltip with access key.png|framed|right|Un tooltip di un web browser chesopra mostraad un [[hyperlinkcollegamento ipertestuale]] di [[Wikipedia]].]]

Il '''tooltip''' (letteralmente: consiglio su uno strumento) è un breve messaggio a comparsa ([[popup]]), comune elementoin diverse dell'[[interfacciaInterfaccia grafica|interfacciainterfacce grafica dell'utentegrafiche]]., Èin attivatoparticolare dalquelle che prevedono un [[cursoremouse]], diod solitoaltri il[[Dispositivo puntatoredi delpuntamento|dispositivi [[mousedi puntamento]]. PassandoIn ilgenere, cursore soprase un oggetto,elemento senzaprevede cliccarloquesta interazione, siil producetooltip l'aperturacompare diquando unil piccolo[[cursore]] "box"è conposizionato informazionisull'elemento, supplementariscoparendo riguardonuovamente all'oggettoal stessosuo allontamanento.<ref name="w3c-wcag21">{{Cita web

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

Il riquadro con le informazioni di dettaglio dovrebbe essere riportato vicino all'oggetto dove per il quale si vuole evidenziare maggiori informazioni. Un ulteriore approccio è svincolare la posizione del messaggio dall'oggetto dove viene applicato il mouseover.

|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

}}

</divref>

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

{{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><ref name="mozilla-hyperlink-title" />

== Varianti ==

[[File:Reference Tooltips reworked - nested tooltips animation.gif|framed|right|Altri esempi di tooltip.]]

Alcuni tooltip avanzati permettono di fissare il boxriquadro (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.

Line 12 ⟶ 42:

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

=== Tooltip "onclick"in HTML ===

Esistono anche tooltip che si aprono non "onmouseover" (al passaggio del mouse) ma con un click (onlclick). Si può fare con JS o HTML5<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">

<h3>Esempio di tooltip</h3> in una pagina HTML:

<syntaxhighlight lang="html">

<p>Paragrafo di esempio <span title="Testo informativo">posiziona il mouse sopra</span>.</p>

</syntaxhighlight>

=== Tooltip HTML5 ===

EsistonoIn anche[[HTML5]] esiste un tooltip che si apronoapre nonnativamente "onmouseover"non (al passaggio del mouse) ma con un click (onlclick). Si può fare con JS o HTML5<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">

<syntaxhighlight lang="html">

<details>

<summary>Dettagli</summary>

Line 20 ⟶ 60:

</syntaxhighlight>

=== EsempiTooltip nelin webCSS3 ===

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

<!DOCTYPE html>

<html>

<head>

<style>

.tooltip {

Line 37 ⟶ 80:

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

Line 47 ⟶ 89:

}

</style>

</head>

<body style="text-align:center;">

<body>

<p>Posiziona in mouse qui sotto:</p>

<div class="tooltip">Posiziona in mouse qui sopra

Line 57 ⟶ 98:

</body>

</html>

</syntaxhighlight>

</syntaxhighlight>Esempio di tooltip in JS e [[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">

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

</syntaxhighlight>Esempio completo di tooltip in JS[[JavaScript]] econ [[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">

<syntaxhighlight lang="html">

<!DOCTYPE html>

<html lang="it">

Line 69 ⟶ 115:

</head>

<body>

<div class="container">

<a href="#" data-toggle="tooltip" title="Hooray!">Posiziona qui il mouse</a>

<div class="container">

</div>

<h3>Esempio di tooltip</h3>

<script>

<a href="#" data-toggle="tooltip" title="Hooray!">Posiziona qui il mouse</a>

$( function(){

</div>

$( '[data-toggle="tooltip"]' ).tooltip();

} );

<script>

</script>

$(document).ready(function(){

$('[data-toggle="tooltip"]').tooltip();

});

</script>

</body>

</html>

</syntaxhighlight>

== CriticheConsiderazioni ==

[[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]]

AiSui tooltip vengono mossesolitamente sollevate alcune criticheconsiderazioni.<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 ===

=== A volte sono difficili da individuare ===

Alcuni utenti potrebbero non noterannonotare il tooltip e quindi scoprire il suo contenuto anche se è evidenziato rispetto al resto del contenuto, il che significa che c'è un alto rischio che non vedranno mai il contenuto che contiene.

=== Potrebbero essere tagliati nella versione mobile della pagina ===

Line 118 ⟶ 160:

== Accessibilità ==

Ci sono alcune pratiche consigliate dalle regole ''[[Web Content Accessibility Guidelines|WCAG]]''<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

Line 135 ⟶ 177:

* Non utilizzare un timeout per nascondere il tooltip

== EsempiGalleria ==

<gallery>

File:Screen shot of impact module from Beta Wiki 2019-06-16.png|alt=EsempioIcona diche apre un tooltip|Esempio sudi ununa icona. Deveche essereinforma molto chiaro alll'utente chedella quest'ultima contiene un'informazione.|Esempiopresenza di un tooltip suda unpoter icona.aprire Devecon essereun molto chiaro all'utente che quest'ultima contiene un'informazioneclick.

File:Tooltip firefox wikipedia.png|alt=IlImmagine testodi deluna tagpagina ALTweb contenutocon neltesto tagalternativo HTMLnel <img> viene visualizzato quandotooltip|Posizionando il puntatore passacursore sopra l'immagine|Ilad testouna delimmagine tagdi ALTuna contenutopagina nelweb, tagpuò HTMLattivarsi <img>il vienetooltip visualizzato quandocontenente il puntatoretesto passa sopra l'immaginealternativo.

File:Uploadwizard-learnmore1.png|alt=Un linkLink all'interno di un tooltip|UnAlcuni link all'internotipi di tooltip possono contenere un tooltiplink.

</gallery>

== Note ==

<references/>

== Altri progetti ==

{{interprogetto}}

== Voci correlate ==

{{portale|informatica}}

* [[Dispositivo di puntamento]]

* [[HTML]]

{{portalePortale|informatica}}

[[Categoria:Interfacce grafiche]]