Hyperlink Inside the Tooltip.

[Wen]

Hello,

I have a button that has a tooltip.  I have a requirement to add a hyperlink inside this tooltip. When I hover the the button, this tooltip should appear with a hyperlink inside. I can click on this link to navigate to an external site like https://www.telerik.com/kendo-angular-ui. 

Is it possible to have a hyperlink inside a tooltip for Kendo UI for Angular?

Thank you in advance for your help.

[Simeon]

Hello Wen,

Thank you for the provided details.

The Kendo UI for Angular Tooltip provides templates, which enable the developer to add custom content to the tooltip:

https://www.telerik.com/kendo-angular-ui/components/tooltips/tooltip/templates/

For your convenience, I have created an example that demonstrates a tooltip with a hyperlink inside.

https://stackblitz.com/edit/angular-sufyql

I hope this helps.

Regards,
Simeon
Progress Telerik

[Wen]

Hello Simeon,

With the solution you provided, I can now click a link within a tooltip to open a webpage. Previously, I was unable to click the link inside a tooltip because the tooltip wasn't attached to the button. However, after implementing the code you provided from the example project, specifically "<div kendoTooltip [offset]="0"...", I successfully clicked the link inside the tooltip.

In our current project, we use a different library where the tooltips are not attached to the buttons. We would like to maintain this design.

Is it possible to keep the tooltip detached from the button and still allow the link inside the tooltip to be clickable? If not, would you consider adding this capability in your next production release?

Thank you for your support.
Wen

[Simeon]

Hi Wen,

Based on the provided information, I am not exactly sure what the desired implementation is.

An anchor element is needed so that the tooltip can be associated with an element on the page.

If the end goal is to have some padding between the button and the tooltip, additional styles can be added to the tooltip as shown in the following example:

https://stackblitz.com/edit/angular-sufyql-9alxnr

Please let me know if I misunderstood the question.

Regards,
Simeon
Progress Telerik

[Wen]

Hi Simeon,

Your solution that allows clicking the link inside the tooltip at the top position, detached from the button, works great. This CSS code: .k-tooltip-wrapper { padding-bottom: 15px; } only allows clicking the link inside the tooltip when it is in the top position.

If you want to click the link inside the tooltip at the bottom position, you need to set this CSS code:  

.k-tooltip-wrapper { padding-top: 15px; }

In our application, we have a page with tooltips at both the top and bottom positions containing links that need to be clickable.

Is it possible to have the links inside the tooltip be clickable for the top, bottom, left, and right positions of a tooltip? If not, would you consider adding this capability in your next production release?

I tried the following CSS code but it did not work:

/* Apply padding for the tooltip at the top within the class .topToolTip */
.topToolTip .k-tooltip-wrapper {
    padding-bottom: 15px;   
}

/* Apply padding for the tooltip at the bottom within the class .bottomToolTip */
.bottomToolTip .k-tooltip-wrapper {
    padding-top: 15px;
}

Thank you again for your support.

[Simeon]

Hi Wen,

Indeed, you are in the right direction. The behavior can be achieved utilizing the tooltipClass property. Here is a modified example:

https://stackblitz.com/edit/angular-sufyql-rfybby

I hope this helps.

Regards,
Simeon
Progress Telerik

[Wen]

Hi Simeon,

Thank you very much for providing the solution. Everything works great.

Best regards,

Wen