JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<a class="tooltip" href="#"><img alt="CSS3 Tooltip" style="height:30px;width:50px;" src="../img/demo/css-tooltip-image.gif"><span>
        <b></b><strong>Cross Browser Compatibility</strong><br>
        <img alt="CSS3 tooltip image" style="float:right;height:128px;width:90px;" src="src/css3-tooltip-image.png">
        It also works on non-CSS3 compatible browsers such as IE8 and below, degrades to legacy browsers nicely.
        </span></a>
    
    <p>test test test</p>
      <p>test test test</p>
      <p>test test test</p>
      <p>test test test</p>
      <p>test test test</p>
      <p>test test test</p>

CSS

a.tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;} a.tooltip strong {line-height:30px;} a.tooltip > span { width:200px; padding: 10px 20px; margin-top: 20px; margin-left: -85px; opacity: 0; visibility: hidden; z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; -moz-box-shadow: 2px 2px 2px #999; box-shadow: 2px 2px 2px #999; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } /*a.tooltip > span:hover,*/ a.tooltip:hover > span { opacity: 1; text-decoration:none; visibility: visible; overflow: visible; margin-top:50px; display: inline; margin-left: -60px; } a.tooltip span b { width: 15px; height: 15px; margin-left: 20px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } a.tooltip > span { color: #000000; background:...