How to set Tooltip text from attribute on target element
Hi,
I'm trying to use the ToolTip component in Blazor and I would like to set the text using an attribute on the target element. This way I can have one SfTooltip compoenent and set the content on render based on which element has the tooltip
My code so far is like this:
<SfTooltip ID="nav-tooltip" Target="[tooltip]" OnRender="SetTooltipContent" Content="@TooltipContent">
<ul>
<li class="nav-item" tooltip="MyTooltip Text" id="ToolTipMenuItem" >
</li>
<li class="nav-item" tooltip="MyTooltip Other Text" id="ToolTipMenuItem2" >
</li>
</ul>
</SfTooltip>
@code
{
string TooltipContent = "Test content";
public async Task SetTooltipContent(TooltipEventArgs args)
public async Task SetTooltipContent(TooltipEventArgs args)
{
string id = args.Target.ID;
string tooltip = await args.Target.GetAttribute<string>("tooltip");
TooltipContent = $"{id} - {tooltip}";
}
}
The string Id is set correctly - so I know that I am picking up the correct DOM element in the Target property. However, I am unable to discover how to get data from the GetAttribute method. This always seems to return null. I've tried changing the name of the attribute but I am unable to get any data.
As a side note -
string[] classes = await args.Target.GetClassList();
also returns null..
Am I calling these DOM methods from the wrong place in the life cycle of the component? What is the correct way to perform this operation?
Many thanks
Tim
SIGN IN To post a reply.
3 Replies
1 reply marked as answer
IL
Indhumathy Loganathan
Syncfusion Team
March 3, 2021 01:12 PM UTC
Hi Kaine,
Greetings from Syncfusion support.
We have validated your requirement in Tooltip component. Currently, Blazor doesn’t provide any direct way to access the browser’s DOM or APIs. But there is an option to invoke/call JavaScript functions via JS Interop, thereby letting Blazor access the DOM and its APIs.
Please refer to the below link.
You can find our breaking changes from the below link.
We have prepared a Tooltip sample similar to your scenario where we have set the Tooltip content based on its Target by using the BeforeOpen event. We have used the X, Y co-ordinates to fetch the Target element.
Index.razor
|
async void BeforeOpen(TooltipEventArgs args)
{
var x = args.Left;
var y = args.Top;
string tooltip = await JSRuntime.InvokeAsync<string>("Tooltip", x, y);
string id = args.Target.ID;
TooltipContent = $"{id} - {tooltip}";
} |
_Host.cshtml
|
<script>
function Tooltip(x, y) {
let element = document.elementFromPoint(x, y);
var tooltip = element.getAttribute("tooltip");
return tooltip;
}
</script> |
You can find the sample from the below link.
Check out the below links to know more about Tooltip component.
Please, let us know if you need any further assistance.
Regards,
Indhumathy L
Marked as answer
KA
Kaine
March 3, 2021 03:56 PM UTC
Hi,
Thank you for your response, that is very helpful. I will give that a go.
Given that I can access the element's Id from the args.Target is there a reason for using the x,y co-ordinates rather than just passing the element's id?
If the method args.Target.GetAttribute<string>("") is not supported is there a reason that it is exposed to the c# at all? Having these methods available in the c# implementation when they are not supported and not functioning seems a little confusing. Is there a plan to implement them at a later date or are they going to be removed?
Many thanks,
Tim
IL
Indhumathy Loganathan
Syncfusion Team
March 4, 2021 06:05 AM UTC
Hi Kaine,
As mentioned in our previous update, we don’t provide support to access DOM elements. You can fetch the element from the DOM only by using the X, Y co-ordinates. For your query regarding GetAttribute, we don’t have any plan to include it in future update. We will remove that method in any of our upcoming releases.
Regards,
Indhumathy L
SIGN IN To post a reply.
