web-dev-qa-db-ja.com

ラベルのホバーにツールチップを表示しますか？

私は以下のHTMLコードを持っていますか？

<label for="male">Hello This Will Have Some Value</label>

しかし、実際にはこの長いラベルを表示するのに十分なスペースがありません。だから、次のようにラベルを作成することを考えました。

<label for="male">Hello...</label>

次に、ラベル値全体を保持する非表示フィールドを作成します

<input type="hidden" name="Language" value="Hello This Will Have Some Value">

ユーザーがHello...の上にマウスを置くと、jqueryを使用してツールチップに非表示フィールドの値Hello This Will Have Some Valueを表示できますか？

ありがとう！

javascriptjqueryhtmlcsshtml5
23
user755806

ラベルタグには "title attribute"を使用できます。

<label title="Hello This Will Have Some Value">Hello...</label>

見た目をさらに制御する必要がある場合は、

1次のように http://getbootstrap.com/javascript/#tooltips を試してください。ただし、ブートストラップを含める必要があります。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button>

2。 https://jqueryui.com/tooltip/ を試してください。ただし、jQueryUIを含める必要があります。

<script type="text/javascript">
$(document).ready(function(){
$(this).tooltip();
});
</script>
45
sanchit

非表示フィールドを使用する必要はありません。 「title」プロパティを使用します。ブラウザのデフォルトのツールチップが表示されます。次に、jQueryプラグイン（前述のbootstrap tooltip）を使用して、カスタム形式のツールチップを表示できます。

<label for="male" title="Hello This Will Have Some Value">Hello ...</label>

ヒント：cssを使用して、ボックスに収まらないテキストをトリミングすることもできます（text-overflowプロパティ）。 http://jsfiddle.net/8eeHs/ を参照してください

5
longchiwen

ラベルにタイトルを設定するだけです：

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

JQueryの使用：

<label for="male" data-title="Language" />
<input type="hidden" name="Language" value="Hello This Will Have Some Value">

$("label").prop("title", function() {
    return $("input[name='" + $(this).data("title") + "']").text();
});

CSS3を使用できる場合は、text-overflow: Ellipsis;を使用して省略記号を処理できるため、jQueryを使用してラベルからテキストをtitle属性にコピーするだけです。

HTML：

<label for="male">Hello This Will Have Some Value</label>

CSS：

label {
    display: inline-block;
    width: 50px;
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

jQuery：

$("label").prop("title", function() {
   return $(this).text(); 
});

例： http://jsfiddle.net/Xm8Xe/

最後に、堅牢でクロスブラウザのサポートが必要な場合は、 DotDotDot jQueryプラグイン を使用できます。

1
CodingIntrigue

標準のツールチップを使用して見つけましたか？次のようなタイトル属性を使用できます

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

同じ値のtitle属性を、ラベルの対象となる要素に追加することもできます。

1
Hans

Htmlでtitle属性を使用できます:)

<label title="This is the full title of the label">This is the...</label>

マウスをしばらく置いたままにすると、完全なタイトルを含むボックスがポップアップ表示されます。

さらに制御したい場合は、jQueryのTipsyプラグインをご覧になることをお勧めします- http://onehackoranother.com/projects/jquery/tipsy/ 始めるのはかなり簡単です。

0
Fizk

JQuery UIもある場合は、これを追加できます。

$(document).ready(function () {
  $(document).tooltip();
});

次に、非表示の入力の代わりにタイトルが必要です。 RGrahamは既にこれを行うための回答を投稿しました：P

0
KoalaBear

bootstrap=のツールチップは優れていますが、jQuery UIには非常に優れたツールチップ関数もあります。これは here について読むことができます。

例：

<label for="male" id="foo" title="Hello This Will Have Some Value">Hello...</label>

次に、頭の中で既にjQueryおよびjQueryUIライブラリを参照していると仮定して、次のようなスクリプト要素を追加します。

<script type="text/javascript">
$(document).ready(function(){
    $(this).tooltip();
});
</script>

これにより、タイトル属性を持つ要素をロールオーバーすると、タイトル属性の内容がツールチップとして表示されます。

0
Andy Kaufman