CSS Tooltips

CSS Tooltips

In this video, I show you how to create An Animated CSS Tooltip with nice animations and transition effects!

What is a CSS Tooltip?

A CSS tooltip gives additional information about something on hover over an element. For example, explaining a word in a context and so on.


HTML Code

  1. For HTML we have the main div or container with a class of .tooltip
    2. Then inside of it we have the text Earth. Which will act as a placeholder for hovering.
    3. Inside the same div.tooltip we have a span with class of .tooltiptext which holds the value of Our planet.
<div class="tooltip">
  Earth 
  <span class="tooltiptext">Our planet</span>
</div>

CSS Code

For CSS I Recommend you watch the video for the explanation.

@import url('https://fonts.googleapis.com/css2?family=Glory:wght@100&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Glory', sans-serif;
}
/* 1 */
.tooltip {
  display: inline-block;
  position: relative;
  border-bottom: 1px dotted #333;
  font-size: 25px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /*position */
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 125%;
  transition: 0.3s;
  transform: rotate(60deg) scale(0.1);
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  transform: rotate(0deg) scale(1);
}




.tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}




About the author

Leave a Reply

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