从工具提示中删除HTML元素。

huangapple
go评论95阅读模式
英文:

Removing the HTML elements from the tooltip

问题

以下是您提供的HTML代码的翻译，其中已经删除了HTML标记：

  1. <div class="row " id="record_block" style='margin-left:4px;margin-top:20px'>
  2.     @foreach ($infomodel as $applicant)
  3.     <div class="col-md-4 col-lg-4 col-xlg-4 mb-3">
  4.         <div class="card card-body" style="background: #ebefff;">
  5.             <div class="row">
  6.                 <div class="col-md-4 col-lg-3 text-center">
  7.                     <a href="app-contact-detail.html">
  8.                         <img src="storage/image/<?php echo $applicant['photo_filename'];?>" alt="user" style="width: 85px; height: 80px;" class="img-circle img-responsive">
  9.                     </a>
  10.                 </div>
  11.                 <div class="col-md-8 col-lg-9">
  12.                     <h5>
  13.                         <span style="z-index: 0;">
  14.                             <span data-toggle="tooltip" data-placement="top" data-original-title="" style="background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;">
  15.                                 {{ Str::limit($applicant->last_name . ', ' . $applicant->first_name . ' ' . $applicant->middle_name, 17) }}
  16.                                 <i class="flag-icon flag-icon-af" title=""></i><br>
  17.                                 <i>Doctor of Medicine</i><br>
  18.                             </span>
  19.                             <span class='tooltip-content' style="display: none;">
  20.                                 <span style="margin-left: 15px;">
  21.                                     <u><b>Fullname: {!! $applicant->last_name!!}, {!! $applicant->first_name!!} {!! $applicant->middle_name!!}</b></u><br/>
  22.                                     Birthdate: {!! $applicant->birthdate !!}<br/>
  23.                                     Country: {{ $applicant->country_name }}<br>
  24.                                     Gender/CS: {!! $applicant->gender !!}/Single<br>
  25.                                     Cellphone: <br>{!! $applicant?->country_code !!}{!! $applicant?->area_code !!}{!! $applicant?->tel_no !!}<br>
  26.                                     Email:{{ $applicant?->email }}<br>
  27.                                     Application ID:{!! $applicant?->app_id !!}<br>
  28.                                     Date Last Updated: {!! $applicant->date_updated !!}
  29.                                 </span> 
  30.                             </span>
  31.                         </span>
  32.                     </h5> 
  33.                 </div>
  34.             </div>
  35.             <div class="row">
  36.                 <div class="col-md-8 col-lg-12">
  37.                     <address style="color: black; margin-left: 10px;">
  38.                         <abbr title="Email Address">Email:</abbr> <b>{{ $applicant?->email }}</b><br>
  39.                         <abbr title="Cellphone">Cellphone:</abbr> <b>{!! $applicant?->country_code !!}{!! $applicant?->area_code !!}{!! $applicant?->tel_no !!}</b><br>
  40.                         <abbr title="Application ID">Application ID:</abbr> <b>#{!! $applicant?->app_id !!}</b><br>
  41.                         <div style="height: 8px;"></div>
  42.                         <button type="button" class="btn btn-rounded btn-outline-primary" style="position: relative; z-index: 0;" title="Click to Manage" onclick="location.replace('manage_applicant-set_sessionvars.php?lnk=fi&purpose=2&a=2716');">
  43.                             <i class="fa fa-address-card-o"></i> Manage
  44.                         </button>	
  45.                     </address>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     </div>
  50.     @endforeach
  51. </div>

请注意，我已经将HTML标签从文本中删除，只保留了文本内容。

英文:

How can i remove the html tags because whenever i hover my house to a specific part, the data will be displayed but the html tags were also included. maybe theres something that needs to be changed.

