Question

我在此页面上使用纯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;
}

Answer 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 })

    }

Answer 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})
                            });

css工具提示离开屏幕

2 个答案: