Tippy.js工具提示多行HTML内容换行失效问题求助

问题 #

使用tippy.js工具提示组件时，多行HTML内容无法实现换行效果，工具提示将内容显示为单行文本Line 1<br>Line 2<br>Line 3<br>Line 4，相关代码如下：

HTML模板 #

<div id="div_id_criticality" class="form-group">   
  <label for="id_criticality" class="requiredField">
  Criticality<span class="asteriskField">*</span>
  </label>
  <span class="formHelp" tippy-message="tippy-criticality" id="formHelp-criticality"><i class="fas fa-question-circle"></i></span>
  <div>
    <select name="criticality" class="select form-control" required="" id="id_criticality">
          
      <option value="">-- Select criticality --</option>

        {% for key, value in criticality.items %}
          <option value="{{ key }}">{{ value }}</option>
        {% endfor %}
      
    </select>
  </div>
</div>

<div id="tippy-criticality" class="tippy-multiline" style="display: none;">
  Line 1<br>
  Line 2<br>
  Line 3<br>
  Line 4
</div>

<script>
  tippy('#formHelp-criticality', {
    content(reference) {
    const id = reference.getAttribute('tippy-message');
    const template = document.getElementById(id);
    return template.innerHTML;
    allowHTML=true;
    }
  });
</script>

CSS代码 #

.tippy-multiline {
    white-space:pre !important;
}

也曾尝试：

.tippy-multiline {
    white-space:pre-wrap !important;
}

解决方法 #

1. 修正allowHTML的配置位置 #

你错误地将allowHTML=true写在了content函数内部，实际上allowHTML是tippy的顶级配置项，需要和content同级声明：

tippy('#formHelp-criticality', {
  content(reference) {
    const id = reference.getAttribute('tippy-message');
    const template = document.getElementById(id);
    return template.innerHTML;
  },
  allowHTML: true // 移至此处，与content同级
});

只有开启该配置，tippy才会解析返回的HTML内容，而不是把<br>标签当作纯文本显示。

2. 调整CSS选择器（可选） #

原CSS的.tippy-multiline类仅作用于隐藏的模板div，但tippy会把内容复制到自身的容器中，该类不会自动继承。若需要控制提示框的换行样式，应直接针对tippy的内容容器设置：

.tippy-content {
    white-space: pre-wrap; /* 可根据需求替换为pre、normal等值 */
}

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