Tooltip CssClass attribute not working

Question

It's just what the subject says: When I set a value on CssClass on the EjsTooltip component, I don't see that class show up anywhere when I inspect the html. Right now, I'm having to wrap the tooltips in a div with a container class and maintain ".container-class > *" in the CSS to get those tooltips to inherit the styles I want. However, that causes the html to flash with some error text before showing the desired styles. I'm just trying to get a bunch of tool-tipped buttons to appear inline....

Sowmiya Padmanaban · Answer

Hi Alex,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query that “CssClass property is not working”. It is already a known bug from our side. We will be include the fix for this bug in our upcoming patch release which is expected to be released at the end of February 2020. Please be patience, until then.  
 
Track the below link for bug status. 
https://www.syncfusion.com/feedback/12124/css-class-property-is-not-added-properly-in-tooltip-component 
 
Please let us know, if you have need any further assistance. 
 
Regards,  
Sowmiya.P

Sowmiya Padmanaban · Answer

Hi Alex, 
 
We are glad to announce that patch release (v17.4.51) is rolled out successfully. In this release, we have included a fix for “Tooltip CSS Class is not Added”. To access this fix, we suggest you to update the package to the latest version(v17.4.51). 
 
Refer the below sample link. 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tooltip190851182.zip 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
Regards,  
Sowmiya.P

Edward Kagan · Answer

Just tried in 18.1.53 and the CssClass is not taking any effect.  The bug is back.

Sowmiya Padmanaban · Answer

Hi Edward,

We have checked your reported issue with your specified version(v18.1.53) and also the latest version (v18.1.55). But we are unable to reproduce it. CSS class is correctly added to the tooltip popup element.

Refer the below code snippet.

<SfTooltip ID="Tooltip" Content="@Content" CssClass="customclass" >

<SfButton ID="btn" Content="Show Tooltip"></SfButton>

</SfTooltip>

@code

{

string Content = "Tooltip";

}

Refer the below screenshot.

Refer the sample link below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/tootip-186486278.zip

Please let us know , if you need any further assistance.

Regards,

Sowmiya. P

Mike Freeman · Answer

Have just upgraded to 2.4.44 and the bug is back:  CssClass does not come through to the HTML

LeoLavanya Dhanaraj · Answer

Mike, We have validated the reported issue(CssClass does not work) in Blazor Tooltip component and unable to reproduce the issue at our end. For your reference, we included the sample with the mentioned version(20.4.44).We suspect that the issue occurs due to the improper script and style references added to the sample. Some of the breaking changes have been included in our release version 20.1.47. So, you should install the latest individual NuGet package and add script and style references to your sample. Check the release notes below for changes.Release notes link(Breaking changes) : https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#commonCheck out the below mentioned code snippets for your reference. [SfDashboard.csproj] … [_Layout.cshtml] [OR] Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfTooltip-1918933669.zipFollow our suggested way and check out the attached sample at your end. If the issue still persists, share the issue replicated video footage or issue replication steps to validate further and provide a prompt solution.Regards,Leo Lavanya Dhanaraj

Mario Maier · Answer

We're currently using version 28.2.11 and it seems, that the bug is back. I added classes to my tooltips:

<SfTooltip Position="Position.BottomCenter" CssClass="inline-tooltip w-auto pe-0">

But in the frontend they're not added.

Priyanka Karthikeyan · Answer

Hi Mario MaierWe have investigated the reported issue in the latest version of the Tooltip component. Our analysis confirms that the CSSClass is being properly added to the DOM.For your reference, please find below:Sample: Blazor Playground LinkScreenshot:  If you're still encountering the issue, could you please:Modify the shared sample to replicate your specific scenario, orProvide a separate sample that demonstrates the issueThis will help us reproduce and investigate the matter more effectively.Thank you for your understanding and cooperation. Please don't hesitate to reach out if you have any further questions.Regards,Priyanka K

Nate Barish · Answer

The example given by Priyanka K breaks for me when increasing the version to 3.1.40

See this link: https://blazorplayground.syncfusion.com/LZBIDurBwXXvzCeL

It still seems broken in the latest version 31.1.20

https://blazorplayground.syncfusion.com/VNhyNuBLwtLKymNJ

It looks like tooltips have broken many times in the past. Why does this is keep breaking?

Priyanka Karthikeyan · Answer

It seems the tooltip is not appearing in the provided sample. This behavior is attributed to breaking changes introduced in Tooltip Component version 30.1.37. To address this, the `TargetContainer` property can be utilized, allowing the tooltip to function with dynamically created elements or targets outside the Tooltip component. This property is `null` by default. When the target element is not within the Tooltip wrapper, set the `TargetContainer` property to the CSS selector of the target's parent element.

syncfusion

Sample: https://blazorplayground.syncfusion.com/embed/LZLSNkhgsuUBeENz?appbar=true&editor=true&resu… Documentation reference: Essential Studio for Blazor 2025 Volume 2 Main Release Release Notes