Heim >Web-Frontend >CSS-Tutorial >Fügen Sie mithilfe von CSS Pfeile zu Tooltips hinzu
Fügen Sie mithilfe von CSS Pfeile zu Tooltips hinzu
- 王林nach vorne
- 2023-08-25 14:57:02913Durchsuche
Mit CSS können Sie mit :after kleine Pfeile zu Tooltips hinzufügen. Auf diese Weise kann auch das Inhaltsattribut verwendet werden.
Sie können versuchen, den folgenden Code auszuführen, um Pfeile in Tooltips hinzuzufügen:
Beispiel
Live-Demo<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
bottom: 100%;
left: 60%;
margin-left: -90px;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-top: 50px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border-width: 7px;
border-style: solid;
border-color: blue transparent transparent transparent;
}
.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 vonFügen Sie mithilfe von CSS Pfeile zu Tooltips hinzu. 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：Erstellen Sie mit CSS eine Fünf-Sterne-FähigkeitsbewertungsspalteNächster Artikel：Erstellen Sie mit CSS eine Fünf-Sterne-Fähigkeitsbewertungsspalte