jquery - 使用 qtip 自定义提示

Question

我对这个例子的提示很感兴趣。

我当前的 qtip 用于表格单元格。

$(document).ready(function()
{
     $('td[title]').qtip();
});

如何修改它以获得与示例相同的效果？

谢谢。

Answer 1

将示例中引用的样式对象直接传递给 .qtip() 方法。如果记忆有用：

$('td[title]').qtip({
    content: {
        text: 'Neat!'
    },
    style: {
        tip: 'leftMiddle',
        border: {
            width: 10,
            radius: 6,
            color: '#FA6900'
        },
        background: '#F38630',
        color: '#333'
    }
});

编辑：我还应该提到，除非您指定要放置在工具提示中的内容，否则您将看不到任何内容。这通常也在传递给 qtip 的配置对象中完成。更新了我的例子。

Answer 2

使用 qtip2 而不是 qtip1 将解决问题。

CSS：

.tdStyle{
     background: #123456;
     color: #FEDCBA;
     text-align: left;
     border-radius: 4px;
     border: 2px solid white;
     width: 400px;
       };

JS：

$('td[title]').qtip({
style: {
    classes: 'tdStyle'
}
});