DEVELOPERS BLOGデベロッパーズブログ

  1. HOME > 
  2. 加藤 正人のデベロッパーズブログ > 
  3. jQuery UI の tooltip を select 要素に使用する際の注意

加藤 正人のデベロッパーズブログ

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。

加藤 正人

2014/02/11

jQuery UI の tooltip を select 要素に使用する際の注意

 

jQuery UI は便利なツールなのだが時々困った挙動をすることがある。今回は tooltip を select 要素に使用したことでハマった。

IE の場合、jQuery UI の tooltip を select 要素に使用すると、プルダウンした選択リストを選択する前に勝手に閉じてしまうのでリストから選択できなくなる。

この現象を検索してみたところ、回避策としては

  1. tooltip の検出する属性を 'title' から別のものに変更する
  2. tooltip を表示したい select 要素だけを含むコンテナ要素 (div とか span とか) を用意し、そちらに title 属性を記述し tooltip に処理させる

があった。検討してみた結果、1. だと少々コードを追加しなければならないので特別な理由が無ければ 2. が最も簡単な解決法となる。

    <select title=" 希望する都道府県を選択して下さい">
      …【中略】…
    </select>

    <span title="希望する都道府県を選択して下さい">
      <select>
        …【中略】…
      </select>
    </span>

のようにすることで対応できる。

関連タグ: jQueryUI  IE 

関連エントリー