无法使用 qtip 中的“样式选项”应用样式

Question

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

这是我的参考代码

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