Replicate font awesome icons and tooltips in a pricing table like the BB site

Beaver Builder
1

Hi there,

Could you let me know how to replicate the Beaver Builder pricing table please - specifically the use of fontawesome icons and the neat little tooltips (?) that overly more info on certain features?

Thanks,
Lee

2

Hi Lee! Are you using the Beaver Builder theme? If so, you can copy/paste this code into the features list of your pricing table module:

<i class="fa fa-check" style="color: #50c013; font-size: 22px;"></i> <strong>Unlimited</strong> Sites

We’re planning to build this functionality into the pricing table module soon! Let me know if it works for you.

3

Thanks for the fast reply Robby, much appreciated.

I’m using the X Theme but tried adding that code anyway…and it destroyed that section of the table :frowning:

It basically didn’t work as intended, and when I went to edit that section of the pricing table to remove that feature line most of the fields I entered (title, price, list of features) had disappeared. They remained visible on the front end of the site, but were not visible in the page builder.

If you have any other suggestions for non-BB themes that would be great.

The second half of my question was about the tooltip overlay - how can I create tooltip overlays as you have on your own pricing table, triggered by clicking the question mark on some of the features?

I thought they might be an option in the modules somewhere but can’t find them.

Thanks,
Lee

4

Oh no! Sorry, Lee. I am not sure why that code affected the rest of the content!? The reason this doesn’t work on the X theme is because the Font Awesome icon library isn’t being loaded. It’s loaded on every page with the Beaver Builder theme. Again, we are planning to add this as a feature in the pricing table module. We’ll try to get an update out soon for you.

Depending on your comfort level with working with the code in your theme, you could enqueue the Font Awesome library in X theme. Then you’d be able to use the code I referenced.

5

Thanks Robby.

You’re still missing the second part of my question though!

How do I achieve the popover/info boxes you have on your pricing table that overlay additional feature detail when clicked?

6

Oh shoot! Sorry. Tunnel vision, haha.

We’re using a jQuery library called qTip to generate the tooltips: http://qtip1.com/

You’ll need to write some custom code to do this, but if you follow their documentation, it shouldn’t be too tricky. It looks like they released a new version of this library, too: http://qtip2.com/ – You might want to give the new version a try!

7

[Content Hidden]

8

Hi Jason. No, sorry, it hasn’t yet. It’s still on the roadmap, though!

9

I’ve managed to get the qtip tooltips working on my BB pricing table, I’m pleased with them though they are not quite as pretty as yours are, on the official BB pricing table.

I used this plugin
https://wordpress.org/plugins/wp-jquery-qtip/

The only problem is that it makes fancy breakout tooltips for every link title on the whole website - I don’t know how to make it work for the pricing table only. For my website it isn’t an issue - I just won’t put titles on the links.

Cheers

10

Hi Robin! Nice locks! :slight_smile:

Thanks for sharing that plugin. Seems like there’s got to be a way to restrict the tips to certain links, but as long as you have a solution that works!