Skip to content

Commit 5eb78f8

Browse files
Merge pull request #6240 from syncfusion-content/965796-tooltip-HF
965796: Adding documentation content to the dynamic target feature of tooltip component
2 parents 4174d88 + 909cedd commit 5eb78f8

File tree

4 files changed

+54
-0
lines changed

4 files changed

+54
-0
lines changed

blazor-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4882,6 +4882,7 @@
48824882
</li>
48834883
<li> <a href="/blazor/tooltip/setting-dimension">Setting Dimension</a></li>
48844884
<li> <a href="/blazor/tooltip/content">Content</a></li>
4885+
<li> <a href="/blazor/tooltip/target">Target</a></li>
48854886
<li> <a href="/blazor/tooltip/position">Position</a></li>
48864887
<li> <a href="/blazor/tooltip/open-mode">Open Mode</a></li>
48874888
<li> <a href="/blazor/tooltip/customization">Customization</a></li>
159 KB
Loading

blazor/tooltip/images/target.png

5.2 KB
Loading

blazor/tooltip/target.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
layout: post
3+
title: Target support in Blazor Tooltip Component | Syncfusion
4+
description: Checkout and learn here all about setting target elements in the Syncfusion Blazor Tooltip component, and explore built-in support for displaying Tooltips on elements added dynamically after the initial render and more.
5+
platform: Blazor
6+
control: Tooltip
7+
documentation: ug
8+
---
9+
# Target
10+
11+
The [`Target`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property specifies the target selector where the Tooltip needs to be displayed. It enables Tooltip activation on specific DOM elements based on user interactions like hover or focus.
12+
13+
```razor
14+
<SfTooltip Content="Let's go green to save the planet!!" Target="#btn" >
15+
<SfButton ID="btn" Content="Show Tooltip"></SfButton>
16+
</SfTooltip>
17+
```
18+
![Blazor Tooltip Target](images/target.png)
19+
20+
## Displaying Tooltip for dynamically created target element
21+
22+
The Tooltip component can be configured to display Tooltips for elements that are added to the DOM after the initial page load. This behavior is useful in applications where target is rendered dynamically, such as in response to user actions, API calls, or conditional logic.
23+
24+
Set the [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_TargetContainer) property using a CSS selector that defines the container in which Tooltip target elements will be automatically display Tooltips. All elements inside this container that match the Target selector will automatically show Tooltips, including those added after the component is rendered—no extra setup needed.
25+
26+
```razor
27+
@using Syncfusion.Blazor.Popups
28+
@using Syncfusion.Blazor.Buttons
29+
30+
<SfTooltip ID="BasicTooltip" Target="[title]" TargetContainer=".tooltip-container">
31+
</SfTooltip>
32+
<div class="tooltip-container">
33+
<span title="Static tooltip">Static Element</span>
34+
<SfButton @onclick="AddElement">Add Dynamic Element<SfButton>
35+
@if (ShowElement)
36+
{
37+
<span title="Dynamic tooltip">Dynamic Element</span>
38+
}
39+
</div>
40+
41+
@code {
42+
private bool ShowElement = false;
43+
44+
private void AddElement()
45+
{
46+
ShowElement = true;
47+
}
48+
}
49+
```
50+
51+
The [`TargetContainer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_TargetContainer) property enables automatic Tooltip registration for newly added elements, enhancing dynamic content interactivity.
52+
53+
![Blazor Tooltip with Dynamic Targets](images/dynamic-target.gif)

0 commit comments

Comments
 (0)