使用 q tip 自定义工具提示

【问题标题】：Custom a tootip by using qtip使用 q tip 自定义工具提示
【发布时间】：2012-07-21 02:43:43
【问题描述】：

我对这个example.的提示很感兴趣

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

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

如何修改才能得到和例子一样的效果？

谢谢。

【问题讨论】：

标签： jquery jquery-plugins tooltip qtip

【解决方案1】：

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

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

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

【讨论】：

【解决方案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'
}
});

【讨论】：