Fixing Theme Conflicts with Awesome and Bootstrap in WordPress Tooltips Plugin, how to use font-awesome tooltips – Version 35.8.8 Now Available

Hey, dear  WordPress Tooltip Plugin  users,  I hope this message finds you well and that you are enjoying wonderful days with your family.   We received a ticket from an amazing WordPress Tooltip user who reported a CSS conflict with their theme in the WordPress Tooltips Plugin. Our WordPress developer checked the theme and found that it conflicts with Bootstrap and Font Awesome, which are used by the tooltips, among other things. To resolve the issue for our valued tooltip user, our WordPress Tooltips developer has released a new version: WordPress Tooltips Pro Plus 35.8.8.

1: Resolved the conflict between the theme and the Bootstrap framework included in the WordPress tooltip:

Hi Support Team,
First of all: huge thanks again for the incredibly fast turnaround and the late-night work.
With 35.8.8 almost everything is spot-on on my side:

WooCommerce Orders page → the PHP warnings are gone ✅

Salient → Typography admin panel → no longer broken ✅

Social icons in header/footer → looking good ✅

There’s just one regression that appeared right after updating to 35.8.8:

On the front page the mobile header/hero layout is broken (menu/header block shifts & spacing goes off).

This was already fixed in the previous build, but with 35.8.8 it’s back.

Again, thank you so much for your tireless work and the super-quick responses — I really appreciate how flexible and helpful you are!

Warmly,

We resolve the issue for the tooltip user and we replied:

Hi

I hope this message finds that you are doing well and having happy days with your family 🙂

Sorry for the issue, we checked codes of the theme and our plugin, we also tested this issue across various resolutions and ultimately discovered it was caused by a conflict between Bootstrap and the theme. The solution is straightforward, please open tooltips global settings panel, and disable the option: “Enable / Disable Bootstrap CSS to Avoid Theme Conflicts ? “, on our side, we found all things works well 🙂

Would you please do a test and give us a feedback? If there are any problem, please don’t hesitate to tell us, we will resolve it for you asap we can 🙂

Thanks, have a blessed day with your loved ones 🙂

Best Regards,

WordPress Tooltips Support

2: WooCommerce Orders page: several PHP warnings still appear under the order details section (related to post_type being null):

Done, we have rewrite our codes like this to resolve the issue:

if (isset($post->post_type))
{

if ($post->post_type == ‘tooltips’)
{
add_meta_box(“show_tooltips_excerpt_control_meta_box_id”, __(‘Show excerpt in tooltip pop up?’, ‘wordpress-tooltips’), ‘show_tooltips_excerpt_meta_box’, null, “side”, “high”, null);
}
}

It works well now 🙂

3: Salient Typography panel: the admin interface under Salient → Typography becomes broken and misaligned when WordPress Tooltips Pro is active.

Done, we reviewed the core theme’s code and found it includes a .tooltip class, which conflicts with the .tooltips class in our admin.css file. We have rewrite our wordpress tooltips plugin like this way:

load the admin.css file for the WordPress Tooltips plugin in the wp-admin area only when the current screen belongs to the plugin.

Codes:

if (isset($_GET[‘post_type’]))
{
$tooltips_admin_post_type_check = sanitize_text_field($_GET[‘post_type’]);
if ($tooltips_admin_post_type_check === ‘tooltips’)
{
wp_enqueue_style(‘tooltips_pro_admin_css’, plugin_dir_url(__FILE__) . ‘asset/css/admin/admin.css’);
}
}

It works well now 🙂

4: Social icons: the Font Awesome icons in the menu and footer (social links) still display incorrectly or as empty boxes.

Done, in the salient theme , we found they load their scripts late like this:

add_action( ‘wp_enqueue_scripts’, ‘nectar_enqueue_dynamic_css’, 20 );

We rewrite our plugin to load Font Awesome late to avoid conflicts with other themes or plugins:

add_action( ‘wp_enqueue_scripts’, ‘ttfa_load_font_awesome’ ,10000);

