983104: Updated the UG Documentation for Tooltip

Author: Ashwini-SF5049

blazor/tooltip/accessibility.md

@@ -9,20 +9,20 @@ documentation: ug
 
 # Accessibility in Blazor Tooltip Component
 
-The [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor Tooltip](https://www.syncfusion.com/blazor-components/blazor-tooltip) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor Tooltip component is outlined below.
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
-| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
-| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Meets requirement"> |
+| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
+| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> |
 
 <style>
     .post .post-content img {
@@ -31,37 +31,36 @@ The accessibility compliance for the Blazor Tooltip component is outlined below.
     }
 </style>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Meets requirement"> - All features of the component meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partial"> - Some features of the component do not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Partially meets requirement"> - Some features of the component do not fully meet the requirement.</div>
 
-<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="Does not meet requirement"> - The component does not meet the requirement.</div>
 
 ## WAI-ARIA attributes
 
-The Blazor Tooltip component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) patterns to meet the accessibility. The following ARIA attributes are used in the Tooltip component.
+The Blazor Tooltip component follows the [WAI-ARIA tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to meet accessibility requirements. The following ARIA attributes are used in the Tooltip component.
 
 | Attributes | Purpose |
 | --- | --- |
-| role=”tooltip” | The element that serves as the container for the Tooltip has the ARIA role of `tooltip`. |
-| aria-describedby | This attribute is added to the target element on which the Tooltip gets opened, when focusing or hovering over it. It usually holds the randomly generated `Id` value of the Tooltip element.<br/><br/>In case, the target element already holds an `aria-describedby` attribute with `Id` value of some other component, then the Tooltip Id value can be additionally appended to the existing `aria-describedby` attribute separated by a space as shown in the example below.<br/><br/>**For example**:<br/>aria-describedby = “my-text my-tooltip”<br/>**my-text** is the Id of some other component.<br/>**my-tooltip** is the id of Tooltip component.<br/><br/>When the Tooltip is closed, the `aria-describedby` attribute is removed from the target. |
-| aria-hidden | This attribute is assigned to the Tooltip element whose default value is `true`.<br/><br/>When `true`, it denotes that the Tooltip element is in a hidden or a closed state. When the Tooltip appears on the screen, it’s value changes to `false`. |
+| `role="tooltip"` | The element that serves as the container for the tooltip has the ARIA role of `tooltip`. |
+| `aria-describedby` | This attribute is applied to the target element when the tooltip is shown by focus or hover. It typically contains the unique `ID` of the tooltip element.<br/><br/>If the target element already has an `aria-describedby` attribute referencing another component, the tooltip `ID` is appended, separated by a space.<br/><br/><strong>For example</strong>:<br/>`aria-describedby="my-text my-tooltip"`<br/><strong>my-text</strong> is the ID of another component.<br/><strong>my-tooltip</strong> is the ID of the tooltip component.<br/><br/>When the tooltip is hidden, the tooltip `ID` is removed from `aria-describedby`. |
+| `aria-hidden` | This attribute is set on the tooltip element. The default value is `true` (hidden). When the tooltip is visible, its value changes to `false`. |
 
 ## Keyboard interaction
 
-The Blazor Tooltip component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Tooltip component.
+The Blazor Tooltip component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/#keyboardinteraction) guideline, making it accessible for people who use assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Tooltip component.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>Escape</kbd> | <kbd>Escape</kbd> | Closes or dismisses the Tooltip. |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | A form control receiving focus (say through tab key), opens the Tooltip, and on focus out closes it. |
+| <kbd>Escape</kbd> | <kbd>Escape</kbd> | Closes or dismisses the tooltip. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | When a form control receives focus via the Tab key, the tooltip opens; when focus moves away, it closes. |
 
 ## Ensuring accessibility
 
-The Blazor Tooltip component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
-
-The accessibility compliance of the Tooltip component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/tooltip) in a new window to evaluate the accessibility of the Tooltip component with accessibility tools.
+The Blazor Tooltip component's accessibility levels are validated with the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing.
 
+The accessibility compliance of the Tooltip component is demonstrated in the following sample. Open the [Tooltip accessibility sample](https://blazor.syncfusion.com/accessibility/tooltip) in a new window to evaluate the component with accessibility tools.
 ## See also
 
 * [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

blazor/tooltip/content.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Content in Blazor Tooltip Component
 
-The Blazor Tooltip component allows you to display additional information when users hover over or interact with elements on your web page. Here's how you can explore and implement various content within your Tooltip to enhance its functionality and appearance.
+The Blazor Tooltip component displays supplemental information when users hover over or interact with elements on a web page. This article explains multiple options for defining tooltip content and when to use each approach to enhance clarity and appearance.
 
 ## Simple Text Content
 
-The simplest way to use a Tooltip is with a string of text using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Content) property. A text or a piece of information assigned to the Tooltip’s `Content` property will be displayed as the main text stream of the Tooltip.
+The simplest way to configure tooltip content is to provide a text string using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Content) property. The value assigned to the `Content` property is rendered as the primary text of the tooltip.
 
 ```cshtml
 @using Syncfusion.Blazor.Popups
@@ -29,13 +29,13 @@ The simplest way to use a Tooltip is with a string of text using the [Content](h
 }
 ```
 
-This displays a simple text message when users hover over the button.
+This configuration displays a plain text message when the button receives hover or focus. The example text is illustrative and can be replaced with task-specific content.
 
-![Blazor Tooltip with Content](images/blazor-tooltip-string-content.gif)
+![Blazor Tooltip displaying simple text content](images/blazor-tooltip-string-content.gif)
 
 ## Using the Title Attribute
 
-You can also use the **title** attribute of the target element as the Tooltip content. By using the [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property which allows the Tooltip to use the title attribute of the target element as its content.
+The tooltip can also derive its content from the title attribute of the target element. The [Target](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_Target) property defines the elements to which the tooltip is applied, and when those elements include a title attribute, that value is used as the tooltip content.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons
@@ -53,16 +53,16 @@ You can also use the **title** attribute of the target element as the Tooltip co
 
 ```
 
-This approach is useful when you want to enhance existing HTML title attributes with a more stylish Tooltip.
+This approach is effective for enhancing existing title attributes with a styled tooltip, especially when retrofitting existing markup. The example includes a placeholder hyperlink (href="#") for demonstration.
 
-![Blazor Tooltip with Content](images/blazor-tooltip-title-content.gif)
+![Blazor Tooltip using title attribute content](images/blazor-tooltip-title-content.gif)
 
 
 ## Using Template
 
-The Tooltip's Template property enables you to completely customize the layout and incorporate custom elements into the Tooltip. You can insert any content or HTML elements as Tooltip content by specifying them within the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property of the Tooltip component. Additionally, the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property supports the `RenderFragment` type, enabling dynamic and interactive content within the Tooltip.
+The Tooltip's Template capability enables full customization and the inclusion of custom elements. Provide any content or HTML elements through the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property to compose rich content. The [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property supports the `RenderFragment` type, enabling dynamic and interactive content.
 
-Check out the following code example to see how to include an HTML template inside the Tooltip.
+The following example shows how to include an HTML template inside the tooltip.
 
 ```cshtml
 @using Syncfusion.Blazor.Buttons;
@@ -176,14 +176,13 @@ The SfTooltip is used to display dynamic content generated using a RenderFragmen
 }
 ```
 
-This approach gives you full control over the Tooltip's content, allowing for interactive elements and dynamic data.
+This approach provides full control over the tooltip content and supports interactivity and dynamic data. When adding interactive elements, consider accessibility and focus behavior to ensure a predictable user experience.
 
-![Blazor Tooltip with Template](images/blazor-tooltip-renderfragment-content.gif)
+![Blazor Tooltip rendering dynamic content via RenderFragment](images/blazor-tooltip-renderfragment-content.gif)
 
 ##  Rendering HTML content using MarkupString
 
-By default, the Tooltip can show any kind of formatted content. To improve its layout or create a custom visual element, utilize the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property to establish the desired structure. You can also use [`@(MarkupString)`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.markupstring?view=aspnetcore-7.0) to dynamically render HTML content.
-
+By default, the tooltip can show formatted content. To improve the layout or create a custom visual element, use the [`ContentTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) property to define the structure. The [`@(MarkupString)`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.markupstring?view=aspnetcore-7.0) type can also be used to render HTML content from a string dynamically.
 
 ```cshtml
 @using Syncfusion.Blazor.Popups
@@ -213,8 +212,8 @@ By default, the Tooltip can show any kind of formatted content. To improve its l
 }
 ```
 
-This is useful when you need to render HTML content that's stored as a string, perhaps from a database or API.
+This option is useful when rendering HTML stored as a string from a database or API. Do not render untrusted HTML without sanitization, as doing so may introduce cross-site scripting (XSS) vulnerabilities.
 
 ![Blazor Tooltip with Content](images/blazor-tooltip-with-content.gif)
 
-By using these different content options, you can create Tooltips that range from simple text hints to rich, interactive information displays, enhancing the user experience of your Blazor application.
+By selecting the appropriate approach—plain text via `Content`, title attribute content via `Target`, rich layouts via `ContentTemplate`, dynamic UI via `RenderFragment`, or string-based HTML via `MarkupString`—the tooltip can convey anything from simple hints to rich, interactive information to improve the user experience.

blazor/tooltip/customization.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Customization in Blazor Tooltip Component
 
-The Tooltip can be customized by using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property, which accepts custom CSS class names that defines the specific user-defined styles and themes to be applied on the Tooltip element.
+The Tooltip can be customized by using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property, which applies one or more custom CSS class names. These classes allow defining user-specific styles and themes that are applied to the tooltip wrapper and its elements.
 
 ## Tip pointer customization
 
-Styling the tip pointer's size, background, and border colors can be done using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property, as given below.
+Style the tip pointer size, background, and border colors using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_CssClass) property as shown below. The selectors target the generated tooltip wrapper and pointer elements that are set at runtime based on placement.
 
 ```cshtml
 @using Syncfusion.Blazor.Popups
@@ -80,11 +80,11 @@ Styling the tip pointer's size, background, and border colors can be done using
 </style>
 ```
 
-![Blazor Tooltip with Custom Tip Pointer](images/blazor-tooltip-custom-tip-pointer.png)
+![Customized tooltip pointer size and colors](images/blazor-tooltip-custom-tip-pointer.png)
 
 ## Tooltip customization
 
-The complete look and feel of the Tooltip can be customized by changing it's background color, opacity, content font, etc.
+The complete look and feel of the Tooltip can be customized by changing its background color, opacity, content font, and related styles. The following example demonstrates overriding theme styles by scoping CSS to a custom class applied through `CssClass`.
 
 ```cshtml
 @using Syncfusion.Blazor.Popups