3

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.

neelsg
  • 4,802
  • 5
  • 34
  • 58
Jonny
  • 31
  • 1
  • 2

1 Answers1

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 :)

zesda
  • 418
  • 6
  • 18
  • Thank you very much sir! The code you mentioned above looks a little bit different to mine, but I still managed to get this to work: `;(function ($, window, document) { var pluginName = "tooltipster", defaults = { maxWidth: 500, };` – Jonny Oct 02 '14 at 08:30
  • I actually already tried this before but forgot I was using the minified JS doh! :) – Jonny Oct 02 '14 at 08:33
  • I was just about to say that looks like minified code ;) No problems, well it's always here for future reference :D – zesda Oct 02 '14 at 09:14