Display Help text in All Properties Editing

To see a property’s help text in EPiServer 7, the editor needs to hover the property label.
Helptext visible by hover
This is not always an intuitive behavior for the editor but I’ve found a way to it by making the help text visible next to the property.

Create css file

Create a .css file in /ClientResources/Styles, I call mine “editorhelp.css”.

Add the following styles : UPDATED FOR EPISERVER 9 and 10 (verified on 10.3.1)

.Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after {
    content: attr(title);
    display: block;
    font-size: 0.8em;
    font-style: italic;
    margin: 0.3em 0 0 0;
}

Register your .css file

Add the following to module.config


Tadaa!

Go to edit mode and your Help text should be visible.
Help text displayed

Note that EPiServer is very good on caching this. You might need to clear your cache and restart your website.

Advertisements
Tagged

9 thoughts on “Display Help text in All Properties Editing

  1. This should be the default rendering! Nice work. I’ll steal this…

  2. Per Negård says:

    Nice!!

  3. Fix for EPiServer 8:

    .Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after

    instead of:

    .Sleek .dijitTabPaneWrapper .epi-formsRow label[title]:after

  4. Vishal Panday says:

    They changed the HTML a little bit in version 8.*, so the correct editorhelp.css code is now

    .Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after {
    content: attr(title);
    display: block;
    font-size: 0.8em;
    font-style: italic;
    margin: 0.3em 0 0 0;
    }

    Hope this helps others

  5. cathinkaw says:

    Have anyone gotten this to work for Epi 9 or 10? I have tried the fix for Epi 8.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: