Create tooltip by using CSS

CSS Positioning

In this article, we are going to create a tool tip. A tool tip composed by simply a rectangle and a triangle.

What we want to do is when the user mouse over the orange box. the tooltip with appear.

Photo by Joan Tran on Unsplash

Create orange box

At index.html, create a div with class name is

<div class="box" tooltip="This is tooltip"></div>

Create a box by using the following CSS rules.

.box{
width: 50px;
height: 50px;
background-color: orange;
position: relative;
}

Create the green yellow rectangle

We create the green yellow box with position absolute, get the content from the attribute “tooltip”. Set the height to 25px and width is max-content. Set the background color as greenyellow.

.box::before{
position: absolute;
content: attr(tooltip);
height: 25px;
width:max-content;
background:greenyellow;
}

Create a light blue triangle