Unable to apply styles using " style option" in qtip

Question

I'm trying to apply style using style option in qtip as given in the documentation styling demo but its not affecting my code, its overriding the jquery.qtip.min.css class for styling. is there any way i use both but priority to be given for style option .

here is my code for reference

html code:

<div id="styleChange1" class="innerDiv">Hover to get styled qtip</div>

js code:

$(document).ready(function() {
     $("#styleChange1").on({
           mouseover: function () {
               ShowQtip(element1,"bottomMiddle","bottomMiddle","topMiddle") ;
           },
           mouseleave: function () {
                $(this).qtip("destroy");
           }
    });
});

function ShowQtip(element,contentTxt,position1,position2) {
    if(element == null)
        return
    element.qtip({
        content: contentTxt,
        show: true,
        position: {
            my: position1,  // Position my top left...
            at: position2
        },
        hide: {
            event: false
        },
        style: { 
            width: 200,
            padding: 5,
            background: '#A2D959',
            color: 'black',
            textAlign: 'center',
            border: {
            width: 7,
            radius: 5,
            color: '#A2D959'
        }, 
        tip: contentTxt,
        name: 'dark' // Inherit the rest of the attributes from the preset dark style
   });
}

Please any suggestion would be a great help.

Answer 1

Try using this code...

$("jqueryselector").qtip({
   content: 'Stems are great for indicating the context of the tooltip.',
   style: { 
      tip: { // Now an object instead of a string
         corner: 'topLeft', // We declare our corner within the object using the corner sub-option
         color: '#6699CC',
         size: {
            x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
}  }  });