CSS подсказка гаснет экран

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. это мой funtion для всплывающей подсказки:

$('.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}) 
          });