html snippet

  1. &lt;div class=&quot;row &quot; id=&quot;record_block&quot; style=&#39;margin-left:4px;margin-top:20px&#39;&gt;
  2. @foreach ($infomodel as $applicant)
  3. &lt;div class=&quot;col-md-4 col-lg-4 col-xlg-4 mb-3&quot;&gt;
  4. &lt;div class=&quot;card card-body&quot; style=&quot;background: #ebefff;&quot;&gt;
  5. &lt;div class=&quot;row&quot;&gt;
  6. &lt;div class=&quot;col-md-4 col-lg-3 text-center&quot;&gt;
  7. &lt;a href=&quot;app-contact-detail.html&quot;&gt;
  8. &lt;img src=&quot;storage/image/&lt;?php echo $applicant[&#39;photo_filename&#39;];?&gt;&quot; alt=&quot;user&quot; style=&quot;width: 85px; height: 80px;&quot; class=&quot;img-circle img-responsive&quot;&gt;
  9. &lt;/a&gt;
  10. &lt;/div&gt;
  11. &lt;div class=&quot;col-md-8 col-lg-9&quot;&gt;
  12. &lt;h5&gt;
  13. &lt;span style=&quot;z-index: 0;&quot;&gt;
  14. &lt;span data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; data-original-title=&quot;&quot; style=&quot;background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;&quot;&gt;
  15. {{ Str::limit($applicant-&gt;last_name . &#39;, &#39; . $applicant-&gt;first_name . &#39; &#39; . $applicant-&gt;middle_name, 17) }}
  16. &lt;i class=&quot;flag-icon flag-icon-af&quot; title=&quot;&quot;&gt;&lt;/i&gt;&lt;br&gt;
  17. &lt;i&gt;Doctor of Medicine&lt;/i&gt;&lt;br&gt;
  18. &lt;/span&gt;
  19. &lt;span class=&#39;tooltip-content&#39; style=&quot;display: none;&quot;&gt;
  20. &lt;span style=&quot;margin-left: 15px;&quot;&gt;
  21. &lt;u&gt;&lt;b&gt;Fullname: {!! $applicant-&gt;last_name!!}, {!! $applicant-&gt;first_name!!} {!! $applicant-&gt;middle_name!!}&lt;/b&gt;&lt;/u&gt;&lt;br/&gt;
  22. Birthdate: {!! $applicant-&gt;birthdate !!}&lt;br/&gt;
  23. Country: {{ $applicant-&gt;country_name }}&lt;br&gt;
  24. Gender/CS: {!! $applicant-&gt;gender !!}/Single&lt;br&gt;
  25. Cellphone: &lt;br&gt;{!! $applicant?-&gt;country_code !!}{!! $applicant?-&gt;area_code !!}{!! $applicant?-&gt;tel_no !!}&lt;br&gt;
  26. Email:{{ $applicant?-&gt;email }}&lt;br&gt;
  27. Application ID:{!! $applicant?-&gt;app_id !!}&lt;br&gt;
  28. Date Last Updated: {!! $applicant-&gt;date_updated !!}
  29. &lt;/span&gt; 
  30. &lt;/span&gt;
  31. &lt;/span&gt;
  32. &lt;/h5&gt; 
  33. &lt;/div&gt;
  34. &lt;/div&gt;
  35. &lt;div class=&quot;row&quot;&gt;
  36. &lt;div class=&quot;col-md-8 col-lg-12&quot;&gt;
  37. &lt;address style=&quot;color: black; margin-left: 10px;&quot;&gt;
  38. &lt;abbr title=&quot;Email Address&quot;&gt;Email:&lt;/abbr&gt; &lt;b&gt;{{ $applicant?-&gt;email }}&lt;/b&gt;&lt;br&gt;
  39. &lt;abbr title=&quot;Cellphone&quot;&gt;Cellphone:&lt;/abbr&gt; &lt;b&gt;{!! $applicant?-&gt;country_code !!}{!! $applicant?-&gt;area_code !!}{!! $applicant?-&gt;tel_no !!}&lt;/b&gt;&lt;br&gt;
  40. &lt;abbr title=&quot;Application ID&quot;&gt;Application ID:&lt;/abbr&gt; &lt;b&gt;#{!! $applicant?-&gt;app_id !!}&lt;/b&gt;&lt;br&gt;
  41. &lt;div style=&quot;height: 8px;&quot;&gt;&lt;/div&gt;
  42. &lt;button type=&quot;button&quot; class=&quot;btn btn-rounded btn-outline-primary&quot; style=&quot;position: relative; z-index: 0;&quot; title=&quot;Click to Manage&quot; onclick=&quot;location.replace(&#39;manage_applicant-set_sessionvars.php?lnk=fi&amp;purpose=2&amp;a=2716&#39;);&quot;&gt;&lt;i class=&quot;fa fa-address-card-o&quot;&gt;&lt;/i&gt; Manage&lt;/button&gt;	
  43. &lt;/address&gt;
  44. &lt;/div&gt;
  45. &lt;/div&gt;
  46. &lt;/div&gt;
  47. &lt;/div&gt;
  48. @endforeach
  49. &lt;/div&gt;

screenshot
从工具提示中删除HTML元素。

答案1

得分: 4

将属性data-html=&quot;true&quot;添加到此span：

  1. &lt;span data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; data-original-title=&quot;&quot; style=&quot;background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;&quot; data-html=&quot;true&quot;&gt;

根据文档，它允许在工具提示中使用HTML。

英文:

Add the attribute data-html=&quot;true&quot; to this span :

  1. &lt;span data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; data-original-title=&quot;&quot; style=&quot;background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;&quot;&gt;

As per the documentation, it allows HTML in the tooltip.

huangapple
  • 本文由 发表于 2023年2月16日 16:48:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/75469752.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定