Для изменения контура тултипа можно попробовать использовать анимацию атрибута d
path
В основе анимации лежит плавный переход из начального path
овала без стрелки к финальному path
со стрелкой.
По наведению курсора меняется цвет тултипа и при клике вырастает стрелка.
При повторном клике стрелка плавно исчезает.
var tooltip = document.getElementById("svg1"),
close = document.getElementById('close'),
open = document.getElementById("open");
let flag = true;
tooltip.addEventListener('click', function() {
if (flag == true) {
close.beginElement();
flag = false;
} else {
open.beginElement();
flag = true;
}
});
.pol {
fill: #fdd;
stroke-width:2;
stroke:#000"
transition: 500ms;
filter:url(#shadow);
}
:hover.pol {
fill: wheat;
}
text {
font-size:24px;
fill:#7A7A7A;
pointer-events: none;
text-anchor:middle;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100" viewBox="0 0 300 100" >
<defs>
<filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="3" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<path class="pol" d="m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z">
<animate id="close"
attributeName="d"
begin="indefinite"
restart="whenNotActive"
dur="0.5s"
fill="freeze"
values="
m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z;
m35 10h220c13.9 0 21.9 11.2 25 25 0 0-0.2 16.3 0 29.4C280.9 132.2 282.9 79.8 255 80 192.3 80.4 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z" />
<animate id="open"
attributeName="d"
begin="indefinite"
restart="whenNotActive"
dur="0.5s"
fill="freeze"
values="
m35 10h220c13.9 0 21.9 11.2 25 25 0 0-0.2 16.3 0 29.4C280.9 132.2 282.9 79.8 255 80 192.3 80.4 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z;
m35 10h220c13.9 0 21.9 11.2 25 25 0 0 3.1 20.9-1.8 29.4C273.6 72.5 266.8 80 255 80 192.3 79.8 35 80 35 80 21.2 80 10 68.9 10 55V35C10 21.2 21.2 10 35 10Z"
/>
</path>
<text x="140" y="50">Пример с clip-path</text>
</svg>
Можно попробовать использовать более интересную форму тултипа
.container {
width:75vw;
height:75vh;
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 240 240">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="3" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#shadow)" transform="scale(1)">
<path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
<animate id="an_path"
attributeName="d"
values="
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"
begin="svg1.click"
dur="6s"
repeatCount="1"
fill="freeze"
restart="whenNotActive">
</animate>
</path>
<text x="30" y="50" font-size="18" fill="white">click me </text>
</g>
</svg>
</div>