A Tooltip is used to provide interactive textual hints that gives the user an idea about the element when mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when user hovers over it, the additional information “A computer Science Portal” pops-up.
Positions of Tooltip: Depending on the values set to top, bottom, left and right, Tooltip can be positioned at any degree. There are mainly four position which are widely used while building Tooltips for better representation and for good user experience:
-
Right Tooltip: The Left and Top property of CSS are used to place the tooltip right to the hoverable text. The value of Left should be to set (100+x)% to make it appear to the right of the container element (if x=0 then tooltip will touch the hoverable text) and the value of top should be set to (0+y)% to adjust the distance from top of the container element.
Below program illustrate the above approach:
<!DOCTYPE html><html><head><title>tooltip in CSS</title><style>.gfg_tooltip {position: relative;display: inline-block;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;min-width:100px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 25%;left: 105%;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
-
Left Tooltip: The Right and Top properties of CSS are used to place the tooltip left to the hoverable text. The value of Right should be to set (100+x)% to make it appear to the left of the container element (if x=0 then tooltip will touch the hoverable text) and the value of top should be set to (0+y)% to adjust the distance from top end of the container element.
Below program illustrate the above approach:
<!DOCTYPE html><html><head><title>tooltip in CSS</title><style>.gfg_tooltip {position: relative;display: inline-block;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 25%;right: 105%;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
-
Top Tooltip: The Bottom and Left properties of CSS are used to place the tooltip top to the hoverable text. The value of Bottom should be to set (100+x)% to make it appear to the top of the container element (if x=0 then tooltip will touch the hoverable text) and the value of left should be set to (0+y)% to adjust the distance from left end of the container element.
Below programs illustrate the above approach:
<!DOCTYPE html><html><head><style>.gfg_tooltip {position: relative;display: inline-block;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;bottom: 105%;left: 10%;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
-
Bottom Tooltip: The Top and Left properties of CSS are used to place the tooltip bottom to the hoverable text. The value of Top should be to set (100+x)% to make it appear to the bottom of the container element (if x=0 then tooltip will touch the hoverable text) and the value of left should be set to (0+y)% to adjust the distance from left end of the container element.
Below program illustrate the above approach:
<!DOCTYPE html><html><head><style>.gfg_tooltip {position: relative;display: inline-block;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 105%;left: 10%;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
Tooltip Arrows
In the above four examples the tooltip generated does not point using arrow, so to make the tooltip look like an speech bubble, add “empty” content after tooltip, with the pseudo element class ::after together with the content property. Like earlier, here also depending on the values of top, bottom, left and right the arrow can be created such that it appears on specific side of the tooltip.
-
Bottom Arrow: Top and Left are used to place the arrow at the bottom of the tooltip. The value of Top should be to set (100+x)% to make it appear to the bottom of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of left should be set to (0+y)% to adjust the distance from left end of the tooltip (if y=50 then arrow will be in the middle of tooltip).
Program:
<!DOCTYPE html><html><head><style>.gfg_tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;bottom: 115%;left: 50%;margin-left: -60px;}.gfg_tooltip .gfg_text::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: black transparent transparenttransparent;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><br><br><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
-
Top Arrow: Bottom and Left are used to place the arrow at the top of the tooltip. The value of Bottom should be to set (100+x)% to make it appear to the top of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of left should be set to (0+y)% to adjust the distance from left end of the tooltip (if y=50 then arrow will be in the middle of tooltip).
Program:
<!DOCTYPE html><html><head><style>.gfg_tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 115%;left: 50%;margin-left: -60px;}.gfg_tooltip .gfg_text::after {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent blacktransparent;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><br><br><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
-
Left Arrow: Top and Right are used to place the arrow at the left of the tooltip. The value of Right should be to set (100+x)% to make it appear to the left of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of top should be set to (0+y)% to adjust the distance from top end of the tooltip (if y=50 then arrow will be in the middle of tooltip).
Program:
<!DOCTYPE html><html><head><style>.gfg_tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 5%;left: 115%;}.gfg_tooltip .gfg_text::after {content: "";position: absolute;top: 50%;right: 100%;margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent black transparenttransparent;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><br><br><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output:
-
Right Arrow: Top and Left are used to place the arrow at the right of the tooltip. The value of Left should be to set (100+x)% to make it appear to the right of the tooltip (if x=0 then the arrow will touch the tooltip) and the value of top should be set to (0+y)% to adjust the distance from top end of the tooltip (if y=50 then arrow will be in the middle of tooltip).
Program:
<!DOCTYPE html><html><head><style>.gfg_tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;background-color: green;color: black;padding: 15px;text-align: center;display: inline-block;font-size: 16px;}.gfg_tooltip .gfg_text {visibility: hidden;width: 120px;background-color: green;color: black;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: 5%;right: 115%;}.gfg_tooltip .gfg_text::after {content: "";position: absolute;top: 50%;left: 100%;margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent transparent black;}.gfg_tooltip:hover .gfg_text {visibility: visible;}</style></head><bodystyle="text-align:center;"><br><br><buttonclass="gfg_tooltip">GeeksforGeeks<spanclass="gfg_text">A Computer science portal</span></button></body></html>Output: