Nikita240/twitter-bootstrap-contextual-popovers

Bootstrap popovers, with bootstrap contextual colors!

Bootstrap Contextual Popovers

Just your regular twitter-bootstrap popovers, but now with contextual colors!

Installation

You have 2 options. Plain old css, or less.

CSS

Simply download the contextual-popovers.css file and link it in your html.

<link href="bootstrap.css" rel="stylesheet">
<link href="contextual-popovers.css" rel="stylesheet">

NOTE: Make sure you link to the contextual-popovers.css file AFTER bootstrap. Otherwise it will not override the default popover styles.

Less

Download the contextual-popovers.less file and @include it in your less file.

Usage

You can utilize any of the 4 basic bootstrap contexts (the same ones as used by alert):

• popover-success
• popover-info
• popover-warning
• popover-danger

Add one of the four contextual classes (e.g., .popover-success) to the .popover element. The easiest way to do so is with jQuery.

$(document).ready(function() {
    $("button.has-popover").popover()
        .data("bs.popover").tip().addClass("popover-success");
});

The little data attribute is really neat because if you store it, you can change the context class later on, making the popover dynamic.

$(document).ready(function() {
    $popover = $("button.has-popover").popover()
        .data("bs.popover").tip().addClass("popover-success");

    //Change the popover color in 15 seconds
    setTimeout(function() {
        $popover.removeClass("popover-success")
            .addClass("popover-info");
    }, 15000);
});

You can also change the context colors like you would normally with bootstrap. The variables that contextual popovers rely on are:

• @state-success-text
• @state-info-text
• @state-warning-text
• @state-danger-text