Heim >Web-Frontend >CSS-Tutorial >Legen Sie den linken Tooltip mit CSS fest
Legen Sie den linken Tooltip mit CSS fest
- PHPznach vorne
- 2023-09-07 15:29:06939Durchsuche
Um den linken Tooltip festzulegen, verwenden Sie die CSS-Eigenschaft right .
Sie können versuchen, den folgenden Code auszuführen, um den linken Tooltip auf Text zu setzen:
Beispiel
Live-Demo
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: orange;
color: white;
z-index: 1;
top: -6px;
right: 100%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.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 linken 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：Wie wähle ich mit CSS Elemente aus, deren Attributwert ein bestimmtes Wort enthält?Nächster Artikel：Wie wähle ich mit CSS Elemente aus, deren Attributwert ein bestimmtes Wort enthält?