Activating Bootstrap 3 Tooltip & Popover for your Yii Site

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, tooltip 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 Jquery is loaded. Note: Its important that you load the JqueryAsset bundle before this. For example, place this after the AppAsset register command.

AppAsset::register($this);
$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;'
]);

4 thoughts on “Activating Bootstrap 3 Tooltip & Popover for your Yii Site

  1. Hi K.,
    it works only if you render Yii Navbar (that register JqueryAsset); if you comment the navbar section it fails.
    So, for example, if you have a theme with your own navbar that doesn’t use yii\bootstrap\NavBar there’s a problem activating bootstrap tooltip/popover.

    Any ideas ?

    Thanks for your prompt answer !

  2. @claudio you need to register JqueryAsset implicitly then. Normally if you are using the yii advanced app, this is already a part of the AppAsset. If you check the instructions in this article, you can call AppAsset::register($this) before this script. If you are not doing that – you can implicitly register JqueryAsset by setting \yii\web\JqueryAsset::register($this) before the script.

  3. @kartik solved by adding to MyThemeAssets dependencies :
    ‘yii\bootstrap\BootstrapPluginAsset’,

Comments are closed.