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

Displaying icon/image inside tooltip in header.

2 Answers 115 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Christy
Top achievements
Rank 1
Christy asked on 12 Jul 2019, 01:03 PM

Hi,

 

 

Currently am displaying a tooltip in header using the below code. however i want to display a image inside tooltip.

{

    field: 'country', title='country', headerTemplate: "<u class='uom fa fa-info-circle fa-lg' data-container='body' title='' data-toggle='tooltip' data-original-title='Golden Standard'></u>"

}

 

i.e., something like this. but when i try the below code, the html inside the 'data-original-title' is showing as plain text instead of rendering as html.

{
    field: 'Country', title='Country', headerTemplate: "<u class='uom fa fa-info-circle fa-lg' data-container='body' title='' data-toggle='tooltip' data-original-title='<i class="fa fa-square" style="color:PaleGoldenRod"></i> Golden Standard'></u>"
}

 

In the DataBound event of a grid, am using below code to show tooltip.,
dataBound: function (e) {
        $("[data-toggle='tooltip']").tooltip();
}

 

Please see the attached screenshot for refrence.

 

Thanks in advance.

 

2 Answers, 1 is accepted

Sort by
0
Christy
Top achievements
Rank 1
answered on 15 Jul 2019, 05:19 AM
So, this can't be done? Can someone take a look at this?
0
Petar
Telerik team
answered on 16 Jul 2019, 12:20 PM
Hi Christy,

Please check this demo from out documentation which demonstrates how an image could be displayed inside a Tooltip

this functionality is achieved by using the following Kendo UI template:
<script id="template" type="text/x-kendo-template">
    <div class="template-wrapper">
        <img src="../content/web/foods/200/#=target.data('id')#.jpg" alt="#=target.data('title')#" />
        <p>#=target.data('title')#</p>
    </div>
</script>

The template is referenced to the Tooltip using its content configuration. Here is the definition of the Tooltip:
$("#products").kendoTooltip({
               autoHide: false,
               filter: "a",
               content: kendo.template($("#template").html()),
               width: 400,
               height: 200,
               position: "top"
              });

The marked in yellow code is the one used for linking the Tooltip with the above template. 

Please check the provided demo and let me know if you have any questions. 

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
Christy
Top achievements
Rank 1
Answers by
Christy
Top achievements
Rank 1
Petar
Telerik team
Share this question
or