Question

我正在尝试使用qtip中的样式选项应用样式，如文档styling demo中所示，但它不会影响我的代码，它会覆盖 jquery.qtip.min.css 类造型。有什么办法可以同时使用样式选项。

这是我的参考代码

html代码：

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

请任何建议都会有很大的帮助。

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

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

1 个答案: