1. Problem Statement
2. Solution

Problem Statement ¶

With Bootstrap 3 and its inbuilt support in Yii Framework 2.0, you would see quite some new ways of creating HTML markup and styling your site. However, with version 3 of Bootstrap, tooltips and popover are not activated by default on your elements. Assuming you have activated the Bootstrap 3 tooltip plugin - how do you easily enable display of tooltips/popovers across your site?

Solution ¶

There is no one single way to do this. However a simple way that I found to activate Bootstrap tooltips and popovers across my site was to set this up in the view layout file. Unlike previous Bootstrap 2.x version, where tooltips were auto-initialized on the <a> element using the rel attribute, you can initialize Bootstrap 3 tooltips on any element. An approach I suggest, is to use some data attributes:

Step 1: Initialize the Bootstrap Tooltip & Popover plugins in your view layout file @web\views\layouts\main.php. Add this to somewhere in the beginning head section (after you have loaded the Jquery using your AppAsset or something similar).

$js = <<< 'SCRIPT'
/* To initialize BS3 tooltips set this below */
$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});;
/* To initialize BS3 popovers set this below */
$(function () { 
    $("[data-toggle='popover']").popover(); 
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);

Step 2: Now, with the plugins initialized you can call these tooltips or popovers anywhere in your view, widgets or display code this way:

Tooltips ¶

// can use any tag/element. example for the span
// element (set the title or data-title attribute 
// to type in tooltip content)
echo 'Testing for ' . Html::tag('span', 'tooltip', [
    'title'=>'This is a test tooltip',
    'data-toggle'=>'tooltip',
    'style'=>'text-decoration: underline; cursor:pointer;'
]);

Popovers ¶

// can use any tag/element. example for the span
// element (set the title or data-title attribute 
// for popover title and the data-content attribute
// for the popover content)
echo 'Testing for ' . Html::tag('span', 'popover', [
    'data-title'=>'Heading',
    'data-content'=>'This is the content for the popover',
    'data-toggle'=>'popover',
    'style'=>'text-decoration: underline; cursor:pointer;'
]);