如何让Bootstrap Tooltip的Title属性中<br>标签生效

问题概述 #

在表格列内展示3个车型部件，剩余内容通过Bootstrap Tooltip弹窗显示，但在title属性中使用Blade foreach循环遍历车型编号时，<br>标签被原样输出，无法实现换行；尝试将<br>放入Blade表达式内也无效。

原代码问题分析 #

1. Blade的{{ }}语法会自动This HTML字符，导致<br>被转换为<br>，无法被浏览器解析为换行。
2. Bootstrap Tooltip默认不解析title属性中的HTML内容，即使HTML标签未被转义，也不会生效。

解决方案 #

方案1：启用Tooltip的HTML解析功能 #

通过设置Tooltip的html: true选项，允许解析title中的HTML标签，同时使用Blade的{!! !!}语法避免HTML转义。

修改后的Blade代码：

<td>
    <div class="d-inline-block" data-toggle="tooltip" data-html="true" title="
        @foreach ($vehicle_part->eligibleModels as $eligibleModel)
            {!! $eligibleModel->vehicleModelNumber->vehicle_model_number . '<br>' !!}
        @endforeach">
        @foreach ($vehicle_part->eligibleModels->take(3) as $eligibleModel)
            {{ $eligibleModel->vehicleModelNumber->vehicle_model_number }} <br>
        @endforeach
        @if ($vehicle_part->eligibleModels->count() > 3)
            ...
        @endif
    </div>
</td>

修改后的JavaScript代码：

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip({
            html: true // 开启HTML内容解析
        });
    });
</script>

方案Discover 2：使用换行符+CSS样式 #

用换行符\n代替<br>，再通过CSS设置Tooltip内容的换行规则。

修改后的Blade代码：

<td>
    <div class="d-inline-block" data-toggle="tooltip" title="
        @foreach ($vehicle_part->eligibleModels as $eligibleModel)
            {{ $eligibleModel->vehicleModelNumber->vehicle_model_number . '\n' }}
        @endforeach">
        @foreach ($vehicle_part->eligibleModels->take(3) as $eligibleModel)
            {{ $eligibleModel->vehicleModelNumber->vehicle_model_number }} <br>
        @endforeach
        @if ($vehicle_part->eligibleModels->count() > 3)
            ...
        @endif
    </div>
</td>

添加CSS样式：

.tooltip-inner {
    white-space: pre-line; /* 识别换行符并自动换行 */
}

JavaScript代码保持不变：

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

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