CodePen

HTML

            
              <p>Tooltip example using inline SVG containing a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject">foreignObject</a>.</p>
<p>Compared with a box with a CSS triangle, it could potentially have any shape.</p>
<p><span class="link">
  <a href="#">Hover me</a>

    <svg width="200px" height="100px" xmlns="http://www.w3.org/2000/svg" class="tooltip">
      <polyline points="5,20 90,20 100,5 110,20 195,20 195,95 5,95" class="tooltip-shape" />
      <foreignObject width="180" height="50" x="10" y="30" class="tooltip-contents">
        <p>This is HTML content which flows in its container, can contain <a href="#">links</a> or anything else.</p>
      </foreignObject>
    </svg>
</span></p>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  font-family: Verdana, serif;
  text-align: center;
  font-size: 12px;
  max-width: 40em;
  margin: 0 auto;
}
.link {
  position: relative;
}
.tooltip {
  position: absolute;
  left: -100px;
  margin-left: 50%;
  top: 100%;
  /* Hide by default */
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.2s, height 0 0.2s;
  -moz-transition: opacity 0.2s, height 0 0.2s;
  -o-transition: opacity 0.2s, height 0 0.2s;
  transition: opacity 0.2s, height 0 0.2s;
}
/* Show on hover */
.link:hover .tooltip {
  height: 100px;
  opacity: 1;
  -webkit-transition: opacity 0.2s, height 0;
  -moz-transition: opacity 0.2s, height 0;
  -o-transition: opacity 0.2s, height 0;
  transition: opacity 0.2s, height 0;
}
.tooltip-shape {
  fill: #FC3;
  stroke: #FC3;
  color: #333;
}
.tooltip-contents {
  color: #333;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................