Tooltip positioning and visibility help

1 Answer 103 Views
Tooltip
Shashwat
Top achievements
Rank 1
Iron
Iron
Shashwat asked on 03 May 2022, 11:24 AM

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:

  1. 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?
  2. 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
  3. 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

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 05 May 2022, 02:05 PM

Hello,

Straight to the points:

1) You can control the position of the callout by using setCalloutOnPositionAuto prop and setting it to '50%'  for example - https://stackblitz.com/edit/vue-cyjfhr?file=src%2FApp.vue.

2) You can set the  :parent-title="true" prop so that the title is also visible when we hove the direct child. A more concrete option will be to use the filter prop as for example it is done in this demo - https://www.telerik.com/kendo-vue-ui/components/tooltip/anchor-elements/.

3 ) It seems like a bug in the component - especially when you go out of the target through the tooltip itself -  I have logged an issue about it in our feedback postal and we will do our best to fix it as soon as possible. Thank you for your concern with Kendo UI for Vue for reporting it and please excuse us for this inconvenience caused.

If you have further questions or you observe other issue please don't hesitate to let us know.

Regards,
Plamen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Shashwat
Top achievements
Rank 1
Iron
Iron
commented on 10 May 2022, 02:03 PM

1) Setting this position still causes issues in other areas: https://stackblitz.com/edit/vue-1j1jwp?file=src%2FApp.vue

2) I thought (3) above was due to setting this property, and hence removed it. Will use this, thanks.

3) Will keep an eye on upcoming versions. Thanks.

Petar
Telerik team
commented on 12 May 2022, 11:32 AM

Hi, Shashwat.

The issue discussed in the first point of your reply has been logged as a bug which public thread can be followed on this link. We will do our best to fix the issue soon. You can follow the feedback portal item provided above and once there is a change in its status, you will receive a notification. 

Thank you for your report. I've updated your Telerik points as a sign of gratitude for reporting the issue. 

Let me know if you have additional questions related to the current thread.

Tags
Tooltip
Asked by
Shashwat
Top achievements
Rank 1
Iron
Iron
Answers by
Plamen
Telerik team
Share this question
or