Yii2 - How to add JQuery tooltip to GridView with pagination

Question

How do I add a tooltip to column data in a GridView? It works on the first page, but after changing to a different page, the tooltip doesn't work.

Main Layout File:

\yii\web\JqueryAsset::register($this);
\yii\bootstrap\BootstrapPluginAsset::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);

Code from View:

[   'class' => '\kartik\grid\DataColumn',
    'attribute'=>'default_rate_id',
    'value'=>function($data) {
        if(isset($data->rate->code)) {
            return Html::tag('div', $data->rate->code, ['data-toggle'=>'tooltip','data-placement'=>'left','title'=>$data->rate->name,'style'=>'cursor:default;']);
        } else {
            return '';
        }
    },
    'width' => '60px',
    'filterType'=>GridView::FILTER_SELECT2,
    'filterWidgetOptions'=>[
        'pluginOptions' =>['allowClear' =>true],
        'data' => $this->listRateCodes(),
    ],
    'filterInputOptions' =>['placeholder' =>' '],
    'format'=>'raw',
],

Solution:

Thanks to @arogachev, I have updated the appropriate section in the Main Layout File to be as follows. The tooltips now show on every page of the GridView.

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

score 5 · Accepted Answer · edited May 23 '17 at 12:30

This happens because in this case content of GridView is dynamic and changed with each AJAX request. On first page load it works because nothing has changed yet, but once content gets changed it doesn't.

Solution is to change the way of specifying tooltips with jQuery:

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});

See these related questions:

Yii2 - How to add JQuery tooltip to GridView with pagination

1 Answers1