top

Material Design Tooltip with CSS & HTML

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">   <!-- 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 :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
  1. Home
  2. Magazine
  3. Material Design Tooltip with CSS & HTML
Normal Mode Dark Mode

Material Design Tooltip with CSS & HTML

Rahul Sagore
Blog
14th Jul, 2018
Material Design Tooltip with CSS & HTML

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: 

 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

                                                                                                  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

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

Leave a Reply

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

Top comments

name

ashish

31 October 2018 at 12:09pm
great job
name

Rodriguez James

30 November 2018 at 3:37pm
One of most trending topic and treading article.

SUBSCRIBE OUR BLOG

TRENDING BLOG POSTS

MIT’s new automated ML runs 100x faster than human Data Scientists

According to Michigan State University and MIT, automated machine learning system analyses the data and deliver a solution 100x faster than one human. The automated machine learning platform which is known as ATM (Auto Tune Models) uses cloud-based, on demand computing to accelerate data analysis. Researchers of MIT tested the system through open-ml.org, a collaborative crowdsourcing platform, on which data scientists collaborate to resolve problems. They found that ATM evaluated 47 datasets from the platform and the system was capable to deliver a solution that is better than humans. It took nearly 100 days for data scientists to deliver a solution, while it took less than a day for ATM to design a better-performing model. "There are so many options," said Ross, Franco Modigliani professor of financial economics at MIT, told MIT news. "If a data scientist chose support vector machines as a modeling technique, the question of whether she should have chosen a neural network to get better accuracy instead is always lingering in her mind." ATM searches via different techniques and tests thousands of models as well, analyses each, and offers more resources that solves the problem effectively. Then, the system exhibits its results to help researchers compare different methods. So, the system is not automating the human data scientists out of the process, Ross explained. "We hope that our system will free up experts to spend more time on data understanding, problem formulation and feature engineering," Kalyan Veeramachaneni, principal research scientist at MIT's Laboratory for Information and Decision Systems and co-author of the paper, told MIT News. Auto Tune Model is now made available for companies as an open source platform. It can operate on single machine, on-demand clusters, or local computing clusters in the cloud and can work with multiple users and multiple datasets simultaneously, MIT noted. "A small- to medium-sized data science team can set up and start producing models with just a few steps," Veeramachaneni told MIT News. Source: MIT Official Website  
Rated 4.0/5 based on 20 customer reviews
MIT’s new automated ML runs 100x faster than human Data Scientists

MIT’s new automated ML runs 100x faster than human Data Scientists

What's New

Gartner says, by 2020, 2.3 Million jobs will be created by Artificial Intelligence

On Monday, October 2, Peter Sondergaard at Gartner Symposium said that "AI will be a net job creator starting in 2020". How robots and AI will change the future of jobs is the big question now in everyone’s mind. According to Gartner, 8 million candidates are working in the IT field but, out of them only 1,250 to 1500 candidates are familiar with artificial intelligence. Simultaneously, 10% of companies are looking to hire candidates who are expert in machine learning and AI, to yield better results. Sondergaard said that by the year 2020, AI will destroy nearly 1.8 million jobs, but at the same time, it will create 2.3 million jobs. This means that AI will bring about 5,00,000 job openings globally. He also stated that "One year later, AI augmentation of the workforce will create about $3 trillion in business value, while saving billions of hours of work … so AI will help find, develop and augment your people. AI will be a net job creator starting in 2020." Gartner analyst stated that organizations should be more innovative towards bringing the hidden skills and power of existing employees to light. “Gartner predicts one in three jobs will be converted to software, robots and smart machines by 2025,” said Gartner research director Peter Sondergaard. “New digital businesses require less labor; machines will make sense of data faster than humans can.” Source: Gartner Official Blog  
Rated 4.0/5 based on 20 customer reviews
Gartner says, by 2020, 2.3 Million jobs will be created by Artificial Intelligence

Gartner says, by 2020, 2.3 Million jobs will be created by Artificial Intelligence

What's New

Iot market value will exceed 1.4 trillion USD by 2021

A recent press release from International Data Corporation (IDC), has forecast the spending on IoT market to grow cumulatively up to 16.7 percent by 2017, worldwide, and is expected to reach over 800 billion USD.By 2021, this spending is expected to reach nearly 1.4 trillion USD, led by the company's investment services, connectivity, hardware and software that enable the IoT worldwide. "The discussion about IoT has shifted away from the number of devices connected and the true value of IoT is being realised when the software and services come together to enable the capture, interpretation, and action on data produced by IoT endpoints. With our Worldwide IoT Spending Guide, IDC provides insight into key use cases where investment is being made to achieve the business value and transformation promised by the Internet of Things"- said Carrie MacGillivray, vice president, Internet of Things and Mobility at IDC. The use cases of IoT that are expected to attract the largest investment includes freight monitoring, production asset management and manufacturing, that will attract the largest investments. The smart grid technologies for gas, water, electricity and smart buildings expect to see significant investment gains in the next few years. Long tail investments in smart home technologies and in-store contextual marketing will grow exponentially over the next five years in IoT market. The IoT hardware spending will be focussed on sensors and modules that connect end-points to networks, whereas software and services spending will dominate in the spheres of content, installation and IT services. As organisations are adopting new innovative services by different marketers, a lot of threats are found.To safeguard the system from these threats, it is very important to upgrade the existing security systems to establish optimal business outcome and justify ROI. In terms of industry investments, transportation and manufacturing have been making 85 billion USD and 183 billion USD respectively. More utilities are coming together for IoT technologies, with an expected spending of around 66 billion USD.
Rated 4.0/5 based on 20 customer reviews
Iot market value will exceed 1.4 trillion USD by 2021

Iot market value will exceed 1.4 trillion USD by 2021

What's New

Follow Us On

Share on

other Blogs