Bootstrap (шаблон Vuexy). Стиль всплывающей подсказки не работает в html внутри файла php laravel

Я использую laravel с шаблоном Vuexy и таблицей данных yajra. Все работало нормально, пока я не попробовал добавить всплывающую подсказку внутри таблицы. Всплывающая подсказка написана в функции, которая возвращает HTML внутри DatatableHelper.php. Я вызываю эту функцию в файле datatabels, чтобы зациклить ее как столбец, но, к сожалению, стиль всплывающей подсказки не будет работать, как показано на изображении ниже. Но когда я пишу всплывающую подсказку непосредственно внутри блейд-файла, она работает нормально.

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;
}

Таблица данных.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);
    })

лезвие.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

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

Внутри таблицы и возвращается файлом datatablehelper.php.

Внешний стол и непосредственно внутри блейд-файла

Заранее спасибо

php laravel tooltip laravel-10 yajra-datatable

15.03.2024 09:15

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я уже понял это после некоторого просмотра, поэтому мне нужно активировать всплывающую подсказку при рендеринге таблиц данных, поэтому я добавляю несколько кода в параметр drawCallback,

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

поэтому всплывающая подсказка активируется при каждом рисовании таблицы

15.03.2024 15:20

Другие вопросы по теме

'/api/broadcasting/auth' 403 Запрещено

Пытаетесь отключить новые строки родительского кода vscode, но не можете?

Laravel 9, неопределенная переменная $users

В Laravel, если я сохраню что-то с помощью session->put(), будет ли эта информация доступна клиентскому браузеру?

Laravel 10, как использовать метод ссылок для разбивки на страницы?

Модальное окно событий диспетчеризации Livewire с динамическим содержимым

Как проверить больше или меньше, чем в месяце, Php, приложении Laravel

Цикл foreach в Laravel через массив в Blade

Обновление таблицы данных и разбиение на страницы

Использование Laravel Livewire и попытка отобразить кнопку сохранения и кнопку отмены при нажатии ячейки

Bootstrap (шаблон Vuexy). Стиль всплывающей подсказки не работает в html внутри файла php laravel

Ответы 1

Другие вопросы по теме

Похожие вопросы