如何使空跨度可悬停？

Question

我有一系列的跨度，如果您将鼠标悬停在跨度区域上，都应显示工具提示。有时跨度将没有值。结果显示将是一些空白，在该空白处跨度是无法悬停在工具提示上的。这是可以理解的，因为跨度最终为0x0像素。

所有考虑过的问题，有什么方法可以使我的“ |”之间出现空白无需添加额外的空格即可将其悬停在工具提示上？

我尝试了一些更改，包括使这些跨度inline-block确实使它们保持顺序，但是除非我添加一些min-width和min-height属性（这会添加额外的空白空间），否则它们仍然不可徘徊不想。

最简单的方法就是检查这个jfiddle-http://jsfiddle.net/en69wxgj/1/

<span class="interactive-field" data-placement="top" data-toggle="tooltip" 
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" 
title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" 
title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" 
title="Test Tip">
</span>
|

Answer 1

您是否考虑过插入不带大小的不可见文本？不过，它确实增加了一些额外的空间。

.interactive-field::before {
  content: "x";
  visibility: hidden;
  font-size: 0px
}

Answer 2

我尝试了使用字母间距和：before伪元素的解决方案

您可以在此处检查原始版本和我的版本之间的比较-http://jsfiddle.net/en69wxgj/40/

---

涉及的步骤：

1。减少元素之间的字母间距

func functionsStruct() -> [Config] {
            let url = Bundle.main.url(forResource: "FunctionsList", withExtension: "plist")!
            let data = try! Data(contentsOf: url)
            let decoder = PropertyListDecoder()
            return try! decoder.decode([Config].self, from: data)
        }

我创建了一个父元素以减少元素之间的字母间距，并保留了文本的字母间距

2。在伪元素之前添加一个：before

.parent{
  letter-spacing:-1px;
}

.interactive-field2{
  letter-spacing:0px;
}

现在，它将伪元素添加到所有范围。您可以使用JS仅为跨度定义伪元素，其中不包含任何内容。

Answer 3

这是使用flex模型的解决方案。您可以设置容器的宽度。

    $("body").tooltip({
        selector: '[data-toggle="tooltip"]'
    });

.span-area {
  background: #f0f;
  display: flex;
  flex-flow: row nowrap;
}

.span-area span {
  display: inline-flex;
  width: 100%;
  flex-grow: 1;
  justify-content: center;
}

<br>
<br>
<br>
<div class="span-area">
  <span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
test
</span>
|
<span class="interactive-field" data-placement="top" data-toggle="tooltip" title="Test Tip">
</span>
|
</div>