This is a migrated thread and some comments may be shown as answers.

Adding URL link in a tool tip

13 Answers 162 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 13 May 2014, 06:36 PM
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

13 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 15 May 2014, 08:43 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Edward
Top achievements
Rank 1
answered on 11 Sep 2019, 05:23 PM
Could you do that with a kendo scatter chart? 
0
Petar
Telerik team
answered on 13 Sep 2019, 10:33 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 13 Sep 2019, 02:43 PM

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

 

0
Petar
Telerik team
answered on 17 Sep 2019, 10:06 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 17 Sep 2019, 01:46 PM

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

 

 

 

0
Petar
Telerik team
answered on 18 Sep 2019, 02:04 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 18 Sep 2019, 03:04 PM

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

 

0
Petar
Telerik team
answered on 20 Sep 2019, 11:07 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 20 Sep 2019, 01:43 PM

Hi Petar,

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

Regards,

Edward

 

 

0
Petar
Telerik team
answered on 24 Sep 2019, 12:03 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Edward
Top achievements
Rank 1
answered on 25 Sep 2019, 07:14 PM

Hi Petar,

Thanks. The solution looks good.

Regards,

Edward

 

 

 

0
Petar
Telerik team
answered on 27 Sep 2019, 06:42 AM

Hi Edward,

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

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ToolTip
Asked by
Paul
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Edward
Top achievements
Rank 1
Petar
Telerik team
Share this question
or