web-dev-qa-db-ja.com

純粋なcssフローティングツールチップ（絶対に配置されたスパン）をテキストに合わせて動的にサイズ変更する方法

最近、CSS擬似クラスを使用するアイデアがありました:hoverマウスをリンクの上に置いたときに、スタイル付きのツールチップを表示します。

リンクの基本的なコードは次のようになります。

.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:black;
    border-radius:5px;
    color:white;
    box-shadow:1px 1px 3px gray;
    position:absolute;
    padding:5px;
    top:1.3em;
    left:0px;   
    max-width:200px; /* I don't want the width to be too large... */
}
<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a>

結果はまさに私が望むものです 、しかし1つの厄介な問題があります：スパンはテキストを収容するために拡張されず、幅を指定しないとテキストは押しつぶされます。

私はグーグルでいくつかの検索をしました、人々がした仕事のいくつかの例を見つけました（ この例 私が得たものに不気味に似ています）、しかし誰も私がspan幅の問題に取り組んでいないようですm持っている。

htmlcsstooltip
13
Titus

私はこの答えが非常に遅いことを知っています、しかしあなたの問題への鍵は使うことであるように思われます：

white-space: nowrap;

スパンの内側で、あらゆる種類の幅の定義を取り除きます。もちろん、これの欠点は、ツールチップが1行しかサポートできないことです。複数行のソリューションが必要な場合は、JavaScriptを使用する必要があります。

このメソッドの例を次に示します。 http://jsbin.com/oxamez/1/edit

追加のボーナスは、これがIE7までずっと機能することです。 IE7をサポートする必要がない場合は、スパンとimgスタイルを.tooltipの：beforeと：afterに折りたたむことをお勧めします。次に、data- *属性を使用してテキストを入力できます。

11
schadeck

純粋なCSSでこの問題を完全に解決できるとは思いません。最初の問題は、spanをaタグ内に配置すると、spanはリンクの幅までしか拡張したくないということです。 spanの後にaを配置すると、実行しようとしていることに近づくことができますが、margin-top: 1.3emを設定してから設定する必要があります。ツールチップを左にスライドさせるための負のマージン。ただし、これは固定設定になるため、各リンクの先頭に正確に配置されるわけではありません。

leftを動的に設定するjQueryソリューションを作成しました（そして、適切な測定のためのちょっとしたフェード効果）。

デモ： http://jsfiddle.net/wdm954/9jaZL/7/


$('.hasTooltip').hover(function() {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTooltip');
    $(this).next('span').css('left', offset.left + 'px');
}, function() {
    $(this).next('span').fadeOut(200);
});
5
wdm

これらのツールチップは、WordPressのテーマに簡単に統合することもできます。 CSSを自分のスタイルにコピーするだけです。 Cssファイルと投稿を作成するときは、HTMLコードを利用して、独自のツールチップを作成してください。残りはすべてスタイリングであり、自分の選択に応じて変更できます。ツールチップボックス内の画像を使用することもできます。

http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

1
Nabeela Ansari

この質問はもう少し古いですが、次の妥協案を提案します。
max-width：200pxを使用してください。最小幅：300％;とか、ぐらい、
一方、最小幅は最大幅よりも高くなる可能性があります。
それを理解してください。
この方法では、完全に液体のツールチップを使用することはできませんが、幅は、含まれているリンク要素の幅と一種の相関関係にあります。
光学的快適さの観点から、このアプローチは価値があるかもしれません。

編集：
まあ、私が書いたのはナンセンスだと認めなければなりません。最小幅が最大幅よりも大きくなる可能性がある場合、それは意味がありません。したがって、最小幅をパーセントで入力するだけで、私が提案しようとしたことを達成できます。そのために残念。

0
noRiddle

私はこれを見つけました、そしてそれは私のために働いていました。同じページに多くの要素とjqueryプラグインがあり、操作できない場合に適したソリューションです。

<a href="#">Text <span>Tooltip</span></a>

純粋なCSSソリューションを表示する： JS BIN

クレジット trezy.com

0
Adrian P.