Activating Bootstrap 3 Tooltips & Popover for your Yii Site.

You are viewing revision #10 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#9)next (#11) »

  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?


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