Псевдо элемент ширина подсказке жидкости

Question

здесь я получил CSS-только подсказка:

https://jsfiddle.net/r0zg014b/3/

Я хочу, что: после псевдо-элемент получил ширину жидкости (также не более ширины) на основе текстового содержимого.

На скрипке вы можете увидеть мои тесты. атм я использовал 
 и white-space: pre; для линий разрывов, но я не хочу этим: D

display: table; работал на сафари, но e.x. не для firefox: https://jsfiddle.net/r0zg014b/4/

Любое решение по этому вопросу?

Answer 1

Проблема вы страдаете от не связано с вашими стилями применяются псевдо элементы. Вы хотите, чтобы абсолютно позиционированный элемент становился потенциально более широким, чем его относительно позиционированный контейнер, который по умолчанию он не будет делать. Вы можете указать подсказки, чтобы они всегда имели ширину, например. 340px, и это сработает. Однако в данный момент всплывающая подсказка будет не более шириной, чем span.

Одним из способов (хаки) является расширение ширины элементов span. Вы можете сделать это, применив большой отступ и отрицательный запас по элементам, следующим образом.

padding: 0 170px; 
margin: 0 -170px; 

Это расширит ширину пролета, но заставляет его показывать ширину, которая должна иметь из-за отрицательных полей. Однако есть плохие побочные эффекты от этого. Вы можете видеть это в this Fiddle (я просто применил изменения к вашим). Следует отметить, что всплывающая подсказка появляется, когда мышь находится близко к тексту, потому что диапазон расширяется. Кроме того, всплывающая подсказка может появиться в неправильном положении при разрыве линии.

Возможно более приятный подход, а именно наличие абсолютно позиционируемого контейнера, который всегда имеет ширину 340px и в этом случае имеется фактическая подсказка, с max-width: 340px. Однако это требует дополнительного элемента контейнера и, следовательно, невозможно с вашим подходом псевдоэлемента ... Если вы хотите это увидеть, я могу создать демоверсию.

Answer 2

Вы хотите что-то ищите?

body { 
 
    padding: 140px; 
 
} 
 
[data-tooltip] { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transform: translate(-50%, 0); 
 
} 
 
[data-tooltip]:before { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: solid 5px transparent; 
 
    border-right: solid 5px transparent; 
 
    border-top: solid 5px rgba(34, 50, 84, 0.9); 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 50%; 
 
    z-index: 3; 
 
    margin-bottom: 3px; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transform: translate(-50%, -5px); 
 
} 
 
[data-tooltip]:after { 
 
    position: absolute; 
 
    content: attr(data-tooltip); 
 
    padding: 10px 16px; 
 
    bottom: 100%; 
 
    margin-bottom: 8px; 
 
    left: 50%; 
 
    overflow: hidden; 
 
    display: block; 
 
    background: rgba(34, 50, 84, 0.9); 
 
    color: #fff; 
 
    z-index: 2; 
 
    font-size: 14px; 
 
    white-space: nowrap; 
 
    line-height: 20px; 
 
    visibility: hidden; 
 
    border-radius: 3px; 
 
    opacity: 0; 
 
    transform: translate(-50%, -5px); 
 
}

<span data-tooltip="Lorem ipsum">Short</span> 
 
<span data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Long</span> 
 
<span data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Want</span>