これが可能な解決策です。これはjQueryを使用します。これは、title
-attributeを使用できず、別の子要素を-Containerに配置できないため、select
有効なHTMLではありません。
デモを見る:
http://jsfiddle.net/DLyMG/
使い方
これの秘訣は、ホバーをバインドすることinterests.hover
です。最初の機能はselect
-boxを超えたときにトリガーされ、2番目の機能は離れたときにトリガーされます。私はこの理由でを追加しましたtimeout
:ユーザーが何かを選択すると、彼は要素の外に移動します(リストが要素自体よりも長いため)。したがって、彼が何かを選択すると、彼もmouseout
イベントをトリガーするので、がありtimeout
ます。
onchange
2つ目は、 -eventをバインドすることです。これは以下で実行されます。ユーザーが値を選択すると、ツールチップの内容が変更され、任意のテキストまたはHTMLを追加できます。
Javascript
<script>
$(document).ready(function () {
var interests = $('#Interests');
var tooltip = $('#tooltip');
var tooltipInfo = $('#tooltip_info');
interests.hover(
function() {
tooltip.fadeIn(200);
},
function() {
setTimeout ( function () {
tooltip.fadeOut(200); tooltipInfo.html();
}, 1000);
}
);
interests.bind('change', function() {
tooltipInfo.html('user has changed the value');
});
});
</script>
CSS
<style>
aside.tooltip {
display: none;
position: absolute;
top: 20px;
left: 300px;
}
</style>
HTML
<select id="Interests">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<aside id="tooltip" class="tooltip">
Hey, I'm a Tooltip.
<span id="tooltip_info"></span>
</aside>
ノート
もちろん、これにはさらにいくつかの改善が必要です。これがどのように可能であるかの単なる例。また、次のように、ドキュメントにjQueryライブラリを含める必要があります。
<script src="src/js/com.jquery/1.7/jquery-1.7.min.js"></script>