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


Tags: javascript,jquery,html,css

Problem :

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:

enter image description here

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?


Solution :

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.


    CSS Howto..

    How to move the search text box to the extreme right and Categories drop down to the left in html

    parse JSON to HTML table: How do I format the css of the table?

    how to fix the css padding in this situation?

    How to style differently only the first list item from unsorted list

    How to get a jQuery modal overlay to not push the scrollbar around?

    How to prevent CSS declaration dropped errors cross browser?

    How to give slide down effect when hover?

    How to selectively pass mouse events to underlying svg elements

    How would I go about having placeholder divs that are then “overwritten” later with PHP?

    Show required asterisk star after the text?

    Panel in Horizontal List item showing behind Button

    How to make css layout to fit html content?

    How to place a
    to the right of an input field

    How to remove some css properties without the paticular one using regular expression?

    How can I place a checkbox within a button? [closed]

    How do I make current menu item active in asp.net webforms

    How do I apply a CSS to a clutter stage?

    How to change font-size of multiple elements using jQuery

    How to change a portion of text on hover with css [duplicate]

    How do I optimize a very loooong page with TONS of images on it?

    How to check for text created by CSS?

    Jquery slider; made the container transparent, how do I hide the image overflow?

    How to make div position fixed without floating

    How to make Asp.net Gridview header and first column frezee?

    BackboneJS + HandlebarsJS - how to add image based on css

    How to find elements and siblings within a tree

    How to use one icon from different image files?

    JavaScript- How to change “message” div to yellow

    How to turn off :hover with CSS?

    How to override CSS Background that already has !important?