ToolTipController.HtmlTemplate Property

An HTML & CSS template applied to regular hints and Super Tooltips of controls whose tooltips are managed by this ToolTipController.

Namespace: DevExpress.Utils

Assembly: DevExpress.Utils.v24.1.dll

NuGet Packages: DevExpress.Utils, DevExpress.Wpf.Core

Declaration

C#

[DXCategory("Layout")]
public HtmlTemplate HtmlTemplate { get; }

VB.NET

<DXCategory("Layout")>
Public ReadOnly Property HtmlTemplate As HtmlTemplate

Property Value

Type	Description
HtmlTemplate	The template applied to control tooltips.

Remarks

The layout of tooltip design depends on whether your controls display Regular Tooltips, Super Tooltips, or both. HTML templates are used when the ToolTipController.ToolTipType property is set to either “Default” or “Html”.

You can store various tooltip templates in the HtmlTemplateCollection component.

C#

toolTipController1.HtmlTemplate.Assign(htmlTemplateCollection1[4]); 

VB.NET

toolTipController1.HtmlTemplate.Assign(htmlTemplateCollection1[4])

Regular Tooltips

Run Demo

A regular tooltip uses a maximum of three content blocks:

• Title (the value of the ToolTipTitle property)
• Main text (the value of the ToolTip property)
• Image (one of the built-in images selected according to the ToolTipIconType property value)

The sample markup below arranges all three possible blocks in a column. Note that the img element utilizes the dx-class property that selects a required style depending on whether or not this tooltip has an image (the HasImage property value).

<div class="container">
    <img dx-class="{HasImage: tooltip-image,hidden }" src="${Image}"/>
    <div class="item title">${Title}</div>
    <div class="item text">${ToolTip}</div>
</div>

body{ 
    padding: 5px;
    font-family: 'Segoe UI';
}
.container {
    padding: 5px;
    background-color: @Window;
    border: 1px solid @HighlightAlternate/0.6;
    box-shadow: 0px 0px 5px 0px @WindowText/0.2;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
}
.item {
    margin: 2px;
    white-space: pre-line;
    color: @WindowText;
}
.title {    
    font-weight: bold;
    font-size: 12px;
}
.text {
    color: @WindowText;
    font-size: 11px;
}

.tooltip-image {
    height: 36px;
    width: 36px;
}

.hidden { display: none; }

Super Tooltips

Run Demo

Super Tooltips are built with the following elements:

• ToolTipTitleItem
• ToolTipItem
• ToolTipSeparatorItem

Since a Super Tooltip can have any number of these elements, create a unified template that can be used with any tooltip element (the dx-class property allows you to display only required HTML blocks), and utilize the dx-collection tag to reuse this unified template for all tooltip elements.

<!--Sub-template that can be used with any Super Tooltip element-->
<template id="item-container">
  <div dx-class="{IsSeparator: hidden-element }">
    <div class="item" dx-class="{VAlignment}">
      <div dx-class="{HasImage: , hidden-element }">
        <img src="${Image}" class="image" dx-class="{IconSize: image-large, image-small, image-custom }" />
      </div>
      <div class="text" dx-class="{ItemType}">${Text}</div>
    </div>
  </div>
  <div class="separator" dx-class="{IsSeparator: , hidden-element }"></div>
</template>

<!--The template that applies the "item-container" sub-template to all Super Tooltip elements-->
<div class="container">
    <dx-collection Items="${Items}" ItemTemplate="item-container"></dx-collection>
</div> 

body{ 
    padding: 10px;
    font-family: 'Segoe UI';
}
.container {
    padding: 10px;
    background-color: @ControlText/0.95;
    border: 1px solid @ControlText/0.6;
    box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}
.item {
    display: flex;
    margin: 4px;
}
.image {
    margin: 2px 2px 2px 6px;
    fill: @Control;
}
.image-small {
    width: 16px;
    height: 16px;   
}
.image-large {
    width: 24px;
    height: 24px;   
}
.image-custom{
    width: auto;
    height: auto;
}
.text {
    font-size: 14px;
    margin: 0px 5px;
    color: @Control;
}
.separator {
    height: 1px;
    background-color: @Control/0.4;
    margin: 4px 8px;
}
.hidden-element { display: none; }
.Title { font-weight: bold; }
.Default { align-items: flex-start; }
.Top { align-items: flex-start; }
.Center { align-items: center; }
.Bottom { align-items: flex-end; }

In addition to the HasImage property used in the sample template for regular hints, the sample above also utilizes the IsSeparator property to identify whether or not the current Super Tooltip element is a separator.