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
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.
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.
La solution
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
Autres conseils
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