Вот набросок svg(работает в ff и ie), в хроме не завелось но лень думать в чём проблема, может позже.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
html,body{
width:100%;
height:100%;
background-image:url(http://fc01.deviantart.net/fs31/f/2008/215/f/f/texture_1_by_Texture_Mania.jpg);
background-size:cover;
text-align: center;
}
.tooltip {
display: inline-block;
position: relative;
margin:20px;
}
.tooltip-svg {
overflow: visible;
top: 0px;
left: 0px;
position: absolute;
}
.tooltip-content {
position: relative;
padding:0.6em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
</style>
</head>
<body>
<div class="tooltip">
<svg width="100%" height="100%" class="tooltip-svg">
<defs>
<polyline id="tooltip-arrow" points="-1,-15 15,0 -1,15" />
<pattern id="tooltip-background" patternUnits="userSpaceOnUse" width="1304" height="847">
<image xlink:href="http://fc08.deviantart.net/fs71/f/2014/054/2/8/damages_by_destinyblue-d77jr43.jpg" x="0" y="0" width="1304" height="847" />
</pattern>
<mask id="tooltip-mask">
<g id="tooltip-box" fill="#fff">
<use xlink:href="#tooltip-arrow" x="100%" y="50%"/>
<rect x="0" y="0" rx="20" ry="20" width="100%" height="100%" />
</g>
</mask>
</defs>
<use xlink:href="#tooltip-box" stroke="black" stroke-width="4"/>
<rect x="0" y="0" width="120%" height="100%" fill="url(#tooltip-background)" mask="url(#tooltip-mask)" />
</svg>
<div contentEditable="true" class="tooltip-content">Продавай человеку рыбу <br>и будешь сыт каждый день,<br> научи человека ловить рыбу<br> и будешь сыт всего лишь раз.</div>
</div>
</body>
</html>