css 工具提示离开屏幕答案

【问题标题】：css tooltip goes off screencss 工具提示离开屏幕
【发布时间】：2016-01-29 20:24:25
【问题描述】：

我在此页面上使用纯 CSS 工具提示：http://theroadmap.co/generation/

在小屏幕上，将鼠标悬停在右栏中一些较长的工具提示上会导致工具提示离开屏幕。当它到达屏幕的右端时，有什么办法让它换行吗？

这里是工具提示的代码：

/* 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;
}

【问题讨论】：

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

标签： css tooltip screen

【解决方案1】：

    var mousex = e.pageX + 20; //Get X coordinates
    var mousey = e.pageY + 10; //Get Y coordinates
   if((mousey+100)>$(window).height())
   {

    $('.tooltip')
    .css({ top: mousey-100 ,left: mousex })

   }
   else if((mousex+200)>$(window).width())
   {
      $('.tooltip')
    .css({ top: mousey ,left: mousex-200})

   }
   else
    {
   $('.tooltip')
    .css({ top: mousey, left: mousex })

    }

【讨论】：

【解决方案2】：

当我尝试显示文件名时遇到了同样的问题。好像名字太长而且里面没有空格，所以我用了

word-break: break-all;

在我的 .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})
                            });

【讨论】：