CSS tooltips are excellent web tools to provide quick and simple explanations. These include additional details, word definitions, and explanations of an abbreviation or acronym.
Sometimes, they are used to give some information on how the website or application works. This helps users to better understand what they need to do. They are also useful for when a piece of text is too long. Moving part of it to a CSS tooltip could be the solution.
The great advantage is that the information does not have to be added to the main text. It only appears when the viewer moves the mouse over the corresponding part of the site.
Most designers use pure CSS to code these tooltips. Anyone that wants to use a CSS tooltip for his or her website too has come to the right place. Here is a collection of tooltips from CodePen. They are free to copy and restyle for any website.
Emerging Tooltip
The author of the first CSS tooltip is Mikael Ainalem. When hovering over an information box, the tooltip popup appears. The demo uses several different CSS techniques. These include drop shadows, SVG line animation, multiple filters, and material UI easing.
Highlight Product Features with CSS Tooltips
Ian Farb authored this beautiful CSS tooltip. The code that he used to make it is amazing. A unique div class tooltip example. Some of the tooltips are appended on top of div elements. This is great because these can be on top of any image.
Google maps radio buttons CSS only
It is very easy to use these tooltips on any website. The tooltips combine with other radio buttons too, so have a look at that collection too. Made by Elias Meire.
CSS Directional Tooltips
Designed by Chris Bracco
The <abbr> element
Gamma Stiles designed a tooltip, especially for acronyms and abbreviations. This HTML and CSS element should then contain the description of the abbreviation only. The CSS is there to style the text box even more and make it look nice. The explanation is then shown when the user moves the mouse over the abbreviation in the text.
Animated CSS Tooltips
The CSS tooltips by Markus Bruch have a custom animation added to them. There are three different animations to choose from. One is Fade, the second Expand, and the last one Swing. They are easy to add to a WordPress site. The tooltip text is defined by the HTML5 data.
CSS Grid Layout with @support flexbox fallback
Gustaf Holm made these CSS tooltips that slide down in a smoothly animated fashion. Throughout the design, the same element of bottom tooltips is maintained, which results in a uniform appearance. CSS grid layout with gradient flex boxes is the standard.
CSS ToolTip Smooth animation
Tooltips slide in from the top, side, or bottom in this CSS tooltip design by Omar Dsooky.
Cooltipz.css – Cool tooltips made from pure CSS
A data tooltip selection made using pure CSS. The design is modern and accessible and makes sure that it is user-friendly.
Automation Tooltips with Simple Data Attributes
These CSS tooltips blend in perfectly with the anchor links. Besides CSS they also make use of a small amount of JavaScript code. Still, they are too practical not to mention.
Animated SVG radio buttons
This design is about the SVG radio buttons but they also feature tooltips. It contains a double animation. The cursor changes to a question mark and the tooltip text appears.
New Zealand Visual Itinerary
This CodePen data tooltip is a beautiful example of how these can integrate into a design. Aysha Anggraini shows some details of her trip to New Zealand. She says that she made it with joy and this is obvious from this minisite. She admits that there are still some things to improve.
Tooltip animation
A simple tooltip with animation that Milan Raring coded in HTML and CSS.
Animated CSS Tooltip Concept
This pure CSS tooltip uses an animated tooltip. The hovering animation appears when hovering over the element. This one uses HTML5 data. Easy to use. Only change the tooltip text.
ToolTip [Laser Line Effect]
This data tooltip also contains a little animation of a laser line, just like the name indicates. This design by raj is especially great to show off some important information.
Button w/ tooltip
An animated and colorful button with a tooltip made by Fabrizio Cuscini.
Tooltip only CSS
This is a pure CSS tooltip by okawa-h.
Quick CSS3 tooltips (No images, no js)
The tooltip that deineko designed is also based on CSS only. A slight drawback is a dark background in combination with the translucent opacity. This combination results in difficulties with reading and text visibility. This happens mainly when the tooltip appears on top of another piece of text. Small adjustments to the CSS code will fix this.
Tooltip using just CSS + First letter CSS property
In this special design, Leandro Fialho used the first letter CSS property. In the example, the tooltip is used to show additional information or synonyms.
Friendly Little Tooltips + [Animation]
An animated pure CSS tooltip coded by Joshua Ward.
Pure css tooltip with full shadow around
A data tooltip authored by Vitalii.
Adaptive Tooltips
Another CSS tooltip for a variety of applications. Made by Vladimir.
No-JS Tool tips
These tooltips by Chris Yaxley only use CSS, so no JavaScript. There are no custom animations included, which gives a kind of old-fashioned feel.
:focus tooltip
The tooltip text folds out when clicking on the :focus input field. Made with CSS3 by Victor Pegado.
Fancy & Animated Tooltip (CSS Only)
A shiny tooltip with a modern look. Reinhard Schnetzinger made this example with an attractive starting animation.
These tooltips are easy to add. Only copy the CSS code and add it to the respective element. To ensure that it works anywhere, wrap the element in a div and attach the tooltip to the div.
Tooltips
The programmer elhombretecla made this data tooltip where the tooltip text appears to the right, left, bottom or top. Coded in pure CSS.
Animated Button with Tooltip (Pure CSS)
This tooltip makes use of the most common CSS3 properties. Aditya Bhandari designed it to work on any link or button with the class .button and the pseudo-classes :after and :before.
Super Simple CSS Tooltips
A very simple tooltip made by Ben Mildren in pure CSS.
Custom tooltip (CSS only)
These are tooltips that are especially suited for call-to-action buttons and other text links. The special element that Marc Wiethe added to this CSS tooltip is the customizable delay. There is a small lag between the tooltip hover and the appearance of the textbox.
Automation Tooltips with Simple Data Attributes
Another example of a data tooltip created by the designer Adwin.
Pure-CSS Tooltips
Pure-CSS.com made this tooltip with a slight delay. Delays are very common in the standard browser tooltips. The floating of the tooltip text is based on CSS animations. When the text appears the tooltip also changes appearances as a question mark is added. The addition of a question mark is more often used to indicate that a link is not clickable.
Guided tour tooltip
Yoann, the designer, made a guide tooltip that opens and offers more options besides the standard information.
Single Element Tooltip
The next CSS tooltip design is by Zoë Bijl. This single element tooltip is very practical for pages with a lot of text. This design works well for explanatory texts for new terms or links. It is also very practical for showing links and destinations.
Google Keep Tooltip Reproduction
This tooltip finds inspiration in Google Keep tooltips. Kyle Lavery made it to show the tooltip text in a circular reveal.
Pure CSS Tooltip
An information tooltip, which appears when hovering over the information icon. Cristina Silva coded it to work on any kind of page that needs an info-based tooltip.
CSS Tooltip Magic
Designer Envato Tuts+ made these tooltips. The appearance is clean and simple. The text appears either to the right, to the left, above, or below the tooltip element.
SVG Doughnut chart with animation and tooltip
This is a tooltip that provides more detailed information on a donut chart. Hiro made this stunning tooltip. This is not a pure CSS tooltip. It uses a small amount of JavaScript to run the donut graph effects.
Dead Simple Tooltip using Data-Description Attribute
The large tooltip text box is very practical for showing large amounts of information or for showing the text in a larger font for readability. Designed by Jesse Couch.
Write JavaScript-less, Dynamic Tooltip Text with CSS
Julie Horvath made a pure CSS tooltip with pseudo-classes and the content:”; CSS property. The button state determines the way the text changes transition.
Responsive Contact Form with Map
Made by Lentie Ward, these tooltips are particularly well-suited to show information shown in maps.
FAQs about CSS tooltips
1. What is a CSS tooltip?
When a user hovers their mouse pointer over or clicks on an element on a web page, a small pop-up window known as a CSS tooltip displays. To improve user experience and provide the item with more context, it typically displays more details or a description of the element.
2. How do you create a tooltip using CSS?
With the “title” element, you can specify the text that will appear in the tooltip and set a CSS class that includes the required tooltip styling. Then, you can target the components that need the tooltip and add the class to them using CSS selectors.
3. Can you customize the appearance of a tooltip using CSS?
Yes, you can use CSS to change how a tooltip looks. You can alter the border style, font size, text color, and background color in addition to adding animations, transitions, and shadows. To make your tooltips stand out, CSS offers a variety of innovative options.
4. How can you position a tooltip using CSS?
Setting the “position” attribute to “absolute” and entering the top, bottom, left, or right values will position a tooltip relative to its parent element. In addition, you can rotate or translate the tooltip’s position by using the “transform” parameter.
5. Is it possible to add animations to a CSS tooltip?
Yes, you may use CSS transitions or animations to add animations to a CSS tooltip. You can produce effects like spinning, sliding, bouncing, and fade-in/fade-out. The tooltips on your website can be enhanced with animations to make them more interesting and interactive.
6. Can you create a tooltip that appears on hover or click using CSS?
Sure, you can use CSS to make a tooltip that appears when you hover over it or click it. To make the tooltip visible, use the “:hover” or “:focus” pseudo-classes, and add the relevant CSS rules to display it appropriately. JavaScript can also be used to change the tooltip’s visibility based on user input.
7. How can you add HTML content to a CSS tooltip?
By using the “data-*” element to store the HTML code as a string and then retrieving and displaying it in the tooltip using JavaScript, you may add HTML content to a CSS tooltip. As an alternative, you can utilize CSS’s “attr()” function along with the “content” property to show the attribute value in the tooltip’s content.
8. Can a CSS tooltip be responsive to different screen sizes?
Yes, a CSS tooltip can adapt to changing screen widths by using media queries to change the styling and positioning of the tooltip based on the width or height of the device. In order to make the tooltip size proportional to the screen size, you may also utilize CSS units like percentages or viewport units.
9. How can you create a tooltip that works on touch devices using CSS?
CSS requires the addition of a touch event listener to enable tooltip visibility on tap or long-press in order to generate a tooltip that functions on touch devices. Also, you can modify the tooltip’s placement and size to account for the user’s finger size and avoid unintentional taps. In order to ensure optimal functionality, you should test your tooltips on a variety of touch devices.
10. What is the accessibility best practice when it comes to CSS tooltips?
The accessibility best practice for CSS tooltips is to offer an other way for users to get the material if they are unable to hover over or click on the element. This can be done either by using the “hidden” attribute to reveal or conceal the tooltip content directly on the page, or by adding a “aria-describedby” attribute to the element and referring the tooltip’s ID.
If you liked this article about CSS tooltips, you should check out this article about CSS animations on scroll.
There are also similar articles discussing CSS page transitions, CSS modals, slide menus, and CSS link hover effects.
And let’s not forget about articles on CSS hamburger menus, CSS range sliders, JavaScript menus, and CSS toggle switches.
