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シートから1 つを引き出して編集することで、独自のものを作成することもできます。mystyle定義済みの qTip2 スタイルの 1 つと同じ方法を使用します。

/*! 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 に答える