silverstripe-framework/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/How_Tos/CMS_Formfield_Help_Text.md

63 lines
2.1 KiB
Markdown
Raw Normal View History

# How to Show Help Text on CMS Form Fields
Sometimes you need to express more context for a form field
than is suitable for its `<label>` element.
The CMS provides you with an easy way to transform
form field attributes into help text
shown alongside the field, a tooltip which shows on demand, or toggleable description text.
The `FormField->setDescription()` method will add a `<span class="description">`
at the last position within the field, and expects unescaped HTML content.
```php
use SilverStripe\Forms\TextField;
TextField::create('MyText', 'My Text Label')
->setDescription('More <strong>detailed</strong> help');
```
To show the help text as a tooltip instead of inline,
2014-11-07 20:43:57 +01:00
add a `.cms-description-tooltip` class.
```php
TextField::create('MyText', 'My Text Label')
->setDescription('More <strong>detailed</strong> help')
->addExtraClass('cms-description-tooltip');
```
Tooltips are only supported
for native, focusable input elements, which excludes
more complex fields like `GridField`
or `DropdownField` with the chosen.js behaviour applied.
Sometimes a field requires a longer description to provied the user with context.
Tooltips can be unwieldy when dealing with large blocks of text, especially if
you're including interactive elements like links.
Another option you have available is making the field's description togglable. This keeps
the UI tidy by hiding the description until the user requests more information
by clicking the 'info' icon displayed alongside the field.
```php
TextField::create('MyText', 'My Text Label')
->setDescription('More <strong>detailed</strong> help')
->addExtraClass('cms-description-toggle');
```
If you want to provide a custom icon for toggling the description, you can do that
by setting an additional `RightTitle`.
```php
TextField::create('MyText', 'My Text Label')
->setDescription('More <strong>detailed</strong> help')
->addExtraClass('cms-description-toggle')
->setRightTitle('<a class="cms-description-trigger">My custom icon</a>');
```
Note: For more advanced help text we recommend using
2016-01-14 11:59:53 +01:00
[Custom form field templates](/developer_guides/forms/form_templates);