Prevent CSS tooltip from going out of page/window

Question

I have a CSS only tooltip which loads a span as a tooltip when you hover the link. However this is positioned with CSS but if the link is near to the t

Answer 1

although the whole thing needs to recode but you can achieve that with something like this :

$(".ktooltip").on('mouseover', function(e) {
    var tooltip = $('.ktooltiptext'),
        wt = $(window).scrollTop(), //window top pos
        ww = $(window).outerWidth(), //window width
        tt = tooltip.offset().top, //Tooltip top pos
        tl = tooltip.offset().left, //Tooltip left pos
        tw = tooltip.outerWidth(); //Tooltip Width

    tooltip.css({ 'left': '10px', 'right': 'auto', 'top': '-40px' });

    if(tt < wt) tooltip.css('top', 0);
    if((tl + tw) > ww) tooltip.css({ 'left': 'auto', 'right': 0 });
})