So all codes in salient theme will run first, our coeds last-call font awesome load

Therefore, all code in the salient theme will be executed with priority, and our plugin will finally call Font Awesome to load.

It works well now 🙂

The user’s theme was using Font Awesome 6.5, and our Font Awesome Tooltips were also utilizing Font Awesome 6.4 in WordPress Tooltips Pro Plus 35.8.8. We upgraded the Font Awesome tooltips to use the latest version: Font Awesome 7.1.

What is Font Awesome Tooltips?

Font Awesome Tooltips are a feature that allows developers to create hoverable information boxes or hints using Font Awesome icons, included in wordpress tooltips pro plus version 19.9.8.  These tooltips provide additional context or information about an element on a webpage when a user hovers over it with their cursor.

Key Features of Font Awesome Tooltips:

1. Icons: You can easily incorporate icons from the Font Awesome library into your tooltips, enhancing visual appeal and user experience.
2. Customization: Tooltips can be styled and customized to match the design of your website, allowing for adjustments in color, size, and positioning.
3. Responsiveness: They often adapt well to different screen sizes, making them suitable for both desktop and mobile interfaces.
4. Accessibility: Properly implemented tooltips can improve accessibility by providing additional information without cluttering the UI.
5. JavaScript Support: Many tooltip implementations leverage JavaScript or CSS frameworks (like Bootstrap) to enhance functionality, such as showing and hiding effects.

---

How to Add Font Awesome Tooltips in Your WordPress Post

Creating engaging content in your WordPress posts just got easier with Font Awesome tooltips! Follow these simple steps to enhance your posts with beautiful icons that provide additional information to your readers.

Step 1: Create a New WordPress Post

Start by creating a new post in WordPress. In the editor, simply insert the Font Awesome tooltip shortcode like this:

[ ttfa tooltip_id="13" set="fas" icon="fa-question-circle" size="2x" color="#9ee2c6" ]

This Font Awesome tooltip shortcode will allow you to display a tooltip in your post.

More wordpress tooltips shortcode can be found at our detailed tooltip shortcode document; tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/

Step 2: Preview Your Tooltip

Once you’ve added the shortcode, head over to the front-end of your WordPress post. You’ll see a lovely question circle icon, which looks like this:

When users hover over the question circle, a tooltip popup will appear, providing more details:

Step 3: Customize Your Tooltip

You have the flexibility to customize the size and color of your Font Awesome icons. For instance, if you want to make the question circle icon larger, simply change the size parameter from 2x to 3x, 4x, or even larger! Here’s an example:

To change the color, modify the color parameter to any hex value you prefer, such as #cccccc or #eeeeee.

Step 4: Choose Your Icon Style

You can also adjust the style of your Font Awesome tooltip by changing the set parameter:

• fas — Solid icons
• far — Regular icons
• fab — Brand icons

Quick Summary of What You Need to Know:

• tooltip_id: This is the ID of the tooltip you created in the WordPress tooltip editor.
• set: Choose between solid (fas), regular (far), or brand (fab) icons.
• icon: We used the question-circle icon, but remember, there are over 1,588 stunning icons available for you to choose from!
• size: Feel free to increase the size to 3x, 4x, etc., based on your design preference.
• color: Customize the color to match your site, such as #eeeeee.

Now you’re all set to enhance your WordPress posts with delightful Font Awesome tooltips! Happy blogging!

Conclusion:

Font Awesome includes over 1,500 high-quality icons that can be customized in terms of size, color, and style using CSS. These icons are designed to be cross-browser compatible. Font Awesome Tooltips are a useful component for improving user interaction and providing helpful information in a visually appealing way on web pages.

 

If anything need us to change, please don’t hesitate to tell us, we will try our best to complete it asap we can(It is our 01:52Am).

If all things works well, please change the access of your test site, we never logged in your account, for protect your private data and personal information 🙂

Thanks, have a blessed day with your loved ones 🙂

Best Regards,

WordPress Tooltips Support