如何在jQuery工具提示中修飾Laravel雄辯的信息？

Question

我想在工具提示上修飾雄辯的信息。 因此，在此代碼中，一個“事件”可以有多個“參與者”。 而且他們雄辯地聯系在一起。 因此，我可以在以下代碼中顯示“日期”，“名稱”。 但是問題是我想使用HTML或tooltip（）中的其他屬性來裝飾它； 功能。

我試圖從public / foojquery.js調用它，但是我認為它不符合MVC模式。 $event->participants->pluck('date', 'name) ，我嘗試在模型中定義$event->participants->pluck('date', 'name)並調用它，以某種方式失敗。

的PHP

public function index(): View
{
        $detail = Event::with('participants')->get();
        return view('events.index', compact('detail'));
}

Java腳本

 function showTooltips(self){ // I cannot call the eloquent here.
    $(this).hover(function(){
        $('[data-toggle="tooltip"]').tooltip({
            content: function(){
                return $(this).prop('title');
            track: true
            }
        });
    });
} 

的HTML

// View file

    <tbody id="EL">
        @foreach($detail as $event)
<td><a href="{{ route('participants.create', $event->id) }}"
    data-toggle="tooltip" data-html="true" title="
        {{ $event->participants->pluck('date', 'name') }}<br>
    "> {{ $event->title }} </a></td>

工具提示顯示的內容：

{"participant1":"2019-03-02","participant2":"2019-03-04"}

我想做什么 ：

 1. participant1: 2019-03-02 
 2. participant2: 2019-03-04

+此代碼也無法正常工作；（（未顯示工具提示）

<td class="td"><a href="{{ route('participants.create', $event->id) }}"
                    data-toggle="tooltip" data-html="true" data-container="body" data-content="
                    <ul>
                    @foreach ($datas as $key => $value)
                      <li>{{$key}} : {{$value}}</li>
                    @endforeach
                    </ul>
                        {{-- {{ $event->participants->pluck('date', 'name') }}<br> --}}
                    "> {{ $event->title }} </a></td>

Answer 1

您可以使用data-content content在工具提示中添加html內容。

@php
   $datas = $event->participants->pluck('date', 'name');
@endphp
<a href="{{ route('participants.create', $event->id) }}"
data-toggle="tooltip" data-html="true" data-container="body" data-content="
    <ul>
    @foreach ($datas as $data)
      <li>{{$data->name}} : {{$data->date}}</li>
    @endforeach
    </ul>
"> {{ $event->title }} </a>

在腳本中，您只想初始化工具提示。
試試這個代碼