css tooltip goes off screen

Question

I'm using a pure CSS tooltip on this page: http://theroadmap.co/generation/

On small screen, hovering over some longer tooltips on right column causes tooltip to go off screen. Is there any way to get it to wrap when it reaches right end of screen?

Here is code for the tooltip:

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

i had the same problem when i tried to display a file name. seems like the name was too long and there weren't any spaces in it, so i used

word-break: break-all;

in my .tooltip class. this is my funtion for 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})
                            });

Answer 2

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

    }