WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

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>

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