css工具提示离开屏幕

我在此页面上使用了纯CSS工具提示：

在小屏幕上，将鼠标悬停在右栏上一些较长的工具提示上会导致工具提示离开屏幕。当它到达屏幕的右端时，有没有办法让它包装起来

以下是工具提示的代码：

/* TOOLTIP TIME */
.tooltip {
    position: relative;
    text-decoration: none;
}

.tooltip:hover:before {
    display: block;
    position: absolute;
    padding: .5em;
    content: attr(href);
    min-width: 120px;
    text-align: center;
    width: auto;
    height: auto;
    white-space: nowrap;
    top: -32px;
    background: rgba(0,0,0,.8);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 1.2em;
    z-index: 1000;
}

.tooltip:hover:after {
    position: absolute;
    display: block;
    content: "";
    border-color: rgba(0,0,0,.8) transparent transparent;
    border-style: solid;
    border-width: 10px;
    height: 0;
    width: 0;
    position: absolute;
    top: -8px;
    left: 1em;
}

---

当我试图显示文件名时，我也遇到了同样的问题。似乎名字太长了，里面没有空格，所以我用了

word-break: break-all;

在my.tooltip类中。 这是我的工具提示功能：

  $('.file_attachments').hover(function () {
                                var tooltip = '<div class="tooltip"></div>';
                                // Hover over code
                                var title = $.trim($(this).attr('title'));

                                if (title.length > 0) {
                                    $(this).data('tipText', title).removeAttr('title');
                                    $('body').append(tooltip);
                                    $('.tooltip').html(title);
                                    $('.tooltip').fadeIn('slow');
                                } else {
                                    $('body').append(tooltip);
                                }

                            }, function () {
                                // Hover out code
                                $(this).attr('title', $(this).data('tipText'));
                                $('.tooltip').remove();
                            }).mousemove(function (e) {
                                var mousex = e.pageX + 20; //Get X coordinates
                                var mousey = e.pageY + 10; //Get Y coordinates
                                $('.tooltip').css({top: mousey, left: mousex})
                            });

$（'.file_attachments'）。悬停（函数（）{
var工具提示=“”；
//悬停在代码上方
var title=$.trim（$（this.attr（'title'））；
如果（title.length>0）{
$（this.data（'tipText'，title.）.removeAttr（'title'）；
$（'body'）.append（工具提示）；
$（'.tooltip'）.html（标题）；
$（'.tooltip'）.fadeIn（'slow'）；
}否则{
$（'body'）.append（工具提示）；
}
}，函数（）{
//悬停代码
$（this.attr（'title'，$（this.data（'tipText'））；
$（'.tooltip'）.remove（）；
}).mousemove（函数（e）{
var mousex=e.pageX+20；//获取X坐标
var mousey=e.pageY+10；//获取Y坐标
$（'.tooltip'）.css（{top:mousey，left:mousex}）
});

我试图显示文件名时也遇到了同样的问题。似乎名字太长了，里面没有空格，所以我用了

word-break: break-all;

在my.tooltip类中。 这是我的工具提示功能：

  $('.file_attachments').hover(function () {
                                var tooltip = '<div class="tooltip"></div>';
                                // Hover over code
                                var title = $.trim($(this).attr('title'));

                                if (title.length > 0) {
                                    $(this).data('tipText', title).removeAttr('title');
                                    $('body').append(tooltip);
                                    $('.tooltip').html(title);
                                    $('.tooltip').fadeIn('slow');
                                } else {
                                    $('body').append(tooltip);
                                }

                            }, function () {
                                // Hover out code
                                $(this).attr('title', $(this).data('tipText'));
                                $('.tooltip').remove();
                            }).mousemove(function (e) {
                                var mousex = e.pageX + 20; //Get X coordinates
                                var mousey = e.pageY + 10; //Get Y coordinates
                                $('.tooltip').css({top: mousey, left: mousex})
                            });

$（'.file_attachments'）。悬停（函数（）{
var工具提示=“”；
//悬停在代码上方
var title=$.trim（$（this.attr（'title'））；
如果（title.length>0）{
$（this.data（'tipText'，title.）.removeAttr（'title'）；
$（'body'）.append（工具提示）；
$（'.tooltip'）.html（标题）；
$（'.tooltip'）.fadeIn（'slow'）；
}否则{
$（'body'）.append（工具提示）；
}
}，函数（）{
//悬停代码
$（this.attr（'title'，$（this.data（'tipText'））；
$（'.tooltip'）.remove（）；
}).mousemove（函数（e）{
var mousex=e.pageX+20；//获取X坐标
var mousey=e.pageY+10；//获取Y坐标
$（'.tooltip'）.css（{top:mousey，left:mousex}）
});

CSS媒体查询以减少工具提示的宽度？谢谢！问题是，有些工具提示的宽度甚至超过了1920米-这里的问题是，我不知道如何在工具提示中包装文本，即使是非自动的…这么大的工具提示真的不应该像那样使用。我同意到目前为止它还存在问题-你有更好的建议吗？这个网站做得很好：[CSS媒体查询以减少工具提示的宽度？谢谢！问题是，有些工具提示甚至超过1920宽度-这里的问题是，我不知道如何在工具提示中包装文本，即使是非自动的…这么大的工具提示真的不应该这样使用。我同意到目前为止它一直存在问题-你有更好的建议吗？这个网站已经做了这很好：[