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

<module>
	<clientResources>
		<add name="epi-cms.widgets.base"
				 path="Styles/editorhelp.css"
				 resourceType="Style"/>
	</clientResources>
</module>

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

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

  6. Hsyn says:

    Hello,
    Thanks for the post. I wonder if this would be possible for selected pagetypes or contenttypes only. To be specific, help texts should only be visible in properties panel of a selected block.

  7. Joakim says:

    The module.config setup seems to be missing in this example, does anyone have it?

  8. […] Alf Nilsson viser hvordan man med litt CSS kan vise hjelpeteksten under ledeteksten. […]

  9. […] Alf Nilsson shows how to make the tooltip-text always visible, below the label. […]

  10. […] custom CSS file, the description can be displayed below the […]

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: