As YiiBooster includes the (almost always) complete Twitter Bootstrap library, some features of it are always enabled and available for you to use. Most notorious are, of course, the tooltips.

Examples from Twitter Booster docs -no need to rewrite same info

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

Hover over the links below to see tooltips:

Four directions

Usage

Trigger the tooltip via JavaScript:

$('#example').tooltip(options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip('show')

Reveals an element's tooltip.

$('#element').tooltip('show')

.tooltip('hide')

Hides an element's tooltip.

$('#element').tooltip('hide')

.tooltip('toggle')

Toggles an element's tooltip.

$('#element').tooltip('toggle')

.tooltip('destroy')

Hides and destroys an element's tooltip.

$('#element').tooltip('destroy')

Examples

Static popover

Four options are available: top, right, bottom, and left aligned.

<div class="bs-docs-example-popover">
    <div class="popover bottom">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover bottom</h3>

        <div class="popover-content">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                Pellentesque ornare sem lacinia quam
                venenatis vestibulum.</p>
        </div>
    </div>

    <div class="popover right">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover right</h3>

        <div class="popover-content">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                Pellentesque ornare sem lacinia quam
                venenatis vestibulum.</p>
        </div>
    </div>

    <div class="popover top">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover top</h3>

        <div class="popover-content">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                Pellentesque ornare sem lacinia quam
                venenatis vestibulum.</p>
        </div>
    </div>

    <div class="popover left">
        <div class="arrow"></div>
        <h3 class="popover-title">Popover left</h3>

        <div class="popover-content">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam.
                Pellentesque ornare sem lacinia quam
                venenatis vestibulum.</p>
        </div>
    </div>
</div>

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo

$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Top popover',
        'context' => 'primary',
        'htmlOptions' => array(
            'data-title' => 'A Title',
            'data-placement' => 'top',
            'data-content' => "And here's some amazing content. It's very engaging. right?",
            'data-toggle' => 'popover'
        ),
    )
);
echo ' ';
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Left popover',
        'context' => 'danger',
        'htmlOptions' => array(
            'data-title' => 'A Title',
            'data-placement' => 'left',
            'data-content' => "And here's some amazing content. It's very engaging. right?",
            'data-toggle' => 'popover'
        ),
    )
);
echo ' ';
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Bottom popover',
        'context' => 'success',
        'htmlOptions' => array(
            'data-title' => 'A Title',
            'data-placement' => 'bottom',
            'data-content' => "And here's some amazing content. It's very engaging. right?",
            'data-toggle' => 'popover'
        ),
    )
);
echo ' ';
$this->widget(
    'booster.widgets.TbButton',
    array(
        'label' => 'Right popover',
        'context' => 'warning',
        'htmlOptions' => array(
            'data-title' => 'A Title',
            'data-placement' => 'right',
            'data-content' => "And here's some amazing content. It's very engaging. right?",
            'data-toggle' => 'popover'
        ),
    )
);

Example extracted from Twitter Documentation

The subnavigation on the left is a live demo of the affix plugin.

Usage

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

<div data-spy="affix" data-offset-top="200">...</div>

Via JavaScript

Call the affix plugin via JavaScript:

$('#navbar').affix()

Methods

.affix('refresh')

When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

$('[data-spy="affix"]').each(function () {
  $(this).affix('refresh')
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

About transitions good info even if its not part of any component

For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

Use cases

A few examples of the transition plugin:

• Sliding or fading in modals
• Fading out tabs
• Fading out alerts
• Sliding carousel panes