qTip2 - using included styles

Question

Apparently, I have difficulty following instructions.

Plugin: qtip2
Docs: api - styles

qTip2 includes several built-in styles, but I cannot seem to access them. Everything I tried just results in the standard yellow tooltip.

jsFiddle example

HTML:

<img id="bob" title="Bobbing for apples" src="http://placehold.it/30/30" />
<img id="frank" title="Let me be Frank with you" src="http://placehold.it/30/30" />
<img id="mary" title="He's getting Mary'd" src="http://placehold.it/30/30" />

jQuery:

$('[title!=""]').qtip({
    style: {
        classes: 'qtip-bootstrap'
    }
});

I also tried putting the img tags into DIVs - jsFiddle - but the results are the same.

Answer 1

Your code is fine but you have got the wrong css

I have updated the css url to

http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css

which includes all of the styles

Updated fiddle

http://jsfiddle.net/gsiry01/9wDar/1/

Answer 2

Your Qtip CSS file is just include basic CSS as you can point out from the URL:

http://cdn.jsdelivr.net/qtip2/2.2.0/basic/jquery.qtip.css

which lack of some extras styles such as the custom color theme like what you're currently applying.

Since you're using jsdelivr CDN. You can use this link with full features CSS styles instead:

http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.css

Updated Fiddle