I am dealing with a situation where I have multiple spans, each with tooltips that should appear when the span is hovered over. However, there are times when a span may not contain any content, resulting in an area of white space that cannot trigger the tooltip when hovered over. This occurs because the span ends up being 0x0 pixels in size.
Given this scenario, is there a way to make the whitespace between the "|" symbols hoverable for the tooltips without adding additional space?
I attempted to address this by changing the display property of the spans to inline-block, which did maintain their order but they remained unresponsive to hovering unless I introduced a min-width and min-height attribute, consequently adding unwanted white space.
To better understand the issue, you can refer to this JSFiddle example - 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>
|