Master Twitter Bootstrap using WordPress Shortcodes, Part 5: Twipsy Rollovers

by Paul on December 6, 2011

Now the fun with Twitter Bootstrap really begins!

So far we’ve covered:

Next we’re going to show you how to get subtle, unobtrusive roll-over tooltips.

These are useful for web-apps, but you can put them anywhere on your site if you want to add an extra bit of information to something on your site.

Here’s how to use Twitter Bootstrap Twipsy roll-overs using the WordPress Bootstrap CSS plugin.

Twitter Bootstrap Twipsy Shortcode for WordPress

The shortcode to use for the Twipsy function is:

TBS_TWIPSY

The following line of Twipsy shortcode text:

[TBS_TWIPSY placement="above" title="useful rollover information" style="text-decoration:underline"]hover your mouse over me[/TBS_TWIPSY]

with give you the following effect:

Warning: You are using a deprecated shortcode. Please replace your [TBS_TWIPSY] with [TBS_TOOLTIP]

Not bad when you want to draw the user’s attention to more information but without adding too much extra to the page.

Parameters for the Twitter Bootstrap Twipsy Shortcode

As with the previous shortcodes, the following 3 parameters come as standard:

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

Twipsy roll-overs require a bit more before they’ll work however. The remaining parameters are:

  • title : this is the text that you find within the actual roll-over hover effect. This is critical to the whole show. Without this, the Shortcode will not be processed fully.
  • placement : this dictates where the rollover will appear. You can choose between: Warning: You are using a deprecated shortcode. Please replace your [TBS_TWIPSY] with [TBS_TOOLTIP]Warning: You are using a deprecated shortcode. Please replace your [TBS_TWIPSY] with [TBS_TOOLTIP] | Warning: You are using a deprecated shortcode. Please replace your [TBS_TWIPSY] with [TBS_TOOLTIP] | Warning: You are using a deprecated shortcode. Please replace your [TBS_TWIPSY] with [TBS_TOOLTIP]

Requirements to use Twitter Bootstrap Twipsy 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 Twipsy needs 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 ‘twipsy.js‘ and check it.
  • Save settings.

Now you’re ready to use Twitter Bootstrap 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

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: