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


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?


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 () { 
/* To initialize BS3 popovers set this below */
$(function () { 
// Register tooltip/popover initialization javascript

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


// 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',
    'style'=>'text-decoration: underline; cursor:pointer;'


// 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-content'=>'This is the content for the popover',
    'style'=>'text-decoration: underline; cursor:pointer;'

Total 7 comments

#19968 report it
saebaryo at 2016/10/31 07:55pm
Re: Position of tooltip

you can add


for tooltip on right, etc

#19861 report it
Muhammad Shahzad at 2016/05/19 05:16am
Position of tooltip

How I can change tooltip position? like if I want it to right, left or bottom?

#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

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?


Leave a comment

Please to leave your comment.

Write new article