I have two sort of shapes. One icon comes from Font Awesome and another directly from SVG.
I am using the same CSS content for <i> and for <svg> and I have taken every possible care to ensure that I don’t miss anything for SVG, but our tooltips are coming exactly fine for <i>.
Icons are not coming good in case of <svg>.
Here is my code. In this you can see that.
HTML
<div id="demo-widget" class="demo-position-right demo-button-list">
<div id="sy-whatshelp">
<div class="sywh-services active" style="width:33px">
<a target="_blank" href="https://www.youtube.com/user/https://www.gravatar.com/avatar" class="youtube" data-tooltip="Youtube" data-placement="left" style="display: inline;">
<i style="line-height: 33px; width: 33px; height: 33px;margin-top: 4px;margin-bottom: 4px;" class="fa fa-youtube"></i>
</a>
<a target="_blank" href="tel: " class="call" data-tooltip="Call" data-placement="leftsvg2" style="display: inline;">
<svg width="33px" height="33px" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(0deg);margin-top: 0px;margin-bottom: 0px;"><circle class="color-element" cx="19.4395" cy="19.4395" r="19.4395" fill="#03E78B"></circle><path d="M19.3929 14.9176C17.752 14.7684 16.2602 14.3209 14.7684 13.7242C14.0226 13.4259 13.1275 13.7242 12.8292 14.4701L11.7849 16.2602C8.65222 14.6193 6.11623 11.9341 4.47529 8.95057L6.41458 7.90634C7.16046 7.60799 7.45881 6.71293 7.16046 5.96705C6.56375 4.47529 6.11623 2.83435 5.96705 1.34259C5.96705 0.596704 5.22117 0 4.47529 0H0.745882C0.298353 0 5.69062e-07 0.298352 5.69062e-07 0.745881C5.69062e-07 3.72941 0.596704 6.71293 1.93929 9.3981C3.87858 13.575 7.30964 16.8569 11.3374 18.7962C14.0226 20.1388 17.0061 20.7355 19.9896 20.7355C20.4371 20.7355 20.7355 20.4371 20.7355 19.9896V16.4094C20.7355 15.5143 20.1388 14.9176 19.3929 14.9176Z" transform="translate(9.07179 9.07178)" fill="white"></path></svg>
</a>
<a target="_blank" href="https://facebook.com/https://www.gravatar.com/avatar" class="facebook" data-tooltip="Facebook" data-placement="left" style="display: inline;"><i style="line-height: 33px; width: 33px; height: 33px;margin-top: 4px;margin-bottom: 4px;" class="fa fa-facebook"></i></a>
<a target="_blank" href="https://web.whatsapp.com/send?phone=919840868420&text=I%20need%20help" class="whatsapp" data-tooltip="WhatsApp" data-placement="leftsvg2" style="display: inline;"><svg class="ico_d" width="33px" height="33px" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(0deg);margin-top: 4px;margin-bottom: 4px;"><circle class="color-element" cx="19.4395" cy="19.4395" r="19.4395" fill="#49E670"></circle><path d="M12.9821 10.1115C12.7029 10.7767 11.5862 11.442 10.7486 11.575C10.1902 11.7081 9.35269 11.8411 6.84003 10.7767C3.48981 9.44628 1.39593 6.25317 1.25634 6.12012C1.11674 5.85403 2.13001e-06 4.39053 2.13001e-06 2.92702C2.13001e-06 1.46351 0.83755 0.665231 1.11673 0.399139C1.39592 0.133046 1.8147 1.01506e-06 2.23348 1.01506e-06C2.37307 1.01506e-06 2.51267 1.01506e-06 2.65226 1.01506e-06C2.93144 1.01506e-06 3.21063 -2.02219e-06 3.35022 0.532183C3.62941 1.19741 4.32736 2.66092 4.32736 2.79397C4.46696 2.92702 4.46696 3.19311 4.32736 3.32616C4.18777 3.59225 4.18777 3.59224 3.90858 3.85834C3.76899 3.99138 3.6294 4.12443 3.48981 4.39052C3.35022 4.52357 3.21063 4.78966 3.35022 5.05576C3.48981 5.32185 4.18777 6.38622 5.16491 7.18449C6.42125 8.24886 7.39839 8.51496 7.81717 8.78105C8.09636 8.91409 8.37554 8.9141 8.65472 8.648C8.93391 8.38191 9.21309 7.98277 9.49228 7.58363C9.77146 7.31754 10.0507 7.1845 10.3298 7.31754C10.609 7.45059 12.2841 8.11582 12.5633 8.38191C12.8425 8.51496 13.1217 8.648 13.1217 8.78105C13.1217 8.78105 13.1217 9.44628 12.9821 10.1115Z" transform="translate(12.9597 12.9597)" fill="#FAFAFA"></path><path d="M0.196998 23.295L0.131434 23.4862L0.323216 23.4223L5.52771 21.6875C7.4273 22.8471 9.47325 23.4274 11.6637 23.4274C18.134 23.4274 23.4274 18.134 23.4274 11.6637C23.4274 5.19344 18.134 -0.1 11.6637 -0.1C5.19344 -0.1 -0.1 5.19344 -0.1 11.6637C-0.1 13.9996 0.624492 16.3352 1.93021 18.2398L0.196998 23.295ZM5.87658 19.8847L5.84025 19.8665L5.80154 19.8788L2.78138 20.8398L3.73978 17.9646L3.75932 17.906L3.71562 17.8623L3.43104 17.5777C2.27704 15.8437 1.55796 13.8245 1.55796 11.6637C1.55796 6.03288 6.03288 1.55796 11.6637 1.55796C17.2945 1.55796 21.7695 6.03288 21.7695 11.6637C21.7695 17.2945 17.2945 21.7695 11.6637 21.7695C9.64222 21.7695 7.76778 21.1921 6.18227 20.039L6.17557 20.0342L6.16817 20.0305L5.87658 19.8847Z" transform="translate(7.7758 7.77582)" fill="white" stroke="white" stroke-width="0.2"></path></svg></a></div>
<a id="sywh-open-services" style="line-height: 33px; width: 33px; height: 33px;margin-top: 4px;margin-bottom: 4px;" class="sywh-open-services data-tooltip-hide" "="" data-tooltip="Contact Us" data-placement="left"><i class="fa fa-comments" style="line-height: 33px; display: none;"></i><i class="fa fa-times" style="line-height: 33px; display: inline;"></i></a>
</div>
Our CSS content
#sy-whatshelp {
right: 25px;
bottom: 25px;
position: fixed;
z-index: 9999;
}
#sy-whatshelp a {
position: relative;
}
#sy-whatshelp a.sywh-open-services {
background-color: #129bf4;
color: #fff;
margin-top: 10px;
border: none;
cursor: pointer;
font-size: 23px;
width: 55px;
height: 55px;
text-align: center;
box-shadow: 2px 2px 8px -3px #000;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
display: inline-block;
}
#sy-whatshelp a.sywh-open-services i {
line-height: 55px;
}
#sy-whatshelp a.sywh-open-services svg {
line-height: 55px;
}
#sy-whatshelp a.sywh-open-services i.fa-times {
display: none;
}
#sy-whatshelp .sywh-services {
width: 55px;
height: auto;
}
#sy-whatshelp .sywh-services a {
display: none;
}
#sy-whatshelp .sywh-services a i, #sy-whatshelp .sywh-services a svg{
background-color: #129bf4;
color: #fff;
line-height: 55px;
margin-top: 10px;
border: none;
cursor: pointer;
font-size: 23px;
width: 55px;
height: 55px;
text-align: center;
box-shadow: 2px 2px 8px -3px #000;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
}
a[data-tooltip] {
position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
position: absolute;
display: none;
opacity: 0.85;
transition: all 0.3s ease-in-out;
}
a[data-tooltip]::before {
content: attr(data-tooltip);
background: #000;
color: #fff;
font-size: 13px;
padding: 7px 11px;
border-radius: 5px;
white-space: nowrap;
text-decoration: none;
}
a[data-tooltip]::after {
width: 0;
height: 0;
border: 6px solid transparent;
content: "";
}
a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
display: block;
}
a.sywh-open-services[data-tooltip]::before,
a.sywh-open-services[data-tooltip]::after {
display: block;
}
a.data-tooltip-hide[data-tooltip]::before,
a.data-tooltip-hide[data-tooltip]::after {
display: none !important;
}
a.sywh-open-services[data-tooltip][data-placement="left"]::before {
top: 11px;
}
a[data-tooltip][data-placement="left"]::before {
top: -7px;
right: 100%;
line-height: normal;
margin-right: 10px;
}
a[data-tooltip][data-placement="left"]::after {
border-left-color: #000;
border-right: none;
top: -7px;
right: 100%;
margin-top: 9px;
margin-right: 4px;
}
Here is live a demo you can check. In the bottom left, click on the icon and you can see that all <i> items are correctly displaying its tooltips, but SVG items are not displaying correctly. We want it to be independent of size. For example, now I have small icons whose width and height is 33 pixels and tooltips works fine in <i> elements, but it does not work in <svg> elements.
If I change the size to, say, 50 pixles width and height then also <i> tooltips displays in center, so <i> tooltips displays nicely irrespective of size of icons, but <svg> does not display nicely.
Sometimes it will be up, and sometimes it will be down.
