Yii2 - 如何使用分页将 JQuery 工具提示添加到 GridView答案

【问题标题】：Yii2 - How to add JQuery tooltip to GridView with paginationYii2 - 如何使用分页将 JQuery 工具提示添加到 GridView
【发布时间】：2015-03-24 15:23:14
【问题描述】：

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

主布局文件：

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

视图中的代码：

[   '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 的每个页面上。

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

【问题讨论】：

标签： jquery gridview yii2

【解决方案1】：

发生这种情况是因为在这种情况下GridView 的内容是动态的，并且随着每个AJAX 请求而改变。在第一页加载时它可以工作，因为还没有任何改变，但是一旦内容被改变它就不会。

解决办法是用jQuery改变指定工具提示的方式：

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

查看这些相关问题：

【讨论】：