Adding URL link in a tool tip

[Paul]

Hi 

i was wondering if it is possible to add a url link inside a tool tip. so the same way you would use 
<a href="url">Link text</a>
but showing up inside the tool tip. and of course it being clickable and leading you to the listed website. 

thank you

[Alexander Popov]

Hello Paul,

Yes, adding a URL is possible. Here is an example: 

<span id="tooltip">
    hover for tooltip
</span>

<script>
    $("#tooltip").kendoTooltip({
        content: "<a href='http://www.telerik.com'> Click me! </a>"
    })
</script>

Regards,
Alexander Popov
Telerik

 

 

[Edward]

Could you do that with a kendo scatter chart? 

[Petar]

Hi Edward,

Can you give me more details about the functionality you are asking about? Which modification of the Scatter Charts do you use? Where do you want the Tooltip to appear? 

Here is our Demo page for the Scatter Charts. Can you send me back the one you use with the information where do you want the Tooltip to appear? 

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[Edward]

Hi Petar,

Our requirement in to add a hyperlink to an existing scatter line chart tooltip that gets displayed when the user clicks on any point on the scatter line. I have my doubts that this is even possible since when attempting to place the mouse pointer over the toolip the chart refreshes the tooltip data with info from the next point on the line (as it should).

Thanks,

Ed

 

[Petar]

Hi Edward,

The described functionality could be implemented using a Kendo UI template and the template property of the tooltip in the Chart.  

The logic which will display the desired URL should be implemented inside the Kendo UI template.

Here is a Dojo demonstrating the discussed functionality. The implementation in the Dojo adds "www.under40.com" to the points with axis value under 40 and "www.above40.com" to the points with axis value above 40. The used template is defined like this:

<div>#=value.x#% in #=value.y# minutes # if(value.x<40){ # www.under40.com # } else { # www.above40.com # }#</div>

I hope the above implementation will help you resolve your issue.

Regards,
Petar
Progress Telerik

[Edward]

Hi Petar,

I think you've missed the point (or I haven't explained it properly) which is to be able to click on the displayed link in the tooltip. For our requirements we would need to construct the URL from the series data and then be able to click on the URL in the tooltip which would then load another application. I assume that this can't currently be achieved since as I've stated in my prior message when attempting to place the mouse pointer over the toolip the chart refreshes the tooltip data with info from the next point on the line and there's no way to click on the hyperlink.   

Thanks,

Edward

 

 

 

[Petar]

Hi Edward,

Here is a Dojo project that I hope will fit the needs of your application. I've used this Show Tooltip on seriesClick demo as a basis and modified it in a way the described in your last reply functionality is achieved. 

The demonstrated functionality uses a custom tooltip, Kendo template and the seriesClick method of the Chart. The tooltip is being opened on click on a circle from the Chart. The URL is being set in the template variable defined in the function executed on seriesClick. Inside this function, you also have access to all series data through its event handler. 

I hope the above resolves the issue.

Regards,
Petar
Progress Telerik

[Edward]

Hi Petar,

Thanks for your efforts. Is it possible to use both the default tooltip method (shown on mouse hover) and the custom tooltip based on the seriesClick method (as in displaying all info on mouse hover and just the hyperlink on point click)?

Regards,

Edward

 

[Petar]

Hi Edward,

Please check this modification of the previous Dojo:  https://dojo.telerik.com/awiSoJUY.

The default tooltip is displayed and if you click on a circle the custom tooltip appears. Currently, the custom tooltip hides after 3 seconds or if another circle in the Chart is clicked.

Depending on the application needs, the implementation can be modified in a way the tooltip hides on a given event or after a different period of time.

Regards,
Petar
Progress Telerik

[Edward]

Hi Petar,

That looks good. Thanks again. Would it be possible to get a code sample using the Kendo UI MVVM pattern?

Regards,

Edward

 

 

[Petar]

Hi Edward,

This Dojo: https://dojo.telerik.com/iXeREvUC implements the same functionality as the previous one but uses the MVVM  pattern.

I hope this is what you want to achieve. 

Regards,
Petar
Progress Telerik

[Edward]

Hi Petar,

Thanks. The solution looks good.

Regards,

Edward

 

 

 

[Petar]

Hi Edward,

Great! I am happy to hear that! Let me know if I can help with something else. 

Regards,
Petar
Progress Telerik