Laravel中Vuexy模板Tooltip在Yajra DataTable内样式失效求助

在Laravel项目中使用Vuexy模板与Yajra DataTable，此前功能正常。通过DataTableHelper.php生成带Tooltip的HTML并在DataTable中作为列返回时，Tooltip样式失效；但将相同Tooltip代码直接写在Blade文件中时显示正常。

DatatableHelper.php代码 #

public static function promotors($promotors){
    $html = '<ul class="list-unstyled avatar-group d-flex align-items-center">';
    foreach ($promotors as $promotor) {
    $html .= <<<HTML
        <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="{$promotor->nama}" class="avatar pull-up">
            <img class="rounded-circle" src="{$promotor->url}" alt="Avatar" onerror="onImageError(this);">
        </li>
    HTML;
    }

    $html .= '</ul>';

    return $html;
}

DataTable列配置代码 #

->editColumn('promotor', function ($data) {
    $promotor_ids = [$data->promotor_id, $data->co_promotor1_id, $data->co_promotor2_id];
    $promotors = [];

    foreach ($promotor_ids as $id) {
        $promotor = new \stdClass();
        $dosen = Dosen::select('nama', 'no_induk')->where('id', $id)->first();
        $promotor->nama = $dosen->nama;
        $promotor->url = UserHelper::getDosenPicture($dosen->no_induk);
        $promotors[] = $promotor;
    }

        return DataTableHelper::promotors($promotors);
    })

Blade文件中的Tooltip代码 #

<ul class="list-unstyled avatar-group d-flex align-items-center">
  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy"
    class="avatar pull-up">
    <img class="rounded-circle" src="https://ui-avatars.com/api/?name=John Dosen&color=7F9CF5&background=EBF4FF" alt="Avatar">
  </li>
  <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy"
    class="avatar pull-up">
    <img class="rounded-circle" src="https://ui-avatars.com/api/?name=John Dosen&color=7F9CF5&background=EBF4FF" alt="Avatar">
  </li>
  </ul>

CSS & JS 引入代码 #

{{-- core css --}}
  <link rel="stylesheet" href="{{ url('/assets/vendor/css/core.css') }}" class="template-customizer-core-css" />
  <link rel="stylesheet" href="{{ url('/assets/vendor/css/theme-default.css') }}"
    class="template-customizer-core-css" />
  <link rel="stylesheet" href="{{ url('/assets/css/demo.css') }}" />


<script src="{{ url('/assets/vendor/libs/jquery/jquery.js') }}"></script>
<script src="{{ url('/assets/vendor/libs/popper/popper.js') }}"></script>
<script src="{{ url('/assets/vendor/js/bootstrap.js') }}"></script>
<script src="{{ url('/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js') }}"></script>
<script src="{{ url('/assets/vendor/libs/hammer/hammer.js') }}"></script>
<script src="{{ url('/assets/vendor/libs/node-waves/node-waves.js') }}"></script>
<script src="{{ url("/vendor/datatables/media/js/jquery.dataTables.min.js") }}"></script>
<script src="{{ url("assets/vendor/libs/sweetalert2/sweetalert2.js") }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ url('/assets/vendor/js/menu.js') }}"></script>
<script src="{{ url('/assets/js/axios.min.js') }}"></script>
<script src="{{ url('/assets/js/main.js') }}"></script>

效果对比 #

• 表格内（DataTableHelper生成）Tooltip：
• Blade直接编写Tooltip：

解决方案 #

1. 关闭DataTable对HTML列的转义 #

Yajra DataTable默认会转义列中的HTML内容，导致Tooltip的属性无法正常识别。需要在DataTable配置中指定rawColumns，让promotor列保留原始HTML：

// 在你的DataTable构建代码末尾添加
->rawColumns(['promotor'])

2. 重新初始化Tooltip组件 #

DataTable异步加载数据时，动态生成的DOM不会被Vuexy的初始化脚本自动处理，需要在DataTable的drawCallback回调中手动重新初始化Tooltip：

在页面的DataTable初始化JS代码中添加：

$('#your-table-id').DataTable({
    // 其他已有配置
    drawCallback: function(settings) {
        // 销毁已存在的Tooltip实例，避免重复初始化
        $('[data-bs-toggle="tooltip"]').tooltip('dispose');
        // 重新初始化Vuexy自定义Tooltip
        $('[data-bs-toggle="tooltip"][data-popup="tooltip-custom"]').tooltip({
            template: '<div class="tooltip tooltip-custom" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
        });
    }
});

原因说明 #

• Blade中的静态DOM在页面加载时会被Vuexy的main.js等初始化脚本处理，Tooltip组件会被正确初始化。
• DataTable动态生成的DOM是在页面加载完成后插入的，无法触发初始的Tooltip初始化逻辑，因此需要手动重新初始化。
• 若未设置rawColumns，DataTable会将HTML内容转义为纯文本，Tooltip的属性会失效，导致样式异常。

内容的提问来源于stack exchange，提问作者Alvalen Shafel