Heim >Web-Frontend >CSS-Tutorial >So positionieren Sie Tooltips mithilfe von CSS richtig
So positionieren Sie Tooltips mithilfe von CSS richtig
- PHPznach vorne
- 2023-08-29 14:49:021037Durchsuche
Um den Tooltip richtig zu positionieren, verwenden Sie die Eigenschaften rechts, links, oben und unten.
Sehen wir uns an, wie man den Tooltip auf der rechten Seite positioniert:
Beispiel
Live-Demo
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -6px;
left: 100%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo positionieren Sie Tooltips mithilfe von CSS richtig. 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：Kann man eine Website nur mit HTML und ohne CSS erstellen?Nächster Artikel：Kann man eine Website nur mit HTML und ohne CSS erstellen?