jquery - 无法在 qtip 中使用 "style option"应用样式

Question

我正在尝试使用文档中给出的 qtip 样式选项应用样式 styling demo但它不会影响我的代码，它会覆盖 jquery.qtip.min.css 样式类。有什么方法可以让我同时使用两者，但优先考虑样式选项。

这是我的引用代码

html代码:

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

js代码:

$(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
   });
}

请提出任何建议。

Answer 1

尝试使用此代码...

$("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!
         }
}  }  });