4

我正在使用出色的 jquery 工具提示插件 qtip 2。如果您还没有，请检查一下。 http://craigsworks.com/projects/qtip2/

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

我尝试了什么：

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

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

4

2 回答 2

3

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

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

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

于 2012-04-13T18:35:44.453 回答
1

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

.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;
}
于 2012-04-13T18:30:37.963 回答