Yii 2.0: Activating Bootstrap 3 Tooltips & Popover for your Yii Site.

33 followers

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;'
]);

Total 5 comments

#18200 report it
Kartik V at 2014/09/25 07:51am
Re: Typos corrected

@rahif thanks these typos have been corrected in the wiki

#18197 report it
rahif at 2014/09/25 03:47am
very easy

missing ; in style after underline Great example, Thanks

#17680 report it
Rohit Suthar at 2014/07/14 06:04am
Coooool

simple code but work great :)..

#17677 report it
Kartik V at 2014/07/14 04:02am
Jquery is needed

@claudio - you must have the JQuery loaded before you call this.

I am now creating all webtips at http://webtips.krajee.com. You may refer to the updated wiki here, which contains detailed instructions.

Basically you need to register AppAsset before you call this script.

#17668 report it
claudio.ferrari at 2014/07/13 07:27pm
Activating error "'undefined' is not a function (evaluating '$("[data-toggle='tooltip']").tooltip()')"

Hello K., I have tried your solution (even in head section and body section POS_READY) but it still doesn't works.

Am I doing something wrong?

Thanks

Leave a comment

Please to leave your comment.

Write new article