Heim > Artikel > Web-Frontend > Verwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen
Verwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen
- WBOYnach vorne
- 2023-09-08 21:41:06929Durchsuche
Verwenden Sie die top CSS-Eigenschaft, um unten im Tooltip einen Pfeil hinzuzufügen.
Beispiel
Sie können versuchen, den folgenden Code auszuführen, um einen Tooltip mit einem unteren Pfeil hinzuzufügen:
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 vonVerwenden Sie CSS, um den Pfeil auf den unteren Rand der QuickInfo zu zeigen. 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：Wie definiere ich die Form einer animierbaren Ecke mithilfe von CSS?Nächster Artikel：Wie definiere ich die Form einer animierbaren Ecke mithilfe von CSS?