Optimized CSS / JAVASCRIPT Loading for the WordPress Tooltips Plugin, WordPress Tooltips Pro PLus Plugin 35.6.8 Released

Hi dear WordPress tooltip users, I hope this message finds you well and enjoying joyful days with your loved ones.   We recently received a feature request from a talented WordPress developer who offered us some fantastic suggestions. Our dedicated plugin development team has been working tirelessly to implement these requests as quickly as possible:

Hi Tooltips team,
Thanks for the 35.5.8 update and for the quick support earlier. I’m using Tooltips Pro Plus on a site running the Salient theme (with WPBakery).

Cause: Tooltips enqueued Bootstrap/Awesome/reset CSS + an admin.css on the frontend, which overrode Salient’s responsive grid and FA stack.
Font Awesome collision (theme/stack uses FA6, plugin injected another FA; social icons became empty boxes / wrong glyphs).

Solution A:

We have rewritten our WordPress tooltips plugin to address theme conflicts in the following way:

1: Scan every queued / done stylesheet (handle + scr) for any bootstrap string / font-awesome string

2: If a theme or another plugin has already enqueued it, the routine bails out immediately, wordpress tooltips plugin will not load bootstrap / font-awesome packages.

3: Otherwise wordpress tooltips plugin itself loads the bootstrap / font-awesome packages

Our code looks like this::

$enableBootstrapCSS = get_option(‘enableBootstrapCSS’);
if ($enableBootstrapCSS == ‘NO’)
{

}
else
{

global $wp_styles;
$bs_handles = array(
‘bootstrap’,
‘bootstrap-css’,
‘bootstrap-style’,
‘bootstrap5’,
‘bootstrap-5’,
‘bootstrap4’,
‘bootstrap-4’,
‘tb-bootstrap’,
‘theme-bootstrap’,
‘font-enableBootstrapCSS’,
‘enableBootstrapCSS’,
);
foreach ( $bs_handles as $hdl ) {
if ( wp_style_is( $hdl, ‘registered’ ) || wp_style_is( $hdl, ‘done’ ) ) {
return;
}
}

$needles = array( ‘bootstrap’, ‘bootstrap.min.css’ );
foreach ( array_merge( $wp_styles->done, $wp_styles->queue ) as $done_or_queued ) {
$obj = $wp_styles->registered[ $done_or_queued ] ?? false;
if ( ! $obj ) {
continue;
}
$src = $obj->src ?? ”;
foreach ( $needles as $n ) {
if ( stripos( $src, $n ) !== false ) {
return;
}
}
}

wp_enqueue_script(‘bootstrap’, plugin_dir_url( __FILE__ ) . ‘js/bootstrap/bootstrap.min.js’, array(‘jquery’), ‘5.0’, true);

Next feature request:

Tooltips overflow on mobile (tooltip box ran off the viewport near the edges; arrow also clipped over content).

What I did to make it stable
A) Stopped plugin CSS that shouldn’t load on the frontend
I dequeue/deregistered only the Tooltips assets that cause conflicts (admin.css, ionRangeSlider skin, bootstrap/awesome/reset). Minimal, targeted snippet:

Solution B:

We have thoroughly reviewed the code in the wordpress tooltips plugin. In previous versions, we only loaded admin.css and the ionRangeSlider skin in the admin area, ensuring that they are not loaded on the front end. The code is structured as follows:

add_action(‘admin_head’, ‘tooltips_pro_admin_css’);

add_action(‘admin_head’, ‘tooltips_admin_rangeslider_css_js’);

Next feature request:
B) Loaded FA6 exactly once (no duplicate FA on frontend)
This resolved the icon issues (including old fa fa-* classes thanks to v4-shims).

Solution C:

This issue has been resolved in Solution A section

Feature request:
What would help if you implement it in the plugin

Asset isolation / options

Don’t enqueue admin CSS on the frontend (if ( is_admin() ) guards).
Done

Make Bootstrap/Font Awesome optional (off by default). Provide 3 choices in settings:
> a) Don’t load any icon set (use theme’s),
> b) Load FA6 (core/brands/solid),
> c) Legacy shim only for old fa fa-*.
Done , you are using FA6.5, wordpress tooltips using FA6.4

Avoid loading ionRangeSlider styles on frontend unless a slider is actually rendered.
Done

Namespace & scope CSS
Prefix all plugin selectors under a unique root (e.g., .tooltips-pro …) and avoid generic selectors like .row, .col, .btn, i, .icon, strong globally.
Done, we never use generic selectors like .row, .col, .btn, i, .icon, strong globally.

If you must style Bootstrap-like classes, scope them: .tooltips-pro .btn { … } not .btn { … }.
Done

Load only when needed
Enqueue frontend assets only if a tooltip is actually present on the page (shortcode/content scan or server-side flag).

Because wordpess tooltips plugin support many kinds of tooltips effect, for example, tooltips for menu item, use image ALT as image tooltips , tooltips for contact form fields…etc, actually now tooltips works for any element in a page…, because we have no way know how users using tooltips in a wordpress page, currently, we cannot find a solution for this feature request, sorry.

Font Awesome compatibility
If you ship FA, please use FA6 and document the stack; avoid injecting an older FA alongside FA6 to prevent glyph mismatches. Consider inline SVG for your UI icons to avoid any FA dependency at all.
Done , you are using FA6.5, wordpress tooltips using FA6.4

Thanks for the great suggestions, if you have any more feature request, please don’t hesitate to contact us, we are very happy to realize it for you 🙂

Thanks, have a blessed day with your family 🙂

Best Regards,

WordPress Tooltips Plugin Support