jquery - CSS/jQuery : How to prevent tooltip from disappearing behind border of main wrapper (working code)

Question

我是 CSS 的新手，希望有人能帮助我。

我正在尝试为悬停显示创建工具提示。它需要能够显示 HTML 内容，所以我不能使用 title 属性方法，我不想为此使用插件。

到目前为止，我有下面的一般工作，即布局和内容是预期的，它出现在悬停等。但是，我在这里遇到了一个问题，我自己也弄不明白:
如果我在较小的屏幕尺寸上测试它，那么我的工具提示的一部分会消失在主页包装器的右边框后面，因此工具提示的一半会隐藏在它后面。

有没有一种方法可以设置它，使工具提示宽度达到最大直到主包装器的右边界，然后扩展它的高度而不是它的宽度？我尝试在此处使用 overflow 和 z-index 但仍然无法正常工作。另一方面，我不得不使用 white-space: nowrap 否则我会得到高度很大但宽度很小的工具提示。

我的 CSS:

.tooltip {
    display: inline;
    margin: 0;
    padding: 0;
    position: relative;
}
.tooltip span {
    background: blue;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #666;
    color: #fff;
    height: auto;
    min-height: 30px;
    position: absolute;
    text-align: left;
    visibility: hidden;
    white-space: nowrap;
    width: auto;
}
.tooltip span:after {
    border-bottom: 8px solid transparent;
    border-right: 8px solid blue;
    border-top: 8px solid transparent;
    content: '';
    height: 0;
    margin-top: -8px;
    position: absolute;
    right: 100%;
    top: 16px;
    width: 0;
}
.tooltip:hover span {
    left: 100%;
    margin-left: 15px;
    margin-top: -15px;
    filter: alpha(opacity=100);
    opacity: 1;
    padding: 8px 16px;
    top: 50%;
    visibility: visible;
    z-index: 999;
}

示例 HTML:

<div class="col-12 tooltip">
    <input type="text" required />
    <span>
        <strong>Some text</strong><br />
        <ul>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
            <li> Some text</li>
        </ul>
    </span>
</div>

更新:
如果 jQuery 是更好的方法，请也让我知道。

非常感谢，迈克

Answer 1

尝试使用@media:

这是 JsFiddle link .

例如

@media (max-width: 350px) {
    .tooltip span:after {
        border-left: 8px solid transparent;
        border-bottom: 8px solid blue;
        border-right: 8px solid transparent;
        content: '';
        height: 0;
        position: absolute;
        left: 30%;
        top: -8px;
        width: 0;
    }

    .tooltip:hover span {
        left: 0;
        margin-top: 20px;
    }
}

只需更改 @media 中的 tooltip 类的样式即可。

希望对您有所帮助。