How to add a tooltip to a property added in CMS?

Tanvi

Vote:

I need some description to be displayed when I hover on a property

public virtual XhtmlString Title { get; set; }

How can I do it?

#224802

Jun 26, 2020 9:12

Tomas Hensrud Gulla

Vote:

Use the this attribute, with Description set.

[Display(Name = "Title",
   Description = "My title tooltip",
   Order = 100,
   GroupName = SystemTabNames.Content)]
public virtual XhtmlString Title { get; set; }

#224804

Jun 26, 2020 9:29

Scott Reed

Vote:

Tomas is correct, also I find personally tooltips on hover for description text to be not user friendly as users will not neccessary realise. If you add this CSS in to your client resources (https://world.episerver.com/documentation/developer-guides/CMS/client-resources/) CSS file

/*  Set property descriptions to be visible */
.Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after,
.Sleek .epi-createContent .epi-form-container__section__row > label[title]:after {
    content: attr(title);
    display: block;
    font-size: 0.8em;
    font-style: normal;
    margin: 0.3em 0 0 0;
}

The descriptions will be shown on the title on the left of the property in the editor (for all properties editing view).

#224811

Jun 26, 2020 12:01

Tomas Hensrud Gulla - Jun 26, 2020 12:05

Excellent tip! I would personally prefer: font-style: italic;

Like in this example: https://talk.alfnilsson.se/2014/12/18/display-help-text-in-on-page-editing/