css tooltip goes off screen - css

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

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

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