如何在jQuery工具提示中装饰Laravel Eloquent信息?

Question

我想在工具提示上装饰雄辩的信息。因此，在此代码中，一个"事件"可以有多个"参与者"。他们雄辩地联系在一起。所以我可以在下面的代码中显示"日期"，"名称"。 但问题是我想使用 HTML 或使用 tooltip(( 中的其他属性来装饰它;功能。

我试图从 public/foojquery.js 调用它，但我认为它超出了 MVC 模式。换句话说，我尝试在模型中定义$event->participants->pluck('date', 'name)并调用它，但不知何故它失败了。

.php

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

爪哇语

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在工具提示中添加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>

在脚本中，您只想初始化工具提示。
试试这个代码