45

この質問のためにjsFiddleを作成しました。

a.tip {
    position: relative;
}

a.tip span {
    display: none;
    position: absolute;
    top: -5px;
    left: 60px;
    width: 125px;
    padding: 5px;
    z-index: 100;
    background: #000;
    color: #fff;
    -moz-border-radius: 5px; /* this works only in camino/firefox */
    -webkit-border-radius: 5px; /* this is just for Safari */
}

a:hover.tip {
    font-size: 99%; /* this is just for IE */
}

a:hover.tip span {
    display: block;
}
        
<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>

基本的に、私のサイトにはツールチップがあり、リンクの右側に表示されます。しかし、黒いボックスの左側で、リンクを指すボックスに三角形を付けたいのですが、CSS だけを使用してこれを行うことは可能ですか? このように左に

矢印付きのツールチップ

4

3 に答える 3

59

あなたはCSSでそれを行うことができます、cssトライアングルトリックを使用して

a.tip span:before{
    content:'';
    display:block;
    width:0;
    height:0;
    position:absolute;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right:8px solid black;
    left:-8px;

    top:7px;
}

http://jsfiddle.net/dAutM/7/でのデモ

ライブスニペット

a.tip {
  position: relative;
}

a.tip span {
  display: none;
  position: absolute;
  top: -5px;
  left: 60px;
  width: 125px;
  padding: 5px;
  z-index: 100;
  background: #000;
  color: #fff;
  -moz-border-radius: 5px;
  /* this works only in camino/firefox */
  -webkit-border-radius: 5px;
  /* this is just for Safari */
}

a.tip span:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid black;
  left: -8px;
  top: 7px;
}

a:hover.tip {
  font-size: 99%;
  /* this is just for IE */
}

a:hover.tip span {
  display: block;
}
<center><a href="http://google.com/" class="tip">Link!<span>Hi its me!</span></a></center>

于 2012-09-26T21:16:42.010 に答える
21

CSSでのみ三角形のツールチップを作成するためにCSStooltip.comを開発しました。

例 ：

ここに画像の説明を入力してください

span.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: transparent #FFFFFF transparent transparent;
      top: 11px;
      left: -24px;
}
于 2012-09-26T21:14:31.947 に答える
5

これを試してください: http://ecoconsulting.co.uk/examples/css-tooltip/

問題を説明し、問題を修正し、境界線付きの矢印とツールチップを許可します。

リンクの内容

:afterと を使用した CSS のみのツールチップ:before

これらのツールチップ ロールオーバーは、カスタム HTML5 a タグ data- 属性 (data-tooltip) を使用して、属性に含まれるテキストを表示するツールチップを設定します。矢印の三角形は、生成された 2 つの重なり合う要素によって形成され、上部の境界線のみが表示されます (rl は透明、下部は 0px)。すべてのツールチップ テキストはリンクの拡張であるため、クリック可能です。

ソースを表示してコードを取得します。可能な限りクリーンで、各ツールチップには個別の CSS スタイルのブロックがあります。完成したスタイルには、Arrow ツールチップ (最終) CSS を使用してください。色が気に入らない？あなたは何をするべきか知っています。元のインスピレーション: Nicolas Gallagher の Pure CSS speech bubbleと、純粋な CSS で Addy Osmani の JQuery ツールチップをエミュレートしたいという願望。

  1. CSS のみのツールチップ:before(矢印なし)を使用

    CSS スタイルのロールオーバー ツールチップを含むこのリンクはdata-、ツールチップ コンテンツの属性を使用します。:afterを使用してツールチップを生成することもできます。ボックスの影により、コンテンツの上に浮いているように見えます。

  2. :beforeおよび:after( aspan 内のタグ)を使用した CSS のみのツールチップ矢印

    リンクの :before プロパティは既にツールチップ テキストに使用されているため、さらに生成されたコンテンツを提供するには、追加の要素が必要です。この CSS スタイルのロールオーバー ツールチップ リンクは、リンクをラップするスパンで重複する :before プロパティと :after プロパティから作成された矢印を追加します。三角形には幅も高さもなく、境界線のみから構築されます。つまり、「矢印」の周りではなく、lr 境界線の透明な長方形の外側に表示されるため、正の値を持つボックス シャドウを使用できません。

障害: 矢印の「境界」にカーソルを合わせると三角形が残る。障害: Mozilla (Firefox): 矢印の境界線がリンクの下にあり、より高い z-index が必要です。

  1. 最終的な CSS のみのツールチップの矢印:beforeと:after(タグ span内)a

    この半透明の CSS スタイルのロールオーバー ツールチップでは、a タグ内でスパンを使用しています。影は元に戻りますが、矢印を避けるために上/左の値が負になっています。最後の仕上げとして、アルファ透明度 (rgba) がツールチップ要素に適用されます。試行錯誤を繰り返しながら、矢印の色を下のグラデーションにブレンドし、内側の三角形の下にある外側の三角形の (暗い) 境界線の色の可視性を減らします。 .

ツールチップ クラスを適用し、リンク テキストをスパンでラップすることにより、任意のリンクに追加できます。ツールチップはデフォルトでスパンのfont-weight値を継承します。

悲しいことに、生成された要素の CSS3 (この場合はフェードイン) トランジションは、まだ十分に広くサポートされていません (FF のみですが、それでも機能させることができませんでした)。

于 2012-09-26T21:22:30.130 に答える