Edit on Github

Tooltip

in namespace DotVVM.Bootstrap5.Controls

Allows to add the Bootstrap Tooltip widget on the inner element.

Usage & Scenarios

Adds the Bootstrap Tooltip to an element or control.

https://getbootstrap.com/docs/5.2/components/tooltips

Sample 1: Basic Tooltip

The control has the Text property which specifies the text displayed in the tooltip.

You can use the Tooltip control to wrap links, buttons, or any HTML block elements.

page.dothtml

<bs:Tooltip Text="This element has simple tooltip">
  <a href="#">Link 1</a>
</bs:Tooltip>

Sample 1: Tooltip Placement

The Tooltip control has also the Placement property. Use this property to specify on which side the overlay appears.

The Placement property can be set to Top, Bottom, Left, Right and Auto.

page.dothtml

<bs:Tooltip Placement="Left" Text="This element has simple tooltip">
  <a href="#">Link 1</a>
</bs:Tooltip>

<bs:Tooltip Placement="Right" Text="This element has simple tooltip">
  <a href="#">Link 2</a>
</bs:Tooltip>

<bs:Tooltip Placement="Bottom" Text="This element has simple tooltip">
  <a href="#">Link 3</a>
</bs:Tooltip>

<bs:Tooltip Placement="Top" Text="This element has simple tooltip">
  <a href="#">Link 4</a>
</bs:Tooltip>

Sample 3: Tooltip Animation, Delay and Container

The Tooltip control uses CSS fade transition by default. It is possible to disable it using the EnableAnimation property.

The Delay property is used to delay showing and hiding of the popover (value represents number of seconds).

The Container property specifies the selector for an element in which the tooltip is created. It allows to position the popover in the flow of the document near the triggering element which will prevent the tooltip from floating away from the triggering element during a window resize.

page.dothtml

<bs:Tooltip Text="Title" EnableAnimation="false">
    <bs:Button Text="Text" Type="Danger" />
</bs:Tooltip>

<bs:Tooltip Text="Title" Delay="1">
    <bs:Button Text="Text" Type="Info" />
</bs:Tooltip>

<bs:Tooltip Text="Title" Container="body">
    <bs:Button Text="Text" Type="Primary" />
</bs:Tooltip>

Sample 4: Allowing HTML in Text

If you want to allow HTML in the Text property, you must turn it on explicitly using the AllowHtml property.

If you allow HTML in tooltips, make sure the HTML is safe to display. See Cross-site scripting for more information.

page.dothtml
ViewModel.cs

<bs:Tooltip Text="{value: TitleHtml}" 
            AllowHtml="true">
    <bs:Button Text="Text" Type="Success" />
</bs:Tooltip>

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Tooltip.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string TitleHtml { get; set; } = "<h3>Title with html</h3>";
    }
}

Sample 5: HTML sanitization

All HTML passed into Tooltip by default goes through Bootstraps HTML sanitizer. HTML sanitizer filters out all non whitelisted tags and attributes.
List of allowed tags and attributes.

To disable HTML sanitization you must set DisableHtmlSanitization to true.

Without sanitization you could have be vulnerable to XSS attacks.

page.dothtml
ViewModel.cs

<bs:Tooltip Text="{value: TitleHtml}" 
            AllowHtml="true"
            AllowHtmlSanitization="false" >
    <bs:Button Text="Text" Type="Success" />
</bs:Tooltip>

public class ViewModel : DotvvmViewModelBase
{
    public string TitleHtml { get; set; } = "<h3 style='color: forestgreen;' >Title with html</h3>";
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
AllowHtml	Boolean	Gets or sets the whether the tooltip can contain HTML in text.	attribute inner element static value bindable default	False
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
Content	DotvvmControl	Gets or sets the element for which the tooltip is displayed.	attribute inner element static value bindable default	null
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
Delay	Int32	Gets or sets number of miliseconds to delay the showing and hiding the tooltip.	attribute inner element static value bindable default	0
DisableHtmlSanitization	Boolean	Gets or sets whether the inner HTML should be sanitized.	attribute inner element static value bindable default	False
EnableAnimation	Boolean	Gets or sets whether the tooltip should use the fade animation.	attribute inner element static value bindable default	True
Enabled	IValueBinding<Boolean>	Gets or sets whether the tooltip is active or not.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
Placement	TooltipPlacement	Gets or sets the side on which the tooltip is placed.	attribute inner element static value bindable default	Bottom
Text	String	Gets or sets the tooltip text.	attribute inner element static value bindable default	null
Trigger	Trigger[]	Gets or sets the event which triggers the tooltip to show.	attribute inner element static value bindable default	null
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True
WrapperTagName	String	Gets or sets the wrapper tag name for tooltip.	attribute inner element static value bindable default	span