Displays ACF field instructions as tooltips
If an ACF field requires a longer instruction text, the layout of the edit screen is messy and a lot of space is wasted.
The ACF Tooltip plugin hides the field instructions, adds a help symbol to the field labels and generates a tooltip based on the instruction text.
The tooltip will not hide if moused over, allowing create a tooltip with a link inside without hiding the tooltip.
There are 7 filters that allow adjusting the design and the behavior of the tooltips.
This plugin works only with the ACF PRO (version 5.5.0 or higher).
There are 7 filters that allow adjusting the design and the behavior of the tooltips can be adjusted.
<?php function acf_tooltip_style() { $style = 'qtip-acf'; return $style; } add_filter('acf/tooltip/style', 'acf_tooltip_style'); ?>
The available styles can be found on the qTip options page and are shown on the qTip demo site.
You can mix the styles; e.g. “qtip-acf qtip-rounded qtip-shadow”
If you like, you can define your own style, with the class name of your style from your own CSS file (see next filter).
The qtip-acf style is the standard style, which is set without a filter.
<?php function acf_tooltip_css() { $css_file = get_bloginfo('template_url') . '/qtip-own.css'; // if the file is saved in your themes folder return $css_file; } add_filter('acf/tooltip/css', 'acf_tooltip_css'); ?>
You will find a ‘qtip-example-style.css’ in the ‘/assets/css’ folder.
<?php function acf_tooltip_position_my() { $position_my = 'center left'; return $position_my; } add_filter('acf/tooltip/position/my', 'acf_tooltip_position_my'); ?>
<?php function acf_tooltip_position_at() { $position_at = 'center right'; return $position_at; } add_filter('acf/tooltip/position/at', 'acf_tooltip_position_at'); ?>
Check out the qTip demo site to find your perfect positioning.
<?php function acf_tooltip_class() { $class = 'with__tooltip'; // edit this to your prefered class name return $class; } add_filter('acf/tooltip/class/only', 'acf_tooltip_class'); ?>
Add the class to the fields where you want to show tooltips.
<?php function acf_tooltip_class_exclude() { $class = 'no__tooltip'; // edit this to your prefered class name return $class; } add_filter('acf/tooltip/class/exclude', 'acf_tooltip_class_exclude'); ?>
Add the class to the fields where you don’t want to show tooltips.
With this filter, you can specify whether the instructions in the Field Editor are displayed as tooltips as well. By default, the instructions are displayed.
<?php add_filter('acf/tooltip/fieldeditor', '__return_true'); ?>
acf-tooltip
folder to your /wp-content/plugins/
directory