Question

I’m trying to use the qTip jQuery plugin to add a little flair to my website, but am getting nowhere with it at all. I’ve read through some of the documentation, but it’s not helping at all. essentially, I’m trying to do really basic things like style the popups and stuff, but it’s not working. I can get the popups to work, but customizing them at all is a problem. For instance things like this:

$('.hoverDes[title]').qtip({
    position: {
        my: "bottom-right",
        at: "top-left",
        target: $(".hoverDes")
    }
});

aren’t positioning the popup at all and things like this:

$('.hoverDes[title]').qtip({
    style: {
        background: orange;
    }
});

aren’t styling them at all. What am I missing here?

Answer 1

That’s simple.
PD: I haven’t read the documentation, I don’t know if there is a way to style through commands, but you can style them with basic css.
http://craigsworks.com/projects/qtip2/demos/

When you hover over an element, the qtip generates and appends some divs with those classes:

ui-tooltip qtip ui-helper-reset ui-tooltip-default  ui-tooltip-pos-tl

Use Firebug in Firefox. And then locate those divs.

As a quick example, you’ll find that those rules from the jquery.qtip.min.css, will be used for styling color.

.ui-tooltip-default .ui-tooltip-titlebar, .ui-tooltip-default .ui-tooltip-content {
  background-color: #FFFFA3;
  border-color: #F1D031;
  color: #555555;
}