How to wrap text to the next line inside a DIV and not go off the screen

Question

I have the following jquery (part of Easy Tooltip plugin [ https://gist.github.com/monkeymonk/3028852] ) which displays a DIV as a stylized tooltip:

$(this).hover(function(e){
    content = (options.content != '') ? options.content : title
    content = (options.useElement != '') ? $('#' + options.useElement).html() : content
    $(this).attr('title', '')

    if(content != '' && content != undefined){
        $('body').append('<div id="' + options.tooltipId + '">"' + content + '</div>')
        $('#' + options.tooltipId).css({
            position: 'absolute'
            , top: (e.pageY - options.yOffset) + 'px'
            , left: (e.pageX + options.xOffset) + 'px'
            , display: 'none'
        })
        .fadeIn('fast')
    }
}

CSS:

#easyTooltip {
    padding: 5px 10px;
    border: 1px solid #227DD2;
    background: #195fa4;
    color: #fff;
    white-space: pre-wrap;
    width: 165px;
    overflow: visible;
}

Displays the following:

How can I modify the CSS or the function so

• the white text wraps around the width of easyToolTip DIV instead of overflowing outside of the blue box as shown above? ( word-wrap: break-word fixed it)
• right now, as I move my mouse the blue box moves with it. If I move too much to the right edge the blue box continues to go off the screen which forces a horizontal scrollbar. How can I force the blue box to stay within the edge no matter how farther right my mouse goes so it doesn't show the horizontal scrollbar?

Answer 1

You could limit the horizontal position of the tooltip (plus its own width) to be less than the width of window:

var maxLeft = window.innerWidth - 165;
var left = e.pageX + options.xOffset;
if (left > maxLeft)
    left = maxLeft;

Another approach would be to try jQuery UI's Tooltip widget .