如何移除Tooltip中的HTML标签？解决悬浮提示显示标签问题

鼠标悬停在页面特定区域时，Tooltip（悬浮提示框）展示的数据中包含HTML标签，需要移除这些标签。

HTML代码片段

<div class="row " id="record_block" style='margin-left:4px;margin-top:20px'>
    @foreach ($infomodel as $applicant)
        <div class="col-md-4 col-lg-4 col-xlg-4 mb-3">
            <div class="card card-body" style="background: #ebefff;">
                <div class="row">
                    <div class="col-md-4 col-lg-3 text-center">
                        <a href="app-contact-detail.html">
                            <img src="storage/image/<?php echo $applicant['photo_filename'];?>" alt="user" style="width: 85px; height: 80px;" class="img-circle img-responsive">
                        </a>
                    </div>
                    <div class="col-md-8 col-lg-9">
                        <h5>
                            <span style="z-index: 0;">
                                <span data-toggle="tooltip" data-placement="top" data-original-title="" style="background: transparent; color: #0b719c; margin-left: 0px; z-index: 0;">
                                    {{ Str::limit($applicant->last_name . ', ' . $applicant->first_name . ' ' . $applicant->middle_name, 17) }}
                                    <i class="flag-icon flag-icon-af" title=""></i><br>
                                    <i>Doctor of Medicine</i><br>
                                </span>
                                <span class='tooltip-content' style="display: none;">
                                    <span style="margin-left: 15px;">
                                        <u><b>Fullname: {!! $applicant->last_name!!}, {!! $applicant->first_name!!} {!! $applicant->middle_name!!}</b></u><br/>
                                        Birthdate: {!! $applicant->birthdate !!}<br/>
                                        Country: {{ $applicant->country_name }}<br>
                                        Gender/CS: {!! $applicant->gender !!}/Single<br>
                                        Cellphone: <br>{!! $applicant->country_code !!}{!! $applicant->area_code !!}{!! $applicant->tel_no !!}<br>
                                        Email:{{ $applicant->email }}<br>
                                        Application ID:{!! $applicant->app_id !!}<br>
                                        Date Last Updated: {!! $applicant->date_updated !!}
                                    </span> 
                                </span>
                            </span>
                        </h5> 
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8 col-lg-12">
                        <address style="color: black; margin-left: 10px;">
                            <abbr title="Email Address">Email:</abbr> <b>{{ $applicant->email }}</b><br>
                            <abbr title="Cellphone">Cellphone:</abbr> <b>{!! $applicant->country_code !!}{!! $applicant->area_code !!}{!! $applicant->tel_no !!}</b><br>
                            <abbr title="Application ID">Application ID:</abbr> <b>#{!! $applicant->app_id !!}</b><br>
                            <div style="height: 8px;"></div>
                            <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');"><i class="fa fa-address-card-o"></i> Manage</button>  
                        </address>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

问题截图

根据需求，提供两种处理方式：

方式一：移除HTML标签，显示纯文本 #

问题根源是Tooltip内容中包含<u>、<b>等HTML标签，且通过{!! !!}直接输出原始HTML，导致Tooltip将标签当作文本展示。修改步骤：

1. 删除tooltip-content中的所有HTML格式标签（如<u>、<b>）
2. 将{!! !!}替换为Laravel默认的{{ }}（自动转义内容，避免意外输出HTML）

修改后的tooltip-content代码：

<span class='tooltip-content' style="display: none;">
    <span style="margin-left: 15px;">
        Fullname: {{ $applicant->last_name }}, {{ $applicant->first_name }} {{ $applicant->middle_name }}<br/>
        Birthdate: {{ $applicant->birthdate }}<br/>
        Country: {{ $applicant->country_name }}<br>
        Gender/CS: {{ $applicant->gender }}/Single<br>
        Cellphone: <br>{{ $applicant->country_code }}{{ $applicant->area_code }}{{ $applicant->tel_no }}<br>
        Email:{{ $applicant->email }}<br>
        Application ID:{{ $applicant->app_id }}<br>
        Date Last Updated: {{ $applicant->date_updated }}
    </span> 
</span>

方式二：保留HTML格式，正确渲染标签 #

如果希望Tooltip保留文本格式（而非显示标签），需要配置Bootstrap Tooltip支持HTML内容：

1. 确保页面引入jQuery和Bootstrap JS
2. 添加Tooltip初始化代码，开启html选项：

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    html: true
  });
});

注意：此方式若内容包含用户输入，存在XSS风险，需确保内容经过安全过滤。

内容的提问来源于stack exchange，提问作者CaptainCRAZY