I am trying to add a tooltip in the App.vue so that I can use title attribute in children and see kendo tooltips.
I have 3 issues I want to get help on:
- The callout pointer (small triangle above tooltip) isn't at the center of the element's width. How can I show the callout in the center of the element's width?
- If I have an icon button (the icon could be svg or feather icon etc.) then the tooltip doesn't show when hovering on the icon inside a button. When I hover out of the icon but still within the bounds of the button, the tooltip shows up again
- In case of an icon button with a label, when I hover over and out of it, the tooltip gets stuck and doesn't show on any other element
Here is a sample project. I tried with bootstrap icon, kendo icon and an svg from bootstrap icon. In all three cases, the issue is the same.
https://stackblitz.com/edit/vue-apr7tr?file=public%2Findex.html
I tried uploading a gif file showing different interactions, but that format isn't allowed. Please see this:
https://pasteboard.co/jVX76H5FoOmF.gif