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.

Lozada

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

Wendling

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}

Ahoufe

I found that this didn't work, as the .qtip style would be applied over the .MyQtip style, overriding the max-width. I had to do .MyQtip {max-width: 1000px !important;} – Stranglehold

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
});

Kohler

Answer 4

Use your own class:

$('#tip-wide').qtip({
  content: {
    text: "some very wide tooltip text"
  },
  style: {
    classes: 'my-qtip'
  }
});

Now set max-width in .qtip.my-qtip in your CSS ( the .qtip prefix is due to specificity). My demo here has none but you choose what you need:

/* .my-qtip was enough for me,
   but .qtip.my-qtip is more specific,
   and hence will override .qtip's value */
.qtip.my-qtip {
  max-width: none;
}

See jsfiddle for a live demo.

Shepherd