How To Create Animated Tooltip Without Javascript

Tool-tips are easiest to take information from an element while designing webpages, today i got a awesome tooltips source to share with our readers. It's originally shared by Jase Smith on Tutsplus early last month . He uses very simple technique using HTML and CSS to create awesome animated tooltip which you may never had seen before. Let's Take look on demo.

See the Pen CSS Tooltip Magic by Mohammad Ishtiaq (@Mybloggertricks) on CodePen.

The Expectation is chooses to achieve the goal:

1. No JavaScript required
2. We’ll be using attribute selectors (not classnames), with CSS built-in pattern matching
3. Add to existing DOM elements (no new elements required in your markup*)
4. Code examples are prefix-free (add vendor prefixes for your target browsers if needed)
5. Assumes mouse over/hover to trigger tool-tips
6. Plain text tool-tips only (HTML, images, etc. are not supported)
7. Subtle animations while invoking tool-tips

Now many of you got question how to use it on blogger blog? You can use it on blogger blog in many ways but here i'm showing you one of them.

CSS Code we are going to use in this tutorial is:

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}
/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */

  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;

  /*
    Let the content set the size of the tooltips
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}
/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}
/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}
/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

and the HTML markup something look like this:

<div>

    <span tooltip="Join us on Twitter" flow="up"><i class='fa fa-twitter' style='font-size: 20px; line-height: 20px;'></i></span>

    <span tooltip="Join us on Facebook" flow="up"><i class='fa fa-facebook' style='font-size: 20px; line-height: 20px;'></i></span>

     <span tooltip="Join us on Pinterest" flow="up"><i class='fa fa-pinterest' style='font-size: 20px; line-height: 20px;'></i></span>

         <span tooltip="Join us on Google Plus" flow="up"><i class='fa fa-google-plus' style='font-size: 20px; line-height: 20px;'></i></span>

  </div>

 That's it we have simple coded tool-tip without having JavaScript, in the CSS code above we have only four types of flow, if you looking for fun i got a awesome Demo on Codepen coded by jasesmith.

You can change the links of social media with your respective links as well as icons. for changing icon you just need to change following code with new icon code.

<i class='fa fa-google-plus' style='color: #111; font-size: 20px; line-height: 20px;'></i>

You can get new icon short-code from font-awesome official webiste, click on the icon which you want to take and you will be landed to short-code page.

Have fun playing with them and keep us udpated in the comment form below. Finally..!!! have something troubling? let me know in the comment form below, and don't forget to subscribe if you love it. Peace and blessing :)