Tooltips in CSS basically provide a great way to display extra information about anything when the user moves the mouse cursor over an element and then it displays the information that was provided at the time of development.
Things to Know When Using a Tooltip Plugin
- If you’re building JavaScript from the source, your system requires util.js for building projects.
- Tooltips are totally dependent on the 3rd party library Popper.js for positioning the information. You must include the popper.min.js file before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js, which contains Popper.js in order to work tooltips efficiently.
- You need to initialize tooltips as tooltips are opt-in for performance reasons, and it will also help them to work seamlessly.
- Tooltips with zero-length titles in CSS are never displayed in any systems.
- Specify container: 'body' to avoid any rendering problems that can come up in more complex components (like our input groups, button groups, tables, checkbox, etc.).
- Triggering tooltips does not work on hidden elements in CSS.
- Tooltips that are essentially made for .disabled or disabled elements must be triggered on a wrapper element at the time of development.
- When triggered from hyperlinks in a particular project that span multiple lines, tooltips will be centered in CSS. Use white-space: nowrap; on your <a>s to avoid this behavior.
- Tooltips must be hidden in the system before their corresponding elements have been removed from the DOM so that it would not create any issue while building the software.
Basic Tooltip Example
Create a tooltip for the developer that appears when the user moves the mouse over an element on the web page:
|
<style> /* Tooltip container */ .tooltip { position: Static; display: inline-block; border-bottom: 3px solid blue; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 150px; background-color: charcoal; color: #fff; text-align: center; padding: 6px 0; border-radius: 7px; /* Position the tooltip text - see examples given below! */ position: absolute; z-index: 2; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext { visibility: visible; } </style> <div class="tooltip">Hover over me to see the effects <span class="tooltiptext">Tooltip text</span> </div> |
Example Explained:
HTML: Here, we are using a container element (like <div>) and adding the "tooltip" class to it. When the user puts mouse cursor over this <div>, it will show the tooltip text on the web page.
The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext" of the program.
CSS: The tooltip class use position:relative, which is needed to position the tooltip text (position:absolute).
[Note: See examples below on how to position the tooltip.]
The tooltip text class holds the actual tooltip text. It is hidden by default in the tooltip class and will be visible on hovering on the particular element (see below). We have also added some basic styles to it: 150px width, charcoal background color, white text color, centered text, and 6px top and bottom padding.
The CSS border-radius property is used to add rounded corners to the tooltip text. Border radius is also assigned to 7px in the program provided above.
The :hover selector is used for indicating the tooltip text when the user moves the mouse over the element in the CSS file of the web page.<div> with class="tooltip".
Positioning Tooltips
There are some tooltips that are responsible for the positioning of the tooltip. These provide the feature of maintaining the position of Tooltips. For displaying the elements with the help of tooltips, we have mainly four ways:
- Top of the element
- Left side of the element
- Right side of the element
- Bottom of the element
-
Top Tooltip
This tooltip is responsible for displaying the information on top side of the element. The top tooltip specifies that if you move or hover your mouse cursor over any element, then the tooltip information will be displayed on the top of the element of the web page.
The example provided below demonstrates the implementation of top tooltip in a CSS file:
|
<!DOCTYPE html> <html> <style> .tooltip { position: static; display: inline; border-bottom: 2px dotted blue; } .tooltip .tooltiptext { visibility: hidden; width: 110px; background-color: yellow; color: #fff; text-align: center; border-radius: 7px; padding: 4px 0; position: fixed; z-index: 1; bottom: 100%; left: 70%; margin-left: -50px; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Top Tooltip Example</h2> <p>Move your mouse cursor over the below heading</p> <div class="tooltip"><strong> Welcome to Simplilearn</strong> <span class="tooltiptext">A solution of all your technology needs.</span> </div> </body> </html> |
-
Bottom Tooltip:
This tooltip is responsible for displaying the information on the bottom side of the element. The top tooltip specifies that if you move or hover your mouse cursor over any element, then the tooltip information will be displayed on the bottom of the element of the web page.
The example provided below demonstrates the implementation of bottom tooltip in a CSS file:
|
<!DOCTYPE html> <html> <style> .tooltip { position: static; display: block; border-bottom: 2px solid blue; } .tooltip .tooltiptext { visibility: hidden; width: 110px; background-color: yellow; color: #fff; text-align: center; border-radius: 5px; padding: 7px 0; Position: fixed; z-index: 1; top: 100%; left: 70%; margin-left: -50px; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Bottom Tooltip Example</h2> <p>Move your mouse cursor over the below heading</p> <div class="tooltip"><strong> Welcome to Simplilearn</strong> <span class="tooltiptext">A solution of all your technology needs.</span> </div> </body> </html> |
-
Left Tooltip:
This tooltip is responsible for displaying the information on the left side of the element. The top tooltip specifies that if you move or hover your mouse cursor over any element, then the tooltip information will be displayed on the left side of the element of the web page.
The example provided below demonstrates the implementation of left tooltip in a CSS file:
|
<!DOCTYPE html> <html> <style> .tooltip { position: absolute; display: block; border-bottom: 2px solid blue; } .tooltip .tooltiptext { visibility: hidden; width: 110px; background-color: yellow; color: #fff; text-align: center; border-radius: 7px; padding: 4px 0; position: fixed; z-index: 1; top: -6px; right: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Left Tooltip Example</h2> <p>Move your mouse cursor over the below heading</p> <div class="tooltip"><strong> Welcome to Simplilearn</strong> <span class="tooltiptext">A solution of all your technology needs.</span> </div> </body> </html> |
-
Right Tooltip:
This tooltip is responsible for displaying the information on the right side of the element. The top tooltip specifies that if you move or hover your mouse cursor over any element, then the tooltip information will be displayed on the right side of the element of the web page.
An example provided below demonstrates the implementation of right tooltip in a CSS file:
|
<!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; border-bottom: 3px dotted blue; } .tooltip .tooltiptext { visibility: hidden; width: 110px; background-color: yellow; color: #fff; text-align: center; border-radius: 7px; padding: 4px 0; position: fixed; z-index: 1; top: -6px; left: 105%; } .tooltip:hover .tooltiptext { visibility: visible; } </style> <body style="text-align:center;"> <h2>Right Tooltip Example</h2> <p>Move your mouse cursor over the below heading</p> <div class="tooltip"><strong> Welcome to Simplilearn</strong> <span class="tooltiptext">A solution of all your technology needs.</span> </div> </body> </html> |
Methods
All the API methods are asynchronous in CSS Toolkit, and it normally starts a transition on the web page. They return to the caller of the system as soon as the transition process is started but before it ends the program.
$().tooltip(options)
It is mainly responsible for attaching a tooltip handler to an element collection in the CSS tooltip.
.tooltip('show')
It indicates an element’s tooltip in the CSS program. It returns to the caller before the tooltip has actually been displayed (i.e., before the shown.bs.tooltip event appears). This method is considered as a “manual” triggering of the tooltip. Tooltips that have zero length are never displayed on the web page from the CSS file.
|
$('#element').tooltip('show') |
.tooltip('hide')
Hides are also one of the element’s tooltips. It returns to the caller before the tooltip has actually been hidden(i.e., before the hidden.bs.tooltip event occurs). This method is considered as a “manual” triggering of the tooltip.
|
$('#element').tooltip('hide') |
.tooltip('toggle')
Toggles are an element’s tooltip in CSS. It returns to the caller before the tooltip has actually been shown or hidden (i.e., before the shown.bs.tooltip or hidden.bs.tooltip event occurs). This method is considered as a “manual” triggering of the tooltip.
|
$('#element').tooltip('toggle') |
.tooltip('dispose')
It is responsible for hiding and destroying an element’s tooltip. Tooltips that use delegation (which are created using the selector option) could not be individually destroyed on descendant trigger elements in CSS tooltips.
|
$('#element').tooltip('dispose') |
.tooltip('enable')
It provides an element’s tooltip the ability to be displayed. Tooltips are enabled by default in this method.
|
$('#element').tooltip('enable') |
.tooltip('toggleEnabled')
This tooltip toggles the ability for an element’s tooltip to be shown or hidden.
|
$('#element').tooltip('toggleEnabled') |
.tooltip('update')
It is responsible for updating the position of an element’s tooltip in web page.
|
$('#element').tooltip('update') |
Events
There are many events in tooltips that play a major role in implementing various functionalities of CSS tooltips.
show.bs.tooltip
This event in CSS tooltips helps to fire immediately when the show instance method is called.
shown.bs.tooltip
It is an event that is normally fired when the tooltip has been made visible to the user (It will wait for CSS transitions to complete the process in the web page).
hide.bs.tooltip
This event can be considered as an event that is fired immediately when the hide instance method has been called for implementation.
hidden.bs.tooltip
This event is called when the tooltip has ended up being hidden from the user. (It will also wait for CSS transitions to complete the process first.)
inserted.bs.tooltip
This event is normally called after the show.bs.tooltip event when the tooltip template has been counted to the DOM.
Tooltip Arrows
To create a Tooltip arrow that would appear from a typical side of the tooltip, we need to add "empty" content after the tooltip, with the pseudo-element class ::after together with the content property of the program. The arrow in the program is created using borders. This will construct the tooltip to look like a speech bubble.
-
Bottom Arrow
The example provided below demonstrates how to add an arrow to the bottom of the CSS tooltip:
|
.tooltip .tooltiptext::after { content: " "; position: relative; top: 100%; /* At the bottom of the tooltip */ left: 40%; margin-left: -4px; border-width: 4px; border-style: dotted; border-color: blue transparent transparent transparent; } |
-
Top Arrow
The example provided below demonstrates how to add an arrow to the top of the CSS tooltip:
|
.tooltip .tooltiptext::after { content: " "; position: relative; bottom: 100%; /* At the top of the tooltip */ left: 40%; margin-left: -4px; border-width: 4px; border-style: dotted; border-color: transparent transparent blue transparent; } |
-
Left Arrow:
The example provided below demonstrates how to add an arrow to the left of the CSS tooltip:
|
.tooltip .tooltiptext::after { content: " "; position: relative; top: 40%; right: 100%; /* To the left of the tooltip */ margin-top: -4px; border-width: 4px; border-style: dotted; border-color: transparent blue transparent transparent; } |
-
Right Arrow:
The example provided below demonstrates how to add an arrow to the left of the CSS tooltip:
|
.tooltip .tooltiptext::after { content: " "; position: relative; top: 40%; left: 100%; /* To the right of the tooltip */ margin-top: -4px; border-width: 4px; border-style: dotted; border-color: transparent transparent transparent blue; } |
Fade in Tooltips (Animation)
This is a type of tooltip that really helps in fading out the tooltips at the time of visibility. If you want to fade in the tooltip text on your web page when it is about to be visible, then you need to use the CSS transition property together with the opacity property and go from being totally invisible to 100% visible in a number of fixed seconds (in our example it is 2s).
Example:
|
.tooltip .tooltiptext { opacity: 0; transition: opacity 2s; } .tooltip:hover .tooltiptext { opacity: 1; } |
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
Tooltip is a really useful feature in CSS which helps to display the information when we move or hover the cursor over an element in a web page. In this article on Tooltip, we covered the introduction of Tooltip with examples and learned how we can use it in software development. We studied about Position tooltip and its types with code. We also discussed the Arrow tooltip and their four types and all the events and methods in CSS tooltips with the required source code.
To know more about CSS Tooltips, you can enroll in the Post-Graduate Program in Full-Stack Web Development offered by Simplilearn in collaboration with Caltech CTME. This Web Development course is a descriptive online bootcamp that includes 25 projects, a capstone project, and interactive online classes. In addition to CSS Tooltip, the course also details everything you need to become a full-stack technologist and accelerate your career as a software developer.
Simplilearn also offers free online skill-up courses in several domains, from data science and business analytics to software development, AI, and machine learning. You can take up any of these free courses to upgrade your skills and advance your career.