template.md

title	page_title	description	slug	tags	published	position
Template	Tooltip - Template	Add custom dynamic content in the Tooltip for Blazor based on its target.	tooltip-template	telerik,blazor,tooltip,template	true	4

Tooltip Template

The Tooltip component offers a template that lets you customize the content so you can show rich data (such as images or other components). The template context provides the data-* attributes and the title of the tooltip target so you can tie the content to the metadata.

The tooltip metadata is available from the the context object, in the following fields:

• DataAttributes - the data- attributes, lowercase, the field is of type Dictionary<string, string>
• Title - the title attribute of the target, of type string

This article contains the following examples for generating the tooltip content:

• Markup generated in the template. Shows how you can access the metadata.

• Markup generated from a string through a method. Shows how you can loop over all the keys in the metadata and render markup from a function call.

• Separate component consumes the metadata and can even load content on demand from a database or other service. Load on demand is not mandatory, you can simply use the metadata in a fashion similar to the two other examples.

Basic Example - Inline Markup

caption Different content for different targets, generated from the same tooltip

@* You can add more than text, you can also use the data to generate attributes for images
    or even entire components *@

<TelerikTooltip TargetSelector="p strong[title]">
    <Template>
        @{
            var dataAttributes = context.DataAttributes;
            var title = context.Title;
            <div>
                This is a tooltip for:
                <ul>
                    <li>target title: @title</li>
                    <li>target data-id: @dataAttributes["id"]</li>
                </ul>
            </div>
        }
    </Template>
</TelerikTooltip>

<p>
    Hover these targets to see different tooltip contents generated from the same tooltip:<br />
    <strong title="one" data-id="first">target one</strong>
    and also
    <strong title="two" data-id="second">the second target</strong>.
</p>

Markup from Generated String

caption Generate tooltip content based on target metadata through a method

@* Generate the HTML content through a markup string *@

<TelerikTooltip TargetSelector="p strong[title]">
    <Template>
        @(new MarkupString(GetTooltipContent(context.DataAttributes, context.Title)))
    </Template>
</TelerikTooltip>

@code{
    string GetTooltipContent(Dictionary<string, string> targetMetadata, string targetTitle)
    {
        if (targetMetadata == null && string.IsNullOrEmpty(targetTitle))
        {
            return "<strong>no data for this element</strong>";
        }
        string result = "<ul>";
        result += $"<li>title: {targetTitle}</li>";
        foreach (string key in targetMetadata.Keys)
        {
            result += $"<li>key: {key} | value: {targetMetadata[key]}</li>";
        }
        result += "</ul>";
        return result;
    }
}

<p>
    Hover these targets to see different tooltip contents generated from the same tooltip:<br />
    <strong title="one" data-id="first" data-someField="data1">target one</strong>
    and also
    <strong title="two" data-id="second" data-someField="third">the second target</strong>.
</p>

Separate Component and Load on Demand

This example shows how you can use a standalone component to generate the tooltip contents. It can also be used to load content on demand and you can find a more complete example in the Tooltips with Load-on-demand in a Grid Row sample project.

caption Generate tooltip content through a separate component

````MainComponent @* Tip: set dimensions that will accommodate the data/content you fetch/generate to avoid sizing and/or positioning issues when the new content is rendered *@

Hover these targets to see different tooltip contents generated from the same tooltip:
target one and also the second target and even a third target.

```` ````TooltipContentComponent @* You can apply more styling, add different content or more components This example showcases the concept, you can modify it to match you needs. Using the OnParametersSet event and loading data on demand is not required *@

TooltipContent

@if (!string.IsNullOrEmpty(DataFromService)) {

Generated on: @DataFromService

if (TargetData == null && string.IsNullOrEmpty(Title))
{
    <strong>no data for this element</strong>
}
else
{
    <ul>
        <li>Title attribute: @Title</li>
        @foreach (string key in TargetData.Keys)
        {
            <li>@key | value: @TargetData[key]</li>
        }
    </ul>
}

} else {

please wait...loading data for this element

}

@code { [Parameter] public Dictionary<string, string> TargetData { get; set; }

[Parameter]
public string Title { get; set; }

string DataFromService { get; set; }

protected override async Task OnParametersSetAsync()
{
    await Task.Delay(1000); // simulate database or network call from a service

    // simulate actual data, we just update a string with the current time
    // you can use the metadata as well to fetch appropriate information
    DataFromService = DateTime.Now.ToString();
}

}

## See Also

* [Blazor Tooltip Overview]({%slug tooltip-overview%})
* [Live Demo: Tooltip Template](https://demos.telerik.com/blazor-ui/tooltip/template)