看起来你遇到的核心问题是CSS的content: attr(data-content)不会自动解析换行或HTML标签，我给你两个可行的方案，根据你的需求选择：

方案一：纯CSS实现（推荐，简单高效） #

这个方法不需要JS，只需要调整HTML的data-content和CSS样式：

1. 修改HTML的data-content：把需要换行的地方换成HTML换行符
（这是换行符的ASCII转义）：

<span class="bp-tooltip bp-icon bp-icon--about" data-content="How to get there from Londynske Namesti:&#10;Do this and then do that and then do this again"></span>

2. 更新CSS的tooltip样式：给.bp-tooltip:hover:before添加white-space: pre-wrap;属性，让CSS识别并渲染换行符：

.bp-tooltip:hover:before {
  content: attr(data-content);
  font-size: 110%;
  font-weight: 700;
  line-height: 1.2;
  position: absolute;
  left: auto;
  margin-left: 4px;
  padding: 0.8em 1em;
  text-align: left;
  text-indent: 0;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  background: #5c5edc;
  white-space: pre-wrap; /* 新增：让换行符生效，同时自动换行过长内容 */
}

• 如果你希望严格保留换行、不自动换行，可以用white-space: pre;，但pre-wrap更适合内容长度不确定的场景。

方案二：支持HTML内容（如果需要更多格式） #

如果之后你想给tooltip添加更多HTML格式（比如加粗、链接），CSS的attr()就不够用了，这时候需要用JS来生成tooltip：

1. 修改HTML：保留data-html="true"，data-content里直接用<br>：

<span class="bp-tooltip bp-icon bp-icon--about" data-html="true" data-content="How to get there from Londynske Namesti:<br>Do this and then do that and then do this again"></span>

2. 添加JS代码：监听hover事件，动态生成包含HTML内容的tooltip元素：

// 给所有带data-html="true"的tooltip绑定事件
document.querySelectorAll('.bp-tooltip[data-html="true"]').forEach(tooltip => {
  tooltip.addEventListener('mouseenter', function() {
    // 创建tooltip元素
    const tooltipEl = document.createElement('div');
    tooltipEl.className = 'custom-tooltip';
    // 插入HTML内容
    tooltipEl.innerHTML = this.getAttribute('data-content');
    // 添加到当前元素里
    this.appendChild(tooltipEl);
  });

  tooltip.addEventListener('mouseleave', function() {
    // 移除tooltip
    const tooltipEl = this.querySelector('.custom-tooltip');
    if (tooltipEl) tooltipEl.remove();
  });
});

3. 给自定义tooltip加样式：复制原来的tooltip样式到.custom-tooltip：

.custom-tooltip {
  font-size: 110%;
  font-weight: 700;
  line-height: 1.2;
  position: absolute;
  left: auto;
  margin-left: 4px;
  padding: 0.8em 1em;
  text-align: left;
  text-indent: 0;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  background: #5c5edc;
}

为什么你之前的方法失败了？ #

• data-html="true"无效：这个属性通常是某些JS tooltip库的约定，但你用的是纯CSS tooltip，CSS不会识别这个属性，只会把data-content里的<br>当成纯文本显示。
• 插入\A没生效：\A是CSS里的换行符，但需要配合white-space属性才能渲染，默认情况下CSS会忽略换行符。
• IDE里拆多行：HTML会把源码里的换行转换成空格，不会变成有效的换行符，所以没用。

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