How to use tooltip in a for loop-CodePudding

This is the code in the blade file. What I'm trying to do is to display the remaining text of description when the user hovers the mouse on "Hover for full details" however it just repeats the firs value of the first appointment's description.

@foreach ($appointments as $appointment)
      <td >
          Subject: <b>{{ Str::limit($appointment->subject,20,"...") }}</b>  <br>Description: <b>{{Str::limit($appointment->description,10,"...")}}</a></b>
          <span data-tooltip-target="tooltip-default" >>Hover for full Details</span>
          <div id="tooltip-default"  role="tooltip" >
             {{$appointment->description}}
             <div  data-popper-arrow></div>
          </div>
      </td>

This is what I have. It repeats the description of the first record

CodePudding user response：

In your case data-tooltip-target and Id of the target are not unique. This should solve your problem:

@foreach ($appointments as $appointment)
  <td >
      Subject: <b>{{ Str::limit($appointment->subject,20,"...") }}</b>  <br>Description: <b>{{Str::limit($appointment->description,10,"...")}}</a></b>
      <span data-tooltip-target="{{'tooltip-default-'. $appointment->id}}" >>Hover for full Details</span>
      <div id="{{'tooltip-default-'. $appointment->id}}"  role="tooltip" >
         {{$appointment->description}}
         <div  data-popper-arrow></div>
      </div>
  </td>