Skip to main content

Meta Box Tooltip

Meta Box Tooltip helps you to add help information via tooltips.

meta box tooltip screenshot

Settings

To add a tooltip to a meta field, add tooltip parameter for that field. You can define tooltip in one of following formats:

  • 'tooltip' => 'Tooltip content',
  • 'tooltip' => array( 'icon' => 'info', 'position' => 'top', 'content' => 'Tooltip content', 'allow_html' => true )

e.g. if the tooltip is a string, the plugin will use icon info and take the string as the tooltip content. If the tooltip is an array, then it accepts the following parameters:

ParameterDescription
iconThe tooltip icon. It can be info (default), help or URL to custom icon image. Since version 0.1.1, you can use any Dashicons for the icon by specifying its name, for example dashicons-email. For full list of Dashicons, please read this page.
positionThe tooltip position. Can be top (default), bottom, left or right. Optional.
contentTooltip content.
allow_htmlWhether to render HTML in the tooltip content: true (default) or false.

Sample code

This code below adds tooltip to 3 fields:

add_filter( 'rwmb_meta_boxes', 'meta_box_tooltip_demo_register' );
function meta_box_tooltip_demo_register( $meta_boxes ) {
$meta_boxes[] = array(
'title' => 'Meta Box Tooltip Demo',
'fields' => array(
array(
'name' => 'Default',
'id' => 'name',
'type' => 'text',

// Add tooltip to field label, in one of following formats
// 1) 'tooltip' => 'Tooltip Content'
// 2) 'tooltip' => array( 'icon' => 'info', 'content' => 'Tooltip Content', 'position' => 'top' )
// 3) 'tooltip' => array( 'icon' => 'https://url-to-icon-image.png', 'content' => 'Tooltip Content', 'position' => 'top' )
//
// In 1st format, icon will be 'info' by default
// In 2nd format, icon can be 'info' (default), 'help' or any Dashicons (see https://developer.wordpress.org/resource/dashicons/)
// In 3rd format, icon can be URL to custom icon image
//
// 'position' is optional. Value can be 'top' (default), 'bottom', 'left', 'right'
'tooltip' => 'Info icon, top position',
),
array(
'name' => 'Help icon',
'id' => 'job',
'type' => 'text',
'tooltip' => array(
'icon' => 'help',
'content' => 'Right position',
'position' => 'right',
),
),
array(
'name' => 'Dashicon',
'id' => 'email',
'type' => 'text',
'tooltip' => array(
'icon' => 'dashicons-email',
'content' => 'Dashicon',
'position' => 'right',
),
),
array(
'name' => 'Custom image',
'id' => 'email',
'type' => 'text',
'tooltip' => array(
'icon' => 'https://i.imgur.com/ZQI2DNx.png',
'content' => 'Custom icon',
'position' => 'right',
),
),
),
);
return $meta_boxes;
}

Adding tooltip for inputs

The default behavior adds tootips for field labels. Since version 1.1, the plugin supports adding tooltips for field inputs. Because of variation in the UI, the plugin supports only these fields: date time fields, text input fields (text, url, email, number, password) and select fields.

The option for this feature is tooltip_input, which accepts the same parameters as for tooltip.