Как сделать доступным пустую область?

Question

У меня есть серия промежутков, у всех из которых есть всплывающие подсказки, которые должны отображаться, если вы наводите курсор на область пролета.Иногда диапазон не будет иметь значения.В результате на экране появится некое пустое пространство, где предполагается, что интервал не может быть наведен на всплывающую подсказку.Это понятно, потому что промежуток в конечном итоге составляет 0x0 пикселей.

Учитывая все это, есть ли способ сделать этот пробел между моими "|"доступный для всплывающих подсказок без добавления лишних пробелов?

Я попытался внести некоторые изменения, в том числе сделать эти промежутки inline-block, которые сохраняют их в порядке, но они по-прежнему недоступны, если только я не добавлю min-width и *Атрибут 1009 *, который добавляет лишние пробелы, которые мне не нужны.

Вероятно, проще всего просто проверить этот 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

Это решение с использованием гибкой модели.Вы можете установить ширину контейнера.

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

Answer 2

Я пробовал решение с использованием межбуквенного интервала и: перед псевдоэлементом

Вы можете проверить сравнение между оригинальной версией и моей версией здесь - 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 только для определения псевдоэлементов для промежутков без содержания в них.

Answer 3

Рассматривали ли вы введение невидимого текста без размера? Это добавляет немного дополнительного пространства.

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