Heim >Web-Frontend >CSS-Tutorial >Erstellen Sie Tooltips mit CSS
Erstellen Sie Tooltips mit CSS
- 王林nach vorne
- 2023-08-27 22:37:02615Durchsuche
Tooltips werden angezeigt, wenn der Benutzer den Mauszeiger über den Text bewegt. Sie können dort Informationen hinzufügen, um den Benutzern das Verständnis zu erleichtern.
Beispiel
Sie können versuchen, den folgenden Code auszuführen, um zu sehen, wie Sie einen Tooltip erstellen –
Live-Demo<!DOCTYPE html>
<html>
<style>
#mytooltip #mytext {
visibility: hidden;
width: 100px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 3px;
padding: 10px 0;
position: absolute;
z-index: 1;
}
#mytooltip:hover #mytext {
visibility: visible;
}
</style>
<body>
<div id = "mytooltip">Hover the mouse over me
<p id = "mytext">My Tooltip text</p>
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonErstellen Sie Tooltips mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Top 10 Tailwind CSS-PluginsNächster Artikel：Top 10 Tailwind CSS-Plugins