Heim > Artikel > Web-Frontend > Legen Sie den oberen Tooltip mit CSS fest
Legen Sie den oberen Tooltip mit CSS fest
- 王林nach vorne
- 2023-09-13 12:01:02950Durchsuche
Um den oberen Tooltip festzulegen, verwenden Sie die CSS-Eigenschaft bottom.
Sie können versuchen, den folgenden Code auszuführen, um den oberen Tooltip auf Text zu setzen:
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: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 vonLegen Sie den oberen Tooltip mit CSS fest. 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：Animationseffekte in CSSNächster Artikel：Animationseffekte in CSS