qTip Dynamic Width

Question

I am currently using qTip jQuery plugin in combination with Full Calendar. Both of these works great. However, I am currently stuck at an issue.

Sometimes, my qTip content has to much data. This gets clipped of as the width and height of the qTip tooltip is fixed. Is there any way I can make the width and height dynamic?

I found that the maximum width is 350 but this is not enough for my requirement.

Answer 1

If you don't want to modify the qtip source simply add this in your css

.qtip { max-width: none !important; }

With this css hack the tip will adapt to the content you write inside.

If you want to put a fixed size change the none to the size you need (example: 500px).

Answer 2

What I did is creating my own class/style.

In HTML page

jQuery("#tooltip").qtip({ 
    content: {    
         text : "tooltip", 
         title:{ text: "Row Information", button: 'Close'}
    }, 
    style: {classes: "MyQtip"},
    show: {solo: true},
    hide: false
});

In my CSS, I have

.MyQtip {max-width: 1000px}

Answer 3

I bumped into the same problem.

In qtip.css , you can change max-width :

.qtip{
    max-width: 460px;
}

And whenever you want to use it:

var widthValue = '280px';
if ( someothercondition == true ) { widthValue = '480px'; }    

jQuery("#tooltip").qtip({ 
    content:{    
        text : "tooltip", 
        title:{ 
            text: "Row Information",
            button: 'Close'
        }
    }, 
    style: {
        width: widthValue 
    },
    show:{
        solo: true
    },
    hide: false
});