Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Use popovers for information on demand

Monday, June 15th, 2015 by Servage

popoverPopovers are a neat visual element for web apps, which enables you to highlight certain functionality or provide on-screen instructions like tutorials. There are a wide range of usefull popover applications which may enhance your site. Consider the following variations:

  • Help / Question icon located next to form fields or buttons. On click or hover, the icon triggers a popover which explains the purpose of the field or button in more detail.
  • Upon detecting an invalid field after a form submission , a popover is used to explain the validation error for the specific field.
  • On pageload a popover is used to highlight a specific feature by opening autotmatically, thus directing the user’s attention to itself.
  • Popovers can be used as a tutorial by toggling them in a series of steps attached to multiple elements one by one to guide the user through the functionality of a page, or to explain a series of steps.

There are numerous advantageous usecases for popovers. Just remember that a popover is a rather intrusive element, as it will likely steal away the user’s attention immediately. Therefore use it with caution. If you just want to display information, but not necessarely control the attention, then maybe a different type of element is a better choice.

Creating a popover with Bootstrap

Popovers are native in Bootstrap and can be created easily. The most simple popovers attach to for example a button via data attributes. See the example code below:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Popover content...">
  Popover opens up on right
</button>

You can see above how the button gets a data-toggle value to tell Bootstrap you want to add a popover on toggle. Furthermore the title and text values for the popover are also added via data attributes.

Controlling a popover with Javascript.

You can control your popover via Javascript, which may be needed for some usecases (for example if your are building a tutorial, where a series of popovers need to be displayed after each other). In that case you may want to trigger the first popover from a “Start Tutorial” button the user can click, whereafter dimissing each popover – or clicking a “next” button – should close the current popover and display the next one. Furthermore you may wish to always have a “Stop Tutorial” button available.

// Toggle the poopover
// You can also specifically show or hide it like the examples further below
$('#element').popover('toggle');

// Show the popover
$('#element').popover('show');

// Hide the popover
$('#element').popover('hide');

Customize the popover design

Bootstrap comes with default design and styling for popovers which looks quite nice. However, you should always consider customizing the design to fit your site better. Otherwise elements quickly look put together a bit hastily, if you use too much of the default Bootstrap design mixed with some custom theming. Fortunately there are quite a few nice tools available to generaly design your own Bootstrap theme, which makes it look and feel a lot more native to your website. This will be covered in a later article.

Use popovers for information on demand, 4.8 out of 5 based on 4 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.