diff --git a/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor index b93af9b7b..3c7465499 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor @@ -38,6 +38,9 @@ + + + @code { private string pageUrl = "/tooltips"; private string title = "Blazor Tooltip Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor new file mode 100644 index 000000000..2d205b744 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor @@ -0,0 +1 @@ +Tooltip with HTML diff --git a/blazorbootstrap/Components/Tooltip/Tooltip.razor b/blazorbootstrap/Components/Tooltip/Tooltip.razor index cd2645cab..884ed1a54 100644 --- a/blazorbootstrap/Components/Tooltip/Tooltip.razor +++ b/blazorbootstrap/Components/Tooltip/Tooltip.razor @@ -9,6 +9,7 @@ data-bs-toggle="tooltip" data-bs-placement="@placement" data-bs-custom-class="@colorClass" + data-bs-html="@(IsHtml ? "true" : "false")" title="@Title"> @ChildContent - + \ No newline at end of file diff --git a/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs b/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs index 6621c6df8..090c1e999 100644 --- a/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs +++ b/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs @@ -87,6 +87,13 @@ public async Task ShowAsync() [Parameter] public TooltipColor Color { get; set; } private string colorClass => BootstrapClassProvider.TooltipColor(Color)!; + + /// + /// Gets or sets a value indicating whether to display the content as HTML instead of text. + /// + [Parameter] + public bool IsHtml { get; set; } + private string placement => Placement.ToTooltipPlacementName(); /// diff --git a/docs/docs/05-components/tooltips.mdx b/docs/docs/05-components/tooltips.mdx index c11fad7d0..a9ee2bffe 100644 --- a/docs/docs/05-components/tooltips.mdx +++ b/docs/docs/05-components/tooltips.mdx @@ -21,6 +21,7 @@ Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages. |--|--|--|--|--|--| | ChildContent | RenderFragment | Specifies the content to be rendered inside this. | | | 1.0.0 | | Color | `TooltipColor` | Gets or sets the tooltip color. | | `TooltipColor.None` | 1.10.0 | +| IsHtml | bool | Gets or sets a value indicating whether to display the content as HTML instead of text. | | `false` | 2.1.0 | | Placement | `TooltipPlacement` | Specifies the tooltip placement. Default is top right. | | `TooltipPlacement.Top` | 1.0.0 | | Title | string | Displays informative text when users hover, focus, or tap an element. | ✔️ | | 1.0.0 | @@ -106,4 +107,13 @@ Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages. private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}"; } ``` -[see demo here](https://demos.blazorbootstrap.com/tooltips#dynamically-update-the-tooltip-text) \ No newline at end of file +[see demo here](https://demos.blazorbootstrap.com/tooltips#dynamically-update-the-tooltip-text) + +### Tooltip with HTML + +Blazor Bootstrap: Tooltip with HTML + +```cshtml {} showLineNumbers +Tooltip with HTML +``` +[see demo here](https://demos.blazorbootstrap.com/tooltips#tooltip-with-html)