CODEWITHSUNDEEP
dynamicwidthfullcalendarqtip
RajeshShah
RajeshShah

Reputation: 61

qTip Dynamic Width

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.

Upvotes: 6

Views: 10126

Answers (4)

NetVicious
NetVicious

Reputation: 4037

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

Upvotes: 15

Peter V. Mørch
Peter V. Mørch

Reputation: 15927

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.

Upvotes: 0

Tony
Tony

Reputation: 1937

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}

Upvotes: 7

user583726
user583726

Reputation: 685

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

Upvotes: 1

Related Questions