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.

<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.

<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.

<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.

<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.

<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>";
}

Properties

Name Type Description Notes Default Value
property icon AllowHtml Boolean Gets or sets the whether the tooltip can contain HTML in text.
attribute
inner element
static value
bindable
default
 False
property icon Content DotvvmControl Gets or sets the element for which the tooltip is displayed.
attribute
inner element
static value
bindable
default
 null
property icon Delay Int32 Gets or sets number of miliseconds to delay the showing and hiding the tooltip.
attribute
inner element
static value
bindable
default
 0
property icon DisableHtmlSanitization Boolean Gets or sets whether the inner HTML should be sanitized.
attribute
inner element
static value
bindable
default
 False
property icon EnableAnimation Boolean Gets or sets whether the tooltip should use the fade animation.
attribute
inner element
static value
bindable
default
 True
property icon Enabled IValueBinding<Boolean> Gets or sets whether the tooltip is active or not.
attribute
inner element
static value
bindable
default
 null
property icon Placement TooltipPlacement Gets or sets the side on which the tooltip is placed.
attribute
inner element
static value
bindable
default
 Bottom
property icon Text String Gets or sets the tooltip text.
attribute
inner element
static value
bindable
default
 null
property icon Trigger Trigger[] Gets or sets the event which triggers the tooltip to show.
attribute
inner element
static value
bindable
default
 null
property icon 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
property icon WrapperTagName String Gets or sets the wrapper tag name for tooltip.
attribute
inner element
static value
bindable
default
 span

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization