Как центрировать всплывающую подсказку ниже элемента, который уже, чем подсказка?

Question

У меня есть этот код, чтобы центрировать всплывающую подсказку ниже элемента. Он отлично работает для элемента, который больше или равна ширине подсказке:

HTML:

<div class="my_class">Some Stuff<div class="tooltip_botom">My Very Long Tooltip Contents</div></div> 

CSS:

.my_class { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.tooltip_bottom { 
    position: absolute 
    bottom: -25px 
    left: 0 
    right: 0 
    display: inline 
    text-align: center 
} 

Но что мне делать, если содержание более узкая, чем ширина всплывающей подсказки? Перечисленный выше CSS не работает. Как я могу это исправить?

Answer 1

Посмотрите, подходит ли этот новый JSFiddle для вашей ситуации. Чтобы центрировать всплывающую подсказку, он использует левые 50%, transform: translateX (-50%), с центром выравнивания текста.

Он использует пустое пространство: nowrap, чтобы текст не обертывался, но это можно удалить, если текст нужно обернуть, и вместо этого можно использовать комбинацию минимальной и максимальной ширины для управления или настройки размера всплывающей подсказки ,

CSS

.my_class { 
    position:relative; 
    display:inline-block; 
    white-space:nowrap; 
    background-color:#ffffcc; 
    padding:3px 9px; 
    border:solid 1px #555555; 
} 
.tooltip_bottom { 
    position:absolute; 
    display:none; 
    text-align:center; 
    top:25px; 
    left:50%; 
    transform:translateX(-50%); 
} 
.my_class:hover .tooltip_bottom { 
    display:block; 
    /* To wrap the tooltip text, use min-width/max-width to control tooltip length. Use white-space:normal to overwrite the white-space:nowrap from the wrapper. 
    min-width:145px; 
    white-space: normal; */ 
    background-color:#ccccff; 
    padding:8px; 
} 

HTML

<div class="my_class">Tooltip Trigger Long 
<div class="tooltip_bottom">My Very Long Tooltip Contents</div> 
</div> 

some text 

<div class="my_class">Tooltip Trigger Short 
<div class="tooltip_bottom">Short</div> 
</div>