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):
How can I do image tooltip tails?
Asked
Active
Viewed 474 times
1
-
I'm not sure what you're referring to - do you mean the top _left_ corner of the map, under the user's image? – Ben Hull Jun 26 '16 at 20:37
-
Have you tried anything? – putvande Jun 26 '16 at 20:41
-
@Beejamin: Yes, I mean top left. Corrected. – Randomblue Jun 26 '16 at 20:50
-
@putvande: I've tried using `background-image` but the tail and the body are discontinuous. – Randomblue Jun 26 '16 at 20:51
1 Answers
2
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="">
Miro
- 8,402
- 3
- 34
- 72
-
Adding `border-radius` for the top two corners seems tricky... Any ideas? – Randomblue Jun 26 '16 at 21:07
-
1You can't use css. You have to create a vector shape with rounded corners. Again i recommend inkscape. [Here's a tutorial](http://superuser.com/questions/640954/inkscape-rounding-corners-of-shapes) – Miro Jun 26 '16 at 21:11