I have a series of spans that all have tooltips that should be displayed if you hover over the span area. Sometimes a span will not have a value. The resulting display will be some white space where the span is meant to be that can not be hovered for the tooltip. This is understandable because the span ends up being 0x0 pixels.

All of that considered, is there any way to make this whitespace between my "|" hoverable for the tooltips without adding extra whitespace?

I tried some changes involving making these spans inline-block which does keep them in order but they still are not hoverable unless I add some min-width and min-height attribute which adds extra white space I don't want.

Probably easiest to just check this 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>
|

Have you considered injecting an invisible text with no size? It does add a bit of extra space though.

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

I have tried a solution using letter spacing and :before pseudo element

You can check the comparison between the original version and my version here - http://jsfiddle.net/en69wxgj/40/

Steps involved:

1. Reduce letter spacing between the elements

.parent
 letter-spacing:-1px;


.interactive-field2
 letter-spacing:0px;

I have created a parent to reduce the letter spacing between elements and have retained the letter spacing of the text

2. Add a :before pseudo element

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

For now, it adds a pseudo element to all the spans. You can use JS to only define pseudo elements for the spans with no content in them.

This is a solution using flex model. You can set the container's width.

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