How to Add Tooltip with pure CSS

How to Add Tootip with pure CSS

You’re perhaps not already using tooltips, but you’ve at least seen them in action before.

If your websites are built on WordPress, you can create tooltips with WordPress plugins like Simple Tooltip and Magic Tooltips. Or you may prefer using jQuery plugins like Tooltipster.

For me, I always choose to do more with less and I’ll show you how to create a tooltip with just a couple lines of css codes.

Here is a preview in action and you can play around.

https://jsfiddle.net/xw1gaa7c/

HTML structure


<div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
</div>

CSS

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

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

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Reference: http://www.w3schools.com/howto/howto_css_tooltip.asp

Save

Author: Leo

My name is Leo who’s behind this blog. I’ve been working with wordpress since 2010. I’ll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

1 thought on “How to Add Tooltip with pure CSS”

Leave a Reply

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