Displaying icon/image inside tooltip in header.

[Christy]

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.

 

[Christy]

So, this can't be done? Can someone take a look at this?

[Petar]

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