【问题标题】：How to make empty span's hoverable?如何使空跨度可悬停？
【发布时间】：2018-11-14 14:53:26
【问题描述】：

我有一系列跨度，如果您将鼠标悬停在跨度区域上，它们都应该显示工具提示。有时跨度没有值。结果显示将是一些空白区域，其中跨度意味着不能悬停在工具提示中。这是可以理解的，因为跨度最终为 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>
|

【问题讨论】：

我认为你需要使用你的显示方法：inline-block 和 min-width: 1em，但是你可以通过将所有代码写在一行来减少span元素之间的空间。

标签： html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

我喜欢你的想法！使用一行代码和.interactive-field { display: inline-block; min-width: 0.5em; } 效果很好。我想用“ ”替换“x”
我最终删除了 font-size: 0px 因为它在我的实现中仍然没有宽度，我添加了一个 width: 1em 现在看起来不错。谢谢

【解决方案2】：

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

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

涉及的步骤：

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

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

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

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

2。添加 :before 伪元素

.interactive-field2:before{
  display:inline-block;
  content:"";
}

现在，它为所有跨度添加了一个伪元素。您可以使用 JS 只为其中没有内容的 span 定义伪元素。

【讨论】：

【解决方案3】：

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

    $("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>

【讨论】：