Search code examples
phplaraveltooltiplaravel-10yajra-datatable

Bootstrap (Vuexy template) Tooltip style won't work on html inside php file laravel

I am using laravel with Vuexy template and yajra datatable. Everything work fine until i tried adding an tooltip inside a table. The tooltip is written in a function that return HTML inside DatatableHelper.php, i call that function in datatabels file to loop it as a column, but unfortunately the tooltip style wont work as i displayed in the image below. But when i write the tooltip directly inside a blade file it work just fine.

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.php

    ->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.php

 <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 imports

  {{-- 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/[email protected]/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>

Inside table and returned by datatablehelper.php file

tooltip not work

Outside table and directly inside blade file

tooltip work

Thanks in advance :D

Solution

  • I alredy figure this out after browsing for a while, so basically i need to trigger the tooltip when rendering the datatables, so i add a few code inside drawCallback parameter,

    // enable tooltip
const tooltipTriggerList = document.querySelectorAll('[data-popup="tooltip-custom"]')
or (const tooltipTrigger of tooltipTriggerList) {
    new bootstrap.Tooltip(tooltipTrigger);
}

    so the tooltip is triggered every table draw