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 do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How do I change the css of a different element on hover?

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    How do I get rid of the last tr td bottom border using css?

    How can I make a fade in function without using jQuery like this? (JavaScript)

    How to align a menu bar using css and html? [closed]

    How to overlap a div to an another div without changing their positions - Css

    Hover on div(1) to show div(2), if mouseout continue to show div(2) for x seconds

    How to keep the underline effect in this demo stay using CSS?

    How to make nav and right block fixed, also keep the whole container is in center?

    How to build a submenu with CSS?

    How to center 2 or more divs on the same line? (css)

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How to detect MAC OS' inverted color mode in javascript / css?

    CSS: how to calculate margin inside a div for a fluid layout

    How do I scale an SVG background-image without honoring aspect ratio in Firefox?

    Fill dynamic
    's with content. But how to show it?

    How can I do this: text inside rectangle using HTML/CSS?

    joomla, CSS - show joomla module only for smartphone screens

    How to make this breed of resizable vertical divider for two divs?

    VERY BASIC: How to inline social media logos on a header

    Changing opacity for div in div - is this possible? How?

    How to target specific img using css

    How would I set this up? [closed]

    How to set the jquery draggable with margin left?

    How to get and extract matched css rules on dom-node?

    How to do formatting using CSS to table

    how to put all labels in bold with css

    How do I stop a CSS layout from distorting when zooming in/out?

    How do you use CSS Selectors to select multiple elements? [duplicate]