CSS Tutorial

Create a CSS Tooltip that appears when the user moves the mouse pointer on an element; that means the tooltip will show when the mouse over on an element let's see the below-mentioned example for more understanding:

CSS Tooltip Used

Simple CSS Tooltip
Positioning Tooltip
Tooltip Arrows
Animation Tooltip

Simple CSS Tooltips

Just add a simple CSS tooltip into your web page OR an element; it will show when the user moves the mouse over an element:

Example of Simple Tooltip

#tooltip_class {
     psition: relative;
     display: inline-block;
  }
#tooltip_class .tooltip_text {
     visibility: hidden;
     bacground-color: #808080;
     color: #fff;
     text-align: center;
     padding: 5px;
     position: absolute;
     z-index: 1;
  }
#tooltip_class:hover .tooltip_text {
     visibility: visible;
  }

<html>
<body>
    <div id="tooltip_class">HTML
        <span class="tooltip_text">Hyper Text Markup Language</span>
    </div>
</body>
</html>

Output

Positioning Tooltip

The CSS tooltip positioning of an elements are divided into four sections like Top Tooltip, Right Tooltip, Bottom Tooltip, and Left Tooltip:

Example of Positioning Tooltip

/* Top Tooltip Example */
#tooltip_top .tooltip_text {
     visibility: hidden;
     bacground-color: #ff6a00;
     color: #fff;
     text-align: center;
     padding: 5px;
     position: absolute;
     z-index: 1;
     bottom: 100%;
     left: 50%;
     margin-left: -60px;
  }
#tooltip_top:hover .tooltip_text {
     visibility: visible;
  }

<html>
<body>
    <div id="tooltip_top">HTML
        <span class="tooltip_text">Hyper Text Markup Language</span>
    </div>
</body>
</html>

Output

HTML Hyper Text Markup Language

/* Right Tooltip Example */
#tooltip_right .tooltip_text {
     visibility: hidden;
     bacground-color: #ff6a00;
     color: #fff;
     text-align: center;
     padding: 5px;
     position: absolute;
     z-index: 1;
     top: -5px;
     left: 105%;
  }

<html>
<body>
    <div id="tooltip_right">HTML
        <span class="tooltip_text">Hyper Text Markup Language</span>
    </div>
</body>
</html>

Output

HTML Hyper Text Markup Language

/* Bottom Tooltip Example */
#tooltip_bottom .tooltip_text {
     visibility: hidden;
     bacground-color: #ff6a00;
     color: #fff;
     text-align: center;
     padding: 5px;
     position: absolute;
     z-index: 1;
     top: 100%;
     left: 50%;
     margin-left: -60px;
  }

<html>
<body>
    <div id="tooltip_bottom">HTML
        <span class="tooltip_text">Hyper Text Markup Language</span>
    </div>
</body>
</html>

Output

HTML Hyper Text Markup Language

/* Left Tooltip Example */
#tooltip_left .tooltip_text {
     visibility: hidden;
     bacground-color: #ff6a00;
     color: #fff;
     text-align: center;
     padding: 5px;
     position: absolute;
     z-index: 1;
     top: -5px;
     right: 105%;
  }

<html>
<body>
    <div id="tooltip_left">HTML
        <span class="tooltip_text">Hyper Text Markup Language</span>
    </div>
</body>
</html>

Output

HTML Hyper Text Markup Language

Tooltip Arrows

Tooltip arrows is created by using borders; it should appear from a specific side of the tooltip:

Examples of Tooltip Arrows

#tooltip_arrow .tooltip_text {
     visibility: hidden;
     bacground-color: #ff6a00;
     min-width: 150px;
     color: #fff;
     text-align: center;
     padding: 5px;
     position: absolute;
     z-index: 1;
     bottom: 100%;
     left: 50%;
     margin-left: -60px;
  }
#tooltip_arrow .tooltip_text::after {
     content: " ";
     position: absolute;
     top: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: #ff6a00 transparent transparent transparent;
  }
#tooltip_arrow:hover .tooltip_text {
     visibility: visible;
  }

<html>
<body>
    <div id="tooltip_arrow">HTML
        <span class="tooltip_text">Hyper Text Markup Language</span>
    </div>
</body>
</html>

Output

← Previous Next →

CSS Tutorial

CSS Tutorials

CSS Tooltip

CSS Tooltip Used

Simple CSS Tooltips

Example of Simple Tooltip

Output

Positioning Tooltip

Example of Positioning Tooltip

Output

Output

Output

Output

Tooltip Arrows

Examples of Tooltip Arrows

Output

Related Topics

Related Topics

Policy & Disclosure

Popular

LifeStyle & Fun