In the previous article we looked at the Twitter Bootstrap Twipsy shortcode. It’s great for adding an additional piece of information, in a neat and subtle manner.
In this article we’re going to see how to use Twitter Bootstrap Popovers to create cool popover effects that look great and don’t detract from your site.
Using Twitter Bootstrap Popovers
The shortcode to place a Popover on your page or post is:
The following line of text, when placed in a WordPress page or post…
[TBS_POPOVER title="Popover Title" content="Cool, interesting popover content to expand your mind" style="text-decoration:underline"][/TBS_POPOVER]
will produce the following popover text:
hover over me – the text containing the popover
As you can see, it’s almost too easy now to create a great looking Twitter Bootstrap Popover effect!
You can even try combining shortcodes. See this example, where I create a Bootstrap Popover on a Bootstrap Button:Download the WordPress Bootstrap CSS Plugin!
Parameters for the Twitter Bootstrap Popover Shortcode
The Popover shortcode is identical to the Twipsy Shortcode but for 1 addition: content.
As with the previous shortcodes, the following 3 parameters come as standard:
Twipsy roll-overs require a bit more before they’ll work however. The remaining parameters are:
title: this is the text within the actual roll-over hover effect. This is critical to the whole show. Without this, the Shortcode will not be processed fully.
content: this is the text in the main body of the popover.
placement: this dictates where the rollover will appear. You can choose between:
Requirements to use Twitter Bootstrap Popover Shortcode
In a bid to optimize the WordPress Bootstrap CSS plugin, we try to ensure that your site only loads things that are necessary.
This seems to go against the common trend of WordPress plugin development where the more they load into the page, the better.
- Go to the ‘
Bootstrap CSS‘ menu item from the Host Like Toast menu in WordPress.
- Find the check box labelled ‘
popover.js‘ and check it.
- Save settings.