Question

This is bizarre – I’m using jQuery qTip, and I can’t seem to set the positioning of the tooltips how I want from a custom style. However, if I define the position when I call qTip on an element, it works. In other words…

This works:

$("#element").qtip({
    content: "This is a test tooltip",
    position: {
        corner: {
            target: "rightMiddle",
            tooltip: "leftMiddle"
        }
    }
});

But this doesn’t:

$.fn.qtip.styles.custom = {
   position: {
       corner: {
           target: "rightMiddle",
           tooltip: "leftMiddle"
       }
   },
   tip: "leftMiddle"
}

$("#element").qtip({
    content: "This is a test tooltip",
    style: {
        name: "custom"
    }
});

What happens in this case is it always places the tooltip such that its top left corner is touching the bottom right corner of the element I’m attaching it to. No matter what I set for the position, it ignores it – yet it picks up all my other custom styles.

What am I doing wrong?

Answer 1

Position isn’t part of the Style attribute. It’s a top level one of it’s own.

You’ll have to change your code to have

var custom_position = {corner: {
            target: "rightMiddle",
            tooltip: "leftMiddle"
        }};

$("#element").qtip({
    content: "This is a test tooltip",
    style: {
        name: "custom"
    },
position: custom_position
});