Question

我正在使用优秀的jquery工具提示插件qtip 2.如果你还没有，请查看它。 http://craigsworks.com/projects/qtip2/

有没有人知道如何为工具提示定义自己的自定义css（工具提示颜色，边框，背景，半径等），而不是使用预定义的工具提示样式？

我尝试了什么：

我查看了他们的风格指南，但它没有定义自己的风格。 http://craigsworks.com/projects/qtip2/docs/style/
试过他们的论坛，但他们失败了（现在回来了）
创建我自己的工具提示类并引用它们
转换我的qtip版本1样式定义（失败）

如果这个问题对你有帮助，请告诉我！

Answer 1

我个人有5个主题到我的网站。我碰巧使用jQuery UI's ThemeRoller来做到这一点。 jQuery UI和qTip2使用相同的类名。

我发现的唯一警告是你包含CSS文件的顺序。您需要覆盖qTip2样式，因此只需在 qTip2 CSS文件后包含jQuery UI CSS文件。

这样做可以让你下载qTip2的更新，而不必担心你的自定义qTip2样式被覆盖，以及为你提供一个很好的GUI来创建你的主题。

Answer 2

我把它放在我的样式表中。使用你需要的任何属性......

.ui-tooltip .ui-tooltip-content,
.ui-tooltip p,
.ui-tooltip ul,
.ui-tooltip li,
.ui-tooltip,
.qtip {
    max-width: 280px;
    min-width: 50px;
    font-size: 17px;
    line-height: 19px;
    text-align: center;
    border-color: #666;
}

您也可以通过从jquery.qtip.css工作表中拉出一个并进行编辑来创建自己的工具。使用mystyle的方式与预定义的qTip2样式相同。

/*! mystyle tooltip style */
.ui-tooltip-mystyle .ui-tooltip-titlebar,
.ui-tooltip-mystyle .ui-tooltip-content{
    border-color: #303030;
    color: #f3f3f3;
}
.ui-tooltip-mystyle .ui-tooltip-content{
    background-color: #505050;
}

.ui-tooltip-mystyle .ui-tooltip-titlebar{
    background-color: #404040;
}

.ui-tooltip-mystyle .ui-tooltip-icon{
    border-color: #444;
}

.ui-tooltip-mystyle .ui-tooltip-titlebar .ui-state-hover{
    border-color: #303030;
}

jQuery工具提示插件qtip2 - 如何定义自定义样式，如qtip1？

2 个答案: