3

Tooltip カスタム スタイル プラグインを使用しています...

これらのサイトに表示されているように、写真に示されているようにツール ヒント メッセージを表示したいと考えています (たとえば、ツール ヒントの一部になる矢印を使用)。

ここに画像の説明を入力

いくつかの CSS ルールを適用しようとしましたが、まだ思いどおりに表示できません...助けてください。ここに私のCSSコードがあります:

body .ui-tooltip {
  border-width:0;
}

.ui-tooltip,.arrow:after {
  background:black;
  border:0 solid white;
}

.ui-tooltip {
  padding:10px;
  color:white;
  border-radius:5px;
  font-family:Verdana, sans-serif;
  font-size:12px;
  text-transform:none;
}

.arrow {
  width:70px;
  height:16px;
  position:absolute;
  left:0!important;
  margin-left:-25px;
  top:55%;
}

.arrow.top {
  top:-16px;
  bottom:auto;
}

.arrow.left {
  left:20%;
}

.arrow:after {
  content:"";
  position:absolute;
  left:20px;
  top:-20px;
  width:25px;
  height:25px;
  box-shadow:6px 5px 9px -9px black;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  tranform:rotate(45deg);
}

.arrow.top:after {
  bottom:-20px;
  top:auto;
}

.ui-tooltip {
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  filter:alpha(opacity=70);
  opacity:0.7;
}

上記の CSS コードを適用すると、完全なツールチップが表示されません。

i.imgur.com/4yCPU.png

しかし、私はそれをフルサイズで次のように見せたい:

ここに画像の説明を入力

CSS コードの矢印に問題があり、提供した例とは異なります。

編集：

矢印の問題は今のところ問題ありません...しかし、必要な表示が表示された場合、それは私が望むものと同じではありません

.ui-tooltip {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity:0.7;
}

彼らはCSSコードを超えていないと思います...彼らの透過的な仕組みについて誰か提案してもらえますか

4

3 に答える 3

0

現在、jQuery UI Tooltipにはasを定義するOpen Issue #6があり、このプラグインにはまだ実装されていません。arrowsconnectors

ファンシー矢印に独自のマークアップを追加するconnectorと、ブラウザのビューポートに対する要素の位置に基づいてツールチップの位置が変わる場合があります。これにより、矢印が間違った場所にある可能性があります。

代わりに、オプションとして矢印を含むjQuery qTip Pluginを使用します。これは、正しい場所を自動的に計算するコネクタを意味します。

これはスクリーンショットですが、このツールチップ プラグインのすべてのコーナー コネクタの例は、こちらに表示されます。

ここに画像の説明を入力

上のblue text写真の は、 に配置される qTip ツールチップのデモbottom leftです。そうは言っても、ツールチップ自体は、三角形の形のものを に配置することを知っていtop rightます。

于 2012-12-21T08:11:02.263 に答える
0

矢印の位置が少しズレているようです。私はそれをテストすることができないので、特定の値を与えることはできません. widthしかし、要素のandleftプロパティをいじる.arrowと、望ましい結果が得られると確信しています。

以下を試してください。

.arrow {
    width: 15px;
    height: 6px;
    position: absolute;
    top: 50%;
}

.arrow.left {
    left: -12px;
}
于 2012-12-21T06:32:14.240 に答える