Celebrate WordCamp Europe - 30% OFF! Use coupon WC30 - View Details

How To Add Tooltips to Checkboxes and Radios

If you are using the WS Form framework you can use the following HTML to add Tooltips to Checkboxes and Radios.

Demos

Tutorial

You can enter tooltip HTML into the label column of checkbox and radio data grids.

Basic HTML Markup:

Label <span tabindex="0" data-wsf-tooltip=""></span>

The tabindex="0" attribute ensures that the user will be able to tab to the tooltip to activate it.

The text that displays inside of the tooltip is entered inside of the data-wsf-tooltip attribute.

Any icon you wish to use can be entered inside of the span element.

Example

Label <span tabindex="0" data-wsf-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><svg height="16" width="16" viewBox="0 0 16 16"><path fill="#skin_color_information" d="M8 0c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM8.9 13h-2v-2h2v2zM11 8.1c-0.4 0.4-0.8 0.6-1.2 0.7-0.6 0.4-0.8 0.2-0.8 1.2h-2c0-2 1.2-2.6 2-3 0.3-0.1 0.5-0.2 0.7-0.4 0.1-0.1 0.3-0.3 0.1-0.7-0.2-0.5-0.8-1-1.7-1-1.4 0-1.6 1.2-1.7 1.5l-2-0.3c0.1-1.1 1-3.2 3.6-3.2 1.6 0 3 0.9 3.6 2.2 0.4 1.1 0.2 2.2-0.6 3z"></path></svg></span>