Tooltip: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
mNessun oggetto della modifica |
Aggiornamento della voce |
||
Riga 1:
[[File:HTML tooltip.png|framed|right|Un tooltip di un web browser che mostra un [[hyperlink]].]]
Il '''tooltip''' (letteralmente: consiglio su uno strumento) è un comune elemento dell'[[interfaccia grafica|interfaccia grafica dell'utente]]. È attivato dal [[cursore]], di solito il puntatore del [[mouse]]. Passando il cursore sopra un oggetto, senza cliccarlo, si produce l'apertura di un piccolo "box" con informazioni supplementari riguardo l'oggetto stesso.
Line 10 ⟶ 9:
Un altro termine per tooltip, utilizzato da [[Microsoft]] per la documentazione per l'utente finale, è "ScreenTip" (letteralmente: consiglio a schermo).
== Esempio ==
Esempio 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>
<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;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<p>Posiziona in mouse qui sotto:</p>
<div class="tooltip">Posiziona in mouse qui sopra
<span class="tooltiptext">Testo del tooltip</span>
</div>
</body>
</html>
</syntaxhighlight>Esempio di tooltip in JS e [[Bootstrap]]:<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<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">
<h3>Tooltip Example</h3>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
</syntaxhighlight>
== Altri progetti ==
| |||