Skip to content

Commit d29ba0d

Browse files
Merge branch 'development' into 966118-AI
2 parents 17fc439 + e6de795 commit d29ba0d

File tree

7 files changed

+58
-2
lines changed

7 files changed

+58
-2
lines changed

blazor-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4890,6 +4890,7 @@
48904890
</li>
48914891
<li> <a href="/blazor/tooltip/setting-dimension">Setting Dimension</a></li>
48924892
<li> <a href="/blazor/tooltip/content">Content</a></li>
4893+
<li> <a href="/blazor/tooltip/target">Target</a></li>
48934894
<li> <a href="/blazor/tooltip/position">Position</a></li>
48944895
<li> <a href="/blazor/tooltip/open-mode">Open Mode</a></li>
48954896
<li> <a href="/blazor/tooltip/customization">Customization</a></li>

blazor/chip/style.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Use the following CSS to customize the chip text properties.
2828
Use the following CSS to customize the chip icon properties.
2929

3030
```css
31-
.e-chip .e-icon {
31+
.e-chip .e-chip-icon {
3232
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png');
3333
opacity: 0.8;
3434
}
@@ -83,4 +83,4 @@ Use the following CSS to customize the chip avatar text properties.
8383
background-color: #d51a1a;
8484
color: #fafafa;
8585
}
86-
```
86+
```
-76 Bytes
Loading
121 Bytes
Loading
159 KB
Loading

blazor/tooltip/images/target.png

5.2 KB
Loading

blazor/tooltip/target.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
10+
# Target
11+
12+
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.
13+
14+
```cshtml
15+
<SfTooltip Content="Let's go green to save the planet!!" Target="#btn" >
16+
<SfButton ID="btn" Content="Show Tooltip"></SfButton>
17+
</SfTooltip>
18+
```
19+
20+
![Blazor Tooltip Target](images/target.png)
21+
22+
## Displaying Tooltip for dynamically created target element
23+
24+
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.
25+
26+
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.
27+
28+
```cshtml
29+
@using Syncfusion.Blazor.Popups
30+
@using Syncfusion.Blazor.Buttons
31+
32+
<SfTooltip ID="BasicTooltip" Target="[title]" TargetContainer=".tooltip-container">
33+
</SfTooltip>
34+
<div class="tooltip-container">
35+
<span title="Static tooltip">Static Element</span>
36+
<SfButton @onclick="AddElement">Add Dynamic Element<SfButton>
37+
@if (ShowElement)
38+
{
39+
<span title="Dynamic tooltip">Dynamic Element</span>
40+
}
41+
</div>
42+
43+
@code {
44+
private bool ShowElement = false;
45+
46+
private void AddElement()
47+
{
48+
ShowElement = true;
49+
}
50+
}
51+
```
52+
53+
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.
54+
55+
![Blazor Tooltip with Dynamic Targets](images/dynamic-target.gif)

0 commit comments

Comments
 (0)