web-dev-qa-db-ja.com

純粋なCSSを使用して「ツールチップテール」を作成するにはどうすればよいですか？

きちんとしたCSSのトリックに出会いました。フィドルをチェックしてください...

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

これにより、小さな矢印/三角形のような効果、「ツールチップの尾」が作成されます。これは私の心を吹き飛ばします！ 私はこれがどのように機能するかを知りたいと本当に思っていますか？

さらに、このCSSトリックを拡張して、次のような効果を作成する方法はありますか？

enter image description here

これは興味深い問題です。これは、今のところ影を無視して、CSSのみを使用して実行できますか？

更新1

最初の質問に対する解決策を見つけました。ここにフィドルがあります...

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

さて、純粋なCSSを使用して、影を含めてクロスブラウザー互換性を持たせて、上の図を正確に模倣するにはどうすればよいですか？

更新2

以下の回答を組み合わせた後の私のソリューションです。複数のブラウザーでテストしたことはありませんが、Chromeでは見栄えがよくなります。

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}
csscss3tooltipcss-shapes
88
Hristo

ボックスシャドウを使用した例を次に示します。すべての最新バージョンのブラウザーがこれをサポートする必要があります

http://jsfiddle.net/MZXCj/1/

HTML：

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS：

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>
60
MikeM

最初の質問に答えるための説明は次のとおりです（私は怠け者なので、実際のCSSを他の人に任せます-投票に値すると思う答えを投票してください！）：

これにより、小さな矢印/三角形のような効果、「ツールチップの尾」が作成されます。これは私の心を吹き飛ばします！ 私はこれがどのように機能するかを知りたいと本当に思っていますか？

  1. 同じスタイル（さまざまなEdge色）で境界線をレンダリングする場合（あなたの場合、solid）、隣接するコーナーの各ペアを分割するシームは対角線です。これは、 ここの図groove、ridge、inset、およびoutsetボーダースタイルの描写と非常に似ています。

    すべてのブラウザは同じように動作し、覚えている限りそのように動作しますが、この動作はCSS2.1仕様またはCSS Backgrounds and Bordersモジュールで完全に定義されていないことに注意してください。後者には コーナーでの色とスタイルの移行 を記述するセクションがあり、説明は、コーナー半径がゼロの境界線の場合、レンダリングされる線は実際にはコーナーの角を結ぶ線であることを暗示しているようですEdgeをBorder Edgeのコーナーでパディングします（等幅のボーダーに対して45度の角度の線が生じます）。しかし、仕様では、常にそうであるとは限らないことに注意してください（特にゼロのボーダーを考慮していないため）明示的にコーナー半径）。1

  2. コンテンツ（元のW3C）ボックスモデル により、20ピクセルの境界から40x40の領域が作成され、コンテンツのサイズは0x0として定義されます。

  3. 四角を結ぶ対角線で正方形を分割すると、正方形の中間点で直角が交わる4つの直角三角形が生成されます（以下を参照）。

  4. 上部、下部、および左の境界線は、.tooltiptail要素のコンテナーの背景に一致するように白く、右の境界線はツールチップの背景色に一致する青の色合いです。

    border-color: #ffffff #a0c7ff #ffffff #ffffff;

結果はこれで、境界線にラベルが付けられ、信頼できるラインツールを使用して境界線境界が追加されます。

ツールチップの尾の向きを変えるのは、単にツールチップの色を変えるだけです。たとえば、これにより、チップの下部にアタッチされたテールが生成されます。

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFiddleプレビュー

1あなたが標準への準拠にこだわりを持っているなら、あなたはこれをすべてハックと考えることもできます。

56
BoltClock

このツールチップは、1つのdiv要素のみで実行します。

HTML：

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

CSS：

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

デモ

説明：

他の例と同じように、通常の境界線を持つdivがあります。尾はCSSの単純な組み合わせです：

  • 私は疑似セレクターを使用します：before（：afterも正常に動作します）
  • テールを見えるようにするために、コンテンツを空白で強制します。
  • ボックスを45度から回転させて、ツールチップの横の角を修正します
  • サイズと位置に驚きはありません。
  • 必要な2つの側面に境界線を追加します。
  • そして最後に、外側の境界線に影を追加します。
19
Yoann

影なしのツールチップ

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

フィドルデモ

Shadowで（WebKitでは少し奇妙に見えます...最適化する必要があります）：

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}
<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

デモ1 、 デモ2

11
Archimedix

CSSの：beforeおよび：after擬似要素を使用できます。たとえば、三角形の挿入には：beforeを、長方形の挿入には：afterを使用できます。これら2つの組み合わせにより、バブルツールヒントが作成されます。

例：

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

オンラインツールは http://www.careerbless.com/services/css/csstooltipcreator.php で入手できます。

3
Kiran