EN
CSS - create simple tooltip
0 points
In this article, we would like to show you how to create a simple tooltip using CSS.
1. Create a new style for tooltip class (using . selector),
2. set the tooltip to be invisible at the start using display: none;,
3. for the container (in our case div element) use the :hover pseudo-class with display: block; property inside to show up the tooltip text when you hover it.
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 100px;8
width: 100px;9
background: deepskyblue;10
}11
12
.tooltip {13
position: relative;14
height: 20px;15
width: 120px;16
left: 100px;17
top: 80px;18
background: lightgray;19
display: none; /* hide tooltip */20
}21
22
div:hover .tooltip {23
display: block; /* show tooltip */24
}25
26
</style>27
</head>28
<body>29
<div>30
<div class="tooltip">Tooltip content...</div>31
</div>32
</body>33
</html>