Header Ads Widget

CSS Tooltip – An extra information provider

My codding spot June 01, 2021

 When you hover on text, icons a box appears with some text and quickly disappears when you moving mouse from that text. It is called Tooltip. 

This post will describe about CSS tooltip, it’s creation, types with examples. So let’s start. 

What is CSS Tooltip? 

A tooltip is small information, appears when user hover on an element. Tooltip guides the user about his/her activities. 

For example, when user hover an icon, tooltip displays icon name, what it includes,etc..Which you can see in many web sites. 

After getting about tooltip, now let’s create it. 

How to create Tooltip in CSS? 


To create basic tooltip follow the below steps. 

1) Create tooltip container using “<div>” element. Inside container add “<span>” element for tooltip text.
2) In container add <p> element and apply CSS styles to it. 
3) Set visibility property of <span> element to hidden and set width and background-color to create box. 
4) For hovering effect take pseudo class :hover and here set visibility property to visible. 
These are simple steps for Tooltip. In output tooltip appear at bottom-left area. 

HTML structure of tooltip
HTML structure of tooltip 




So our next step to Position tooltip and also give some CSS styles to it. 

5) To position tooltip at top : set the top property of class “.tptext” to 280px (div class=”tpcontainer” margin is 300px and padding is 10px so minus this padding value) and margin (400px) from left to center tooltip.  

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!Doctype html>
<html>
<head>
<title>basic tooltip</title>
<style>
/*tooltip container*/
.tpcontainer p{
position:relative;
background-color:mediumseagreen;
margin:300px;
padding:10px;
font-size:24pt;
text-align:center;
}
/*tooltiptext*/
.tpcontainer .tptext{
position:absolute;
visibility:hidden;
text-align:center;
margin-left:400px;
background-color:#000;
border-radius:10px;
color:#fff;
width:150px;
padding:5px;
top:280px;
}
/*tooltip appearance*/
.tpcontainer:hover .tptext{
visibility:visible;
}
</style>
</head>
<body>
<!--tooltip container-->
<div class="tpcontainer">
<p>Hover me!</p>
<!--a tooltip text-->
<span class="tptext">I'm tooltip</span>
</div>
</body>
</html>
Output:-
CSS tooltip with positioned top
Tooltip with css (at top)



6) To position tooltip at bottom: set top property of class “.tptext” to 349px(add 49px [10px of both top and bottom paddings, font height 24px and 5px of tooltip text padding]) and also set left margin to display tooltip exactly bottom of the text.(only top property will be change) 
CSS tooltip at bottom position
CSS tooltip at bottom position 

7) To position tooltip at right: set the class “.tptext” top property to 315px (10px of “.tocontainer” top padding plus 5px “.tptext “ padding.) remove margin-left property. Set right property (“.tptext “) to 250px to display tooltip text beside the hoverable text. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/*tooltiptext*/
.tpcontainer .tptext{
position:absolute;
visibility:hidden;
text-align:center;
background-color:#000;
border-radius:10px;
color:#fff;
width:150px;
padding:5px;
top:315px;
right:250px;
}
Output:-
CSS tooltip at right position
CSS tooltip at right position 

8) To position tooltip at left: set the class “.tptext” top property to 315px (10px of “.tocontainer” top padding plus 5px “.tptext “ padding.) remove margin-left property.(same as above) Set left property (“.tptext “) to 250px to display tooltip text beside the hoverable text. Remove right property. 
CSS tooltip at left position
CSS tooltip at left position 


This is the basic steps for creating tooltip. You can also add arrow at tooltip's  head, bottom, left or right. 
So let’s put arrow to tooltip. 

How to create an arrow tooltip? 

To create arrow use ::after pseudo-element and “content” property. 
Value of content property should be blank with just “”. Set position to absolute. 
Add border-width, border-color, and border-style property to set arrow. border-width property set size of an arrow. 
The border-color property is used to display arrow. In border-color property transparent color value is used. Four values specifies in border-color property , three values should be transparent and only one value have color value (red, blue,..) If all values have same color value (like red) , then it will display square instead of triangle. 

Arrow at left of tooltip 

To set arrow at left, set the right property . set pixels of top property according to border-width. See the following example. 


1
2
3
4
5
6
7
8
9
/*arrow tooltip*/
.tpcontainer .tptext::after{
position:absolute;
content:"";
border-width:10px;
border-style:solid;
border-color:transparent red transparent transparent;/*display at left*/
right:100%;/*arrow at left*/
}
Output:-
CSS tooltip with arrow at left
CSS tooltip with arrow at left 

Arrow at right of tooltip 

To display arrow at right, set the pixels of left property . top property value remain same. Look at following code. 


1
2
3
4
5
6
7
8
9
/*arrow tooltip*/
.tpcontainer .tptext::after{
position:absolute;
content:"";
border-width:10px;
border-style:solid;
border-color:transparent transparent transparent orange;/*display at right*/
left:100%;/*arrow at right*/
}
Output:-
CSS tooltip with arrow at right
CSS tooltip with arrow at right 

Arrow at top of tooltip 

To display arrow at top, set top property and margin-left property. Specify the value of margin-left in minus. Look at the following code 


1
2
3

border-color:slateblue transparent transparent transparent;/*display at bottom*/
top:30px;/*arrow at bottom*/
margin-left:-45px;
Output:-
CSS tooltip with arrow at top
CSS tooltip with arrow at top

Arrow at bottom of tooltip 

To display arrow at bottom, set bottom  property. Margin-left remain same. See in code. 


1
2
3
border-color:transparent transparent yellow transparent;/*display at top*/
top:30px;/*arrow at top*/
margin-left:-45px;
Output:-
CSS tooltip with arrow at bottom
CSS tooltip with arrow at bottom 

Tooltip with Transition effect 

You can also give transition effects to a tooltip. In this  example  transition and opacity property is used for fading effect. 
See the code. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/*tooltiptext*/
.tpcontainer .tptext{
/*tooltip animation*/
opacity:0.2;
transition:opacity 1s;
}
/*tooltip appearance*/
.tpcontainer:hover .tptext{
visibility:visible;
opacity:1;
}
Output:-

Conclusion:-

Tooltips are mostly used to give information about specific word or topic, to inform user about his actions. Some times an underline is given to specific word using border-bottom-style property. Tooltip is easy to create with setting top, margin, right, left and position property. 

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments