Last active
December 14, 2015 05:48
-
-
Save hugojay/5037490 to your computer and use it in GitHub Desktop.
滑鼠移至下拉式選單(<select>)之上的時候,用 tooltip 提示氣泡的方式顯示目前下拉式選單所選擇的文字內容。
使用動機:當<select>被限制寬度,而可能無法一目了然地看到目前所選擇的長文字時。
需要:jQuery 1.7以上,如為jQuery 1.4.2~1.6.x只要把.on()改成.delegate()寫法即可
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
$("select").on("mouseenter", function(){ | |
if($("#tooltip").length == 0){ | |
$("body").append("<div id='tooltip'></div>"); | |
} | |
$("#tooltip").text($(this).children(":selected").text()); | |
$("#tooltip").css("position", "absolute").hide(); | |
$(document).on("mousemove", function(e){ | |
$("#tooltip").fadeIn("fast").css({ | |
left: e.pageX + 9, | |
top: e.pageY + 6 | |
}); | |
}); | |
}).on("mouseleave", function(){ | |
$("#tooltip").remove(); | |
$(document).off("mousemove"); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment