質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

4437閲覧

$('セレクタ').tooltip()につきまして

hoshiimohunda

総合スコア15

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/03/09 02:34

編集2017/03/09 02:35

jQueryの「.tooltip()」でツールチップを表示しているのですが、
以下の条件を満たすように実装したいのですが、
お分かりの方がおりましたらご教示頂けないでしょうか?

・要素によって表示するpositionを変えたい
・画面の部分更新をするたび、更新した要素に対してツールチップを表示するため、
javascriptを再読み込みすることを避けたい

画面の部分更新が頻繁にあるため、
更新の都度javascriptの読み込むを防ぐため、
「$(.ue).tooltip()」のようなクラスセレクタ等ではなく
$(document)に対して「.tooltip()」を設定しておきたいのですが、
以下のようにしてしまうと要素ごとにpositonを変えることができません。

■ソース例
□HTML

<div class="ue" title="上">ツールチップを上に表示</div> <div class="sita" title="下">ツールチップを下に表示</div>

□java script

$(document).tooltip({ position: { my: "xxxx", at: "xxxx" }, });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2017/03/09 02:44

$().tooltipはjQueryの標準機能ではないのですが、どんなライブラリを使っていますでしょうか。
hoshiimohunda

2017/03/09 03:13

情報が足りず、申し訳ございません。jQuery UIライブラリになります。
guest

回答3

0

HTML

1<span class="sample" title="ツールチップのサンプル" data-tooltip="center-top">ツールチップのサンプル</span> 2<span class="sample" title="ツールチップのサンプル" data-tooltip="center-bottom">ツールチップのサンプル</span>

JavaScript

1$( function() { 2 $( '.sample[data-tooltip="center-top"]' ).tooltip( { 3 position: { 4 my: 'center bottom' 5 , at: 'center top' 6 } 7 } ); 8 $( '.sample[data-tooltip="center-bottom"]' ).tooltip( { 9 position: { 10 my: 'center top' 11 , at: 'center bottom' 12 } 13 } ); 14} ); 15```**動くサンプル:**[https://jsfiddle.net/x400L5wc/](https://jsfiddle.net/x400L5wc/) 16 17--- 18 19【Tooltip Widget | jQuery UI API Documentation】 20[http://api.jqueryui.com/tooltip/#option-position](http://api.jqueryui.com/tooltip/#option-position) 21 22【Tooltip / ツールチップ - jQuery UI 日本語リファレンス】 23[http://alphasis.info/jquery-ui/tooltip/](http://alphasis.info/jquery-ui/tooltip/) 24 25【jQuery UI を使ってカスタム ツールヒントを作成する】 26[https://msdn.microsoft.com/ja-jp/magazine/dn127078.aspx](https://msdn.microsoft.com/ja-jp/magazine/dn127078.aspx)

投稿2017/03/09 04:42

編集2017/03/09 04:43
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/03/09 05:06

> $(document)に対して「.tooltip()」を設定しておきたい これを読んでませんでした。ただ、tooltipは要素に対して作られるものなので、新たな要素を追加したらそれぞれ設定するしか無いと思います。
guest

0

ベストアンサー

$(document)に対して「.tooltip()」を設定したとしても、
ページの部分がロードされて更新されたら、イベントは付与し直す必要があると思います。
なので、素直にロード完了時に、$(更新された要素).tooltip()を再度実行するしか無いかと思います。

投稿2017/03/11 02:34

yohe32

総合スコア76

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshiimohunda

2017/03/24 07:58

皆様ご回答をありがとうございました。 ページの部分がロードされて更新されたタイミングで再度更新された部分に対して $(更新された要素).tooltip()をするようにしたいと思います。
guest

0

要素によって表示するpositionを変えたい

Bootstrap の tooltip を使ってはいかがですか? 以下にデモがあります。

http://getbootstrap.com/javascript/#tooltips

二つ目の要件が満たせるかどうかは分かりませんが・・・

【追伸】

jQuery ではなくて、jQuery UI の tooltip だったんですね。とすると、Bootstrap でも要件は満たせないかも。その場合は失礼しました。

投稿2017/03/09 02:59

編集2017/03/09 03:13
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問