Could someone please help me. I'm looking for a solution for setting a maxwidth on a Tooltipster tooltip bubble. I'm not talking about the area which activates the tooltip, I'm talking about the tooltip bubble itself. When I put a few sentences of text in a tooltip it stretches from the left to the right of my screen and sometimes goes off the page. I want to be able to set a max width at say 400px, where anything in excess would be broken onto a new line.

tooltipster-maxwidth

I already checked and tried changing this in the javascript file:

maxWidth Set a maximum width for the tooltip. Default: null (no max width)

But nothing happened. It still appears like it does in the screenshot. Could it be because I've applied it to a paragraph tag? I tried to apply it to a span tag instead but it did the same thing.

Could someone please help me. I'm looking for a solution for setting a maxwidth on a Tooltipster tooltip bubble. I'm not talking about the area which activates the tooltip, I'm talking about the tooltip bubble itself. When I put a few sentences of text in a tooltip it stretches from the left to the right of my screen and sometimes goes off the page. I want to be able to set a max width at say 400px, where anything in excess would be broken onto a new line.

tooltipster-maxwidth

I already checked and tried changing this in the javascript file:

maxWidth Set a maximum width for the tooltip. Default: null (no max width)

But nothing happened. It still appears like it does in the screenshot. Could it be because I've applied it to a paragraph tag? I tried to apply it to a span tag instead but it did the same thing.

• javascript
• jquery
• tooltipster

Share Improve this question Follow edited Sep 11, 2014 at 11:52 neelsg 4,84255 gold badges3737 silver badges5858 bronze badges asked Sep 11, 2014 at 11:41 JonnyJonny 3111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The maxWidth option that's given with Tooltipster is one that needs to be passed into the tooltipster() function when you initialise the tooltip itself, i.e.

$('.tooltip').tooltipster({
    // Other setup goes in here as key:value pairs
    'maxWidth': 500   
});

From the example above, this will "restrict" your tooltips to occupy a max width of 500 pixels. I've setup a very simple JSFiddle showing various examples with custom maxWidth options which should help you out with the syntax.

I hope this helps :)