如何將工具提示置於比工具提示更窄的元素下方？

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％）和文本對齊中心。

它使用white-space：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>