Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

CSS Tooltip On Hover DIV HTML Element

Ashfaq Ahmed by Ashfaq Ahmed
December 5, 2019
in Others
2
CSS Tooltip On Hover DIV HTML Element
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Today we will create CSS Tooltip On Hover DIV HTML Element by using the :before and :after elements. It easy to customize by just editing the CSS.

Furthermore, it allows the user to mouse over the Tooltip so you place any kind of link over th tooltip and the user can easily click on it.

Moreover, You can easily change the div element anyway and customize the tooltip background, change the font and apply any kind of CSS properties.

Early days, The Tooltips are made with Javascript but now we can easily create them with pure CSS and also animated it by using CSS3 animation and many other properties.

The tooltip is great fun to show more info to let me know the user quickly.  It is light-weight, cross-browser compatible, and easy to use.

How to Create CSS Tooltip On Hover DIV Element

First of all, we will create the HTML markup that is simple and easy to understand. We have a div class name wrapper and wrote text inside it.

Next, we have a child div with the class name tooltip that hold the text whichi will show when you mouse over the wrapper div.

<div class="wrapper">
        I have a tooltip.
       <div class="tooltip">I am a tooltip!</div>
</div>

After that, we will write the CSS code. First, we have to design the wrapper element and add some styling to make it look nice and clean.

There is nothing complicated here. All we will add some background-color, font-size, padding and few other CSS properties.

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-size: 20px;
  margin: 0 auto;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 230px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

Similarly, Here we will do the same as we have done with the main wrapper but here we will use the position absolute to keep it hidden. We also used the translate and transition to make it animated on hover.

.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: 0;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

The :before element will help us to show the tooltip on-hover.

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

With the help of :after element, we can easily create the down arrow indication.

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

Let’s apply some more animation on-hover stats by using the transform property.

.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
}

Sometimes we have seen transition issues on IE so we will disable it on the Older version of IE.

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}
.lte8 .wrapper:hover .tooltip {
  display: block;
}

That’s it. Please refer to the demo and customize it to fit into your project.

Demo Download
Previous Post

Pure CSS Heart Shape or Icon Using HTML

Next Post

Creative Image Hover Effects with CSS3

Next Post
Creative Image Hover Effects with CSS3

Creative Image Hover Effects with CSS3

Comments 2

  1. Yvonne Bautista says:
    1 year ago

    Thank you so much! this solution is so simple yet functional, I loved it!! thanks again greatings from Mexico

    Reply
    • Muhammad Asif says:
      1 year ago

      Hi Yvonne Bautista!
      You’re welcome. Glad to read your feedback! keep visiting us for more HTML, CSS codes. 🙂

Leave a Reply Cancel reply

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

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.