Master Twitter Bootstrap using WordPress Shortcodes, Part 6: Popovers

by Paul on December 7, 2011

Twitter Bootstrap PopoverIn 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:

TBS_POPOVER

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:

  • class="class1 class2"
  • id="mySpecialPopoverID"
  • style="CSS:value"

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: leftabove | below | right

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.

In light of this, since Popovers need Javascript to run you must first include the necessary Javascript library. To do this:

  • 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.
Note: popover.js requires twipsy.js so when you include the popover javascript library, it will automatically include the twipsy.

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 1 comment… read it below or add one }

Adam February 20, 2014 at 4:36 pm

Hi there,

I was wondering if its possible to add a carousel within the content of the pop-over, or is it only text?

Reply

Leave a Comment

Previous post:

Next post: