Material Design Tooltip with CSS & HTML

By Rahul Sagore

Tooltips are interactive, small, and textual hints that displays informative text when the user strikes an element. In this article, we are going to see how to create a simple tooltip with pure CSS and HTML, and with no JavaScript. Tooltips are good technique to show more information about some element on hover. For example: If you use icons for menus and want to display information when user hover on the icon like shown in the image below: Demo — Material Design tooltip with CSS To get started you will need a basic HTML skeleton:index.html<!DOCTYPE html> <html> <head> <title>Material Design Tooltip</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="./style.css" rel="stylesheet"> <style> </style> </head> <body> <div class="container">  </div> </body> </html>I have added Material Icons fonts inside head tag for the Icons and Open sans font for the content. Tooltip code will go inside .container div. Now, add this HTML code for a material icon, inside container like this:<i class="material-icons" data-md-tooltip="Tooltip content">home</i>For this tooltip you don’t have to write extra html tag, we will use data-attributes to write our tooltip content. Just add this data attribute ‘data-md-tooltip’ on any element for the tooltip. Now to make our tooltip visible and style it, we will write CSS. You can add this CSS code inside style tag of the head element (Or can add this in separate .css file and link it in head tag).style.css:[data-md-tooltip] { position: relative; } [data-md-tooltip]:before { content: attr(data-md-tooltip); position: absolute; bottom: -35px; left: 50%; padding: 8px; transform: translateX(-50%) scale(0); transition: transform 0.3s ease-in-out; transform-origin: top; background: #616161e6; color: white; border-radius: 2px; font-size: 12px; font-family: Roboto,sans-serif; font-weight: 400; } [data-md-tooltip]:hover:before { transform: translateX(-50%) scale(1); }Let’s understand the above CSS code clearly.:before pseudo-element: It will add a pseudo/dummy element before the data-md-tooltip element and will put attribute’s content as text inside that. Because of this you don’t need to add extra html tag to your tooltip content. Read more about :beforePosition: The main tooltip has relative position. And “:before” pseudo element has absolute position to make the tooltip visible on top/bottom/left/right relative to the element on which we have added ‘data-md-tooltip’ attribute. Read more about css position valuesTransform: “left: 50%” and “translateX(-50%) scale(0)” will center align our tooltip. While “scale(0)” will scale it 0, means hiding it initially. Read more about transform property:Hover state: Next, we have added hover on main element, and on hover we are changing “:before” element and scaling it to 1, which will make our tooltip visible on hover. Read more about :hoverTransition: “transform 0.3s ease-in-out”, here we are adding transition on transform property, because we want to show some animation while scaling our tooltip. But, we don’t want it to display it in a blink. Here “0.3s” is time which our transition will take to scale the tooltip from 0 to 1. “ease-in-out” is timing-function for the animation speed. Read more about transition propertyTransform-Origin: Since we are transforming tooltip, this tells us from where to start the transformation of the tooltip. For example, scaling from 0 to 1:Without transform origin, scaling will start from center of the tooltip: Default transform origin — CenterWith transform-origin set to top transform-origin-topBy setting transform-origin to top it looks like the tooltip is coming out from the hovered element, which looks better than center origin. Read more about the transform-origin propertyDesign: Rest of the CSS (Background, color, fonts, border-radius) is used to make the tooltip design close to the Material design specification as much as possible.Adding tooltip positionsAbove code will show tooltip on bottom by default, to make it display it on top, left or right position, add below code. Adding classes for the respective positioning:[data-md-tooltip].md-tooltip--right:before { left: auto; right: -10px; bottom: auto; top: 50%; transform: translate(100%, -50%) scale(0); transform-origin: left center; } [data-md-tooltip].md-tooltip--right:hover:before { transform: translate(100%, -50%) scale(1); } [data-md-tooltip].md-tooltip--left:before { left: -15px; right: auto; bottom: auto; top: 50%; transform: translate(-100%, -50%) scale(0); transform-origin: right center; } [data-md-tooltip].md-tooltip--left:hover:before { transform: translate(-100%, -50%) scale(1); } .md-tooltip--top:before { top: -35px; bottom: auto; transform: translateX(-50%) scale(0); transform-origin: bottom center; }We are modifying top, left, right and bottom property to adjust the position of tooltip, and transform property to properly center align with the main element. We need to add hover state again because translate property is different for both right and left positioning of the tooltip.We have now added: md-tooltip — right, , md-tooltip — left, md-tooltip — top classes which we can add on html tag likes:<i class="material-icons md-tooltip--left" data-md-tooltip="Favorite Photos">favorite</i> <i class="material-icons md-tooltip--right" data-md-tooltip="Favorite Photos">favorite</i> <i class="material-icons md-tooltip--top" data-md-tooltip="Favorite Photos">favorite</i>Disable TooltipThere can be cases where we want to disable tooltip on the icon or the element on which the tooltip is added. We can add extra CSS to disable the tooltip:[data-md-tooltip].md-tooltip-disabled:before { display: none; } Now you can add ‘md-tooltip-disabled’ class to the HTML element by default or using javascript to disable the tooltip as required.Limitations of designing Tooltip with CSS and HTMLYou can not add HTML inside tooltip content which is also mentioned in the material design spec, that tooltip should not contain HTML tags, it should be used to show minimal information.Since we are not using javascript, we can not detect if the hovered tooltip is going outside of the screen, if the icon is really close to the border and the tooltip content is big. We can add the CSS classes at top, left, or right to fix this problem.Check this codepen link for the demo and the code: Codepen Demo: Material Design Tooltip with CSS.Happy coding!!

Rated 4.0/5 based on 14 customer reviews

Material Design Tooltip with CSS & HTML

By Rahul Sagore 14th Jul, 2018

Rahul Sagore

Blog

Category: Blog
7202 231

7202 231 14th Jul, 2018

Material Design tooltip with CSS

Demo — Material Design tooltip with CSS

To get started you will need a basic HTML skeleton:

index.html

<!DOCTYPE html>
<html>
<head>
 <title>Material Design Tooltip</title>
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="./style.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="container">
  <!-- You tooltip code will go here-->
</div>
</body>
</html>

I have added Material Icons fonts inside head tag for the Icons and Open sans font for the content. Tooltip code will go inside .container div. Now, add this HTML code for a material icon, inside container like this:

<i class="material-icons" data-md-tooltip="Tooltip content">home</i>

For this tooltip you don’t have to write extra html tag, we will use data-attributes to write our tooltip content. Just add this data attribute ‘data-md-tooltip’ on any element for the tooltip. Now to make our tooltip visible and style it, we will write CSS. You can add this CSS code inside style tag of the head element (Or can add this in separate .css file and link it in head tag).

style.css:

[data-md-tooltip] {
 position: relative;
}
[data-md-tooltip]:before {
   content: attr(data-md-tooltip);
   position: absolute;
   bottom: -35px;
   left: 50%;
   padding: 8px;
   transform: translateX(-50%) scale(0);
   transition: transform 0.3s ease-in-out;
   transform-origin: top;
   background: #616161e6;
   color: white;
   border-radius: 2px;
   font-size: 12px;
   font-family: Roboto,sans-serif;
   font-weight: 400;
}
[data-md-tooltip]:hover:before {
 transform: translateX(-50%) scale(1);
}

Let’s understand the above CSS code clearly.

:before pseudo-element: It will add a pseudo/dummy element before the data-md-tooltip element and will put attribute’s content as text inside that. Because of this you don’t need to add extra html tag to your tooltip content. Read more about :before

Position: The main tooltip has relative position. And “:before” pseudo element has absolute position to make the tooltip visible on top/bottom/left/right relative to the element on which we have added ‘data-md-tooltip’ attribute. Read more about css position values

Transform: “left: 50%” and “translateX(-50%) scale(0)” will center align our tooltip. While “scale(0)” will scale it 0, means hiding it initially. Read more about transform property

:Hover state: Next, we have added hover on main element, and on hover we are changing “:before” element and scaling it to 1, which will make our tooltip visible on hover. Read more about :hover

Transition: “transform 0.3s ease-in-out”, here we are adding transition on transform property, because we want to show some animation while scaling our tooltip. But, we don’t want it to display it in a blink. Here “0.3s” is time which our transition will take to scale the tooltip from 0 to 1. “ease-in-out” is timing-function for the animation speed. Read more about transition property

Transform-Origin: Since we are transforming tooltip, this tells us from where to start the transformation of the tooltip. For example, scaling from 0 to 1:

Without transform origin, scaling will start from center of the tooltip:

Default transform origin

Default transform origin — Center

With transform-origin set to top

transform-origin-top

By setting transform-origin to top it looks like the tooltip is coming out from the hovered element, which looks better than center origin. Read more about the transform-origin property

Design: Rest of the CSS (Background, color, fonts, border-radius) is used to make the tooltip design close to the Material design specification as much as possible.

Adding tooltip positions

Above code will show tooltip on bottom by default, to make it display it on top, left or right position, add below code. Adding classes for the respective positioning:

[data-md-tooltip].md-tooltip--right:before {
 left: auto;
 right: -10px;
 bottom: auto;
 top: 50%;
 transform: translate(100%, -50%) scale(0);
 transform-origin: left center;
}
[data-md-tooltip].md-tooltip--right:hover:before {
 transform: translate(100%, -50%) scale(1);
}
[data-md-tooltip].md-tooltip--left:before {
 left: -15px;
 right: auto;
 bottom: auto;
 top: 50%;
 transform: translate(-100%, -50%) scale(0);
 transform-origin: right center;
}
[data-md-tooltip].md-tooltip--left:hover:before {
 transform: translate(-100%, -50%) scale(1);
}
.md-tooltip--top:before {
 top: -35px;
 bottom: auto;
 transform: translateX(-50%) scale(0);
 transform-origin: bottom center;
}

We are modifying top, left, right and bottom property to adjust the position of tooltip, and transform property to properly center align with the main element. We need to add hover state again because translate property is different for both right and left positioning of the tooltip.

We have now added: md-tooltip — right, , md-tooltip — left, md-tooltip — top classes which we can add on html tag likes:

<i class="material-icons md-tooltip--left" data-md-tooltip="Favorite Photos">favorite</i>
<i class="material-icons md-tooltip--right" data-md-tooltip="Favorite Photos">favorite</i>
<i class="material-icons md-tooltip--top" data-md-tooltip="Favorite Photos">favorite</i>

Disable Tooltip

There can be cases where we want to disable tooltip on the icon or the element on which the tooltip is added. We can add extra CSS to disable the tooltip:

[data-md-tooltip].md-tooltip-disabled:before {
 display: none;
}

Now you can add ‘md-tooltip-disabled’ class to the HTML element by default or using javascript to disable the tooltip as required.

Limitations of designing Tooltip with CSS and HTML

You can not add HTML inside tooltip content which is also mentioned in the material design spec, that tooltip should not contain HTML tags, it should be used to show minimal information.
Since we are not using javascript, we can not detect if the hovered tooltip is going outside of the screen, if the icon is really close to the border and the tooltip content is big. We can add the CSS classes at top, left, or right to fix this problem.

Check this codepen link for the demo and the code: Codepen Demo: Material Design Tooltip with CSS.

Happy coding!!

Rahul Sagore

Author

I am a Frontend Engineer @BrowserStack. Love to code in javascript. Having 3+ years of experience, worked on React.js/Angular.js, ES6, Ruby on Rails, Python, Node.js.

Website : https://github.com/Rahul-Sagore

Your email address will not be published. Required fields are marked *

Comment*

Name*

E-mail*

Top comments

ashish

31 October 2018 at 12:09pm

great job