I'm creating a tooltips for educational purpose.

Assume the tooltip could be created at any position on the page dynamically.

I'd like to know the best way to make tooltips positioned in such a way that never go off the screen without changing their content or size.

edit: Or without using another tooltip library.

.has-tooltip:hover ~ div {
    display: block;
}

edit: example fiddle of a tooltip that could go off screen in some situations: /

I'm creating a tooltips for educational purpose.

Assume the tooltip could be created at any position on the page dynamically.

I'd like to know the best way to make tooltips positioned in such a way that never go off the screen without changing their content or size.

edit: Or without using another tooltip library.

.has-tooltip:hover ~ div {
    display: block;
}

edit: example fiddle of a tooltip that could go off screen in some situations: http://jsfiddle/n94rv/13/embedded/result/

• javascript
• html
• css

• 1 Use an existing library for that. jQuery ui tooltip on google. :) – Mark Rijsmus Commented May 15, 2014 at 9:24
• Don't native tooltips usually do this? – Scimonster Commented May 15, 2014 at 9:27
• I don't know. I'd like to recreate the behavior with non-native tooltips. – Jeffrey Basurto Commented May 15, 2014 at 9:28
• could you discribe how you made your tooltips (add HTML/CCS + a fiddle if possible)) – web-tiki Commented May 15, 2014 at 9:31
• Added a fiddle. Don't know why I'm getting down voted. – Jeffrey Basurto Commented May 15, 2014 at 9:45

3 Answers 3

You could measure which quadrant the placement of the tooltip will occur in and then place the tooltip on a different side depending on which edge of the screen the tooltip is near.

For example, if it's in the bottom right corner of the screen the tooltip would be positioned such that it goes up and to the left of the placement area.

Whereas, if it were the top left corner of the screen the tooltip would be positioned such that it goes down and right from the placement area.

The first thing I think of is:

• Add the tip to the DOM with the css rule: visbility:hidden; position:absolute;
• Obtain its size
• If going off the screen bounderies, change its position
• Show it

If it's a tooltip that points towards an element, it eventually will go off screen, because when the element the tooltip points towards goes off screen, the pointer eventually will too.

I have done this with my own tooltip library. Here is a fiddle, click on the element and scroll so you see what I mean.

http://jsfiddle/bEv7N/

new jBox('Tooltip', {
    attach: $('#tooltip'),
    trigger: 'click',
    position: {
        x: 'right',
        y: 'center'
    },
    outside: 'x',
    content: 'My Tooltip',
    adjustPosition: true,
    adjustTracker: true,
    height: 200
});

The same applies if the tooltip is on top, then you have to flip it:

http://jsfiddle/bEv7N/1/

new jBox('Tooltip', {
    attach: $('#tooltip'),
    trigger: 'click',
    position: {
        x: 'center',
        y: 'top'
    },
    outside: 'y',
    content: 'My Tooltip',
    adjustPosition: true,
    adjustTracker: true,
    width: 100
});

Again, klick the element to show the tooltip, then scroll. You see, it won't always be able to stay on screen, all you can do is try to adjust its properties so it will be visible as much as possible.

Another thing to consider is, that this behavior is quite an performance killer as the calculations have to be done on runtime (when scrolling). Meaning you should have an option to turn them off. In my library it will only get triggered when the tooltip opens, for scrolling and window resizing you have to turn it on specifically.

In my library for example, I added the following options:

    adjustPosition: true,
    adjustTracker: true,

Feel free to steal some code from my tooltip library, if it helps, you'll find it on github: https://github./StephanWagner/jBox