工具提示正在与父级断开

Question

我的工具提示与父级断开，父级具有overflow: auto; 属性。如果我删除该属性，工具提示会显示从父级溢出，这很好，但是当我添加该属性时，工具提示会被切断。请为此提供最佳解决方案。

.tooltip{
    back ground: #303030;
    color: #b4b4b4;
    padding: 0.5em 1em;
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: none;
    margin-bottom: 0.75em;
    animation: shortcut-tooltip-open 200ms ease-out;
    transform-origin: 50% 100%;
    white-space: nowrap;
    z-index: 1002;
    border-radius: 2px;
    font-size: 14px;
    text-transform: none;
}



<div class="main overflow-x-auto">
   <div class="item position-relative">
      <span class="show-tooltip-on-hover">Show tooltip</span>
      <div class="tooltip">
        // some text or list
      </div>
   </div>
</div>

Answer 1

enter code here

parent is-class="item position-relative" 孩子是 - class="tooltip"

试试这些 * {box-sizing: border-box;} .item position-relative{width:200px;/* use as per your req.*/} .tooltip{width:100%;}