Bojan Petkovski

<p>Tipso is a simple WordPress tooltip plugin that displays a responsive, animated, fully customizable tooltip when the visitor hovers over the matched element.</p>
<h3>Usage</h3>
<p>The plugin adds a button in the editor. On click it opens a modal window where you can enter the tooltip content. It generates a shortcode and inserts it in the editor.</p>
<blockquote>
<p>The shortcode<br />
  [tipso tip=”Tooltip content”]Hover me[/tipso]</p>
</blockquote>
<p>You can also manually add the shortcode in the editor, or you can assing the tooltip functionality to any element simply by adding a class <strong>tipso</strong> and for the content add a <strong>data-tipso=”Tooltip content”</strong></p>
<p>For making changes to the default tooltip options (background color, content color etc.) go to “Settings/Tipso Settings”</p>
<p>Check the <a href="http://tipso.object505.com" rel="nofollow ugc">demo</a></p>


Tipso

Thank you

Tipso is a simple Wordpress tooltip plugin.

dreihochzwo

<p>If an ACF field requires a longer instruction text, the layout of the edit screen is messy and a lot of space is wasted.</p>
<p>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.</p>
<h4>New in Version 1.2.0</h4>
<p>The tooltip will not hide if moused over, allowing create a tooltip with a link inside without hiding the tooltip.</p>
<h4>Custom settings</h4>
<p>There are 7 filters that allow adjusting the design and the behavior of the tooltips.</p>
<p><strong>This plugin works only with the <a href="https://www.advancedcustomfields.com/pro/" rel="nofollow ugc">ACF PRO</a> (version 5.5.0 or higher).</strong></p>
<h4>Localizations</h4>
<ul>
<li>English</li>
<li>Deutsch</li>
</ul>
<h3>Custom settings with filter hooks</h3>
<p>There are 7 filters that allow adjusting the design and the behavior of the tooltips can be adjusted.</p>
<h4>Set the design of the tooltips</h4>
<pre><code><?php
function acf_tooltip_style() {
    $style = 'qtip-acf';

    return $style;
}
add_filter('acf/tooltip/style', 'acf_tooltip_style');
?>
</code></pre>
<p>The available styles can be found on the <a href="http://qtip2.com/options#style" rel="nofollow ugc">qTip options page</a> and are shown on the <a href="http://qtip2.com/demos/" rel="nofollow ugc">qTip demo site</a>.</p>
<p>You can mix the styles; e.g. “qtip-acf qtip-rounded qtip-shadow”</p>
<p>If you like, you can define your own style, with the class name of your style from your own CSS file (see next filter).</p>
<p>The qtip-acf style is the standard style, which is set without a filter.</p>
<h4>Define your own CSS file</h4>
<pre><code><?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');
?>
</code></pre>
<p>You will find a ‘qtip-example-style.css’ in the ‘/assets/css’ folder.</p>
<h4>Positioning the corner of the tooltip</h4>
<pre><code><?php
function acf_tooltip_position_my() {
    $position_my = 'center left';

    return $position_my;
}
add_filter('acf/tooltip/position/my', 'acf_tooltip_position_my');
?>
</code></pre>
<h4>Position in relation to the tooltip icon</h4>
<pre><code><?php
function acf_tooltip_position_at() {
    $position_at = 'center right';

    return $position_at;
}
add_filter('acf/tooltip/position/at', 'acf_tooltip_position_at');
?>
</code></pre>
<p>Check out the <a href="http://qtip2.com/demos/" rel="nofollow ugc">qTip demo site</a> to find your perfect positioning.</p>
<h4>Apply tooltips only to fields with specific class</h4>
<pre><code><?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');
?>
</code></pre>
<p>Add the class to the fields where you want to show tooltips.</p>
<h4>Exclude tooltips on fields with specific class</h4>
<pre><code><?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');
?>
</code></pre>
<p>Add the class to the fields where you <em>don’t</em> want to show tooltips.</p>
<h4>Add tooltips to the Field Editor</h4>
<p>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.</p>
<pre><code><?php
add_filter('acf/tooltip/fieldeditor', '__return_true');
?>
</code></pre>


ACF Tooltip

Great plugin! Does the job well. However, a bit heavy; for large use cases where you have many ACF fields, I have seen a significant performance drop in the WP dashboard and increased load times.

Excellent!

Displays ACF field instructions as tooltips

Tipso vs ACF Tooltip