Randomblue Randomblue - 5 months ago 60
CSS Question

CSS tooltip tail with image

Tooltip tails in CSS are possible, see for example here. I am looking to do similar CSS tooltip tails, but with a background image. See for example Twitter's card tooltip (look in the top-left corner):

enter image description here

How can I do image tooltip tails?

Answer

The easiest way to do it using SVG and clip-path (just like twitter did)

Here's Fiddle Demo

It uses an img element and then it's masked. You can create the element using an online tool or free svg editor like InkScape

.tooltip{
  width:380px;
  object-fit:cover;
  object-position:center;

  /*Chrome,Safari*/
  -webkit-clip-path: polygon(58px 25px,70px 9px,81px 25px,380px 25px,380px 215px,11px 215px,10px 25px);

  /*Firefox*/
  clip-path: url("#clipPolygon");

}


body{
  background:url('http://ericasadun.com/wp-content/uploads/2013/04/f.png');
}
<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="56 25,70 9,81 25,380 25,380 215,11 215,10 25">
    </polygon>
  </clipPath>
</svg>


<img class="tooltip" src="http://lorempixel.com/image_output/animals-q-c-640-480-3.jpg" alt="">

http://cssplant.com/clip-path-generator

Comments