如果工具提示有长文本箭头下降（引导程序）

Question

我有默认的bootstrap工具提示，其中包含仅具有字体颜色和大小的箭头的自定义样式，没有任何特殊的填充或边距。

如果我有简短的文字 - 没问题：

如果它的长度更长 - 箭头在工具提示中向下：

另一个常见问题 - 如果工具提示位置接近页面/窗口的末尾：

每个工具提示都有相同的样式。

我已尝试根据stackoverflow的答案以不同的方式修复它，但它没有帮助。 请帮助我理解这种奇怪的行为。我应该使用什么样的方法将箭头固定在工具提示的边界？

PS：另一个细节 - 如果我要交换＆＃34;隐藏人和＃34;并且＆＃34;显示反馈＆＃34;工具提示 - 它变好了。所以，可能它也取决于工具提示的位置。

Answer 1

这就是我所期待的！

你可以尝试一下吗？并发布您的之后/之前的伪代码

参考

http://cssdeck.com/labs/pure-css-tooltip-with-arrow

    .tooltip:hover:before {
        background: #111;
        background: rgba(0,0,0,.8);
        border-radius: .5em;
        bottom: 1.35em;
        color: #fff;
        content: attr(title);
        display: block;
        left: 1em;
        padding: .3em 1em;
        position: absolute;
        text-shadow: 0 1px 0 #000;
        white-space: nowrap;
        z-index: 98;
    }

    .tooltip:hover:after {
        border: solid;
        border-color: #111 transparent;
        border-color: rgba(0,0,0,.8) transparent;
        border-width: .4em .4em 0 .4em;
        bottom: 1em;
        content: "";
        display: block;
        left: 2em;
        position: absolute;
        z-index: 99;
    }

Answer 2

感谢@Youness，

主 .tooltip 类的

max-width 非常有用。