关于Yii2：Yii2 – 如何使用分页将JQuery工具提示添加到GridView

Yii2 - How to add JQuery tooltip to GridView with pagination

如何向GridView中的列数据添加工具提示？它在第一页上工作，但在更改为其他页后，工具提示不工作。

主布局文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

\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);

代码来自视图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[ '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',
],

解决方案：

多亏了@arogachev，我更新了主布局文件中的相应部分，如下所示。工具提示现在显示在GridView的每一页上。

1
2
3
4
5
6
7
8

$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);

这是因为在这种情况下，GridView的内容是动态的，并随每个AJAX请求而更改。在第一个页面上加载它是有效的，因为还没有什么改变，但是一旦内容改变了，它就不会改变。

解决方案是用jQuery更改指定工具提示的方式：

1
2
3

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

请参阅以下相关问题：

如何将Twitter引导工具提示绑定到动态创建的元素？
如何在动态元素上绑定引导工具提示