Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
jQueryを使用してツールチップを表示する
<style type="text/css">
.tooltip {
display: none;
}
#tooltip-showing {
display: none;
padding: 15px;
width: 200px;
text-align: left;
overflow: hidden;
position: absolute;
z-index: 9999;
border: solid 1px;
}
</style>
<a href="https://www.google.com/">Google
<span class="tooltip"><p>A link to Google.com</p></span>
</a>
$(function() {
setTooltipEvent();
});
/**
* ツールチップのイベントをセットする
*/
setTooltipEvent = function() {
/**
* ツールチップを表示する
* @param {object} event handler
*/
$('a:has(.tooltip)').mouseover(function(event) {
$('body').append(
'<div id="tooltip-showing">'
+ $(this).children('.tooltip').html()
+ '</div>'
);
$('#tooltip-showing').css({
top: (event.pageY + 10) + 'px',
left: (event.pageX + 10) + 'px',
background: '#87CEEB',
}).fadeIn('fast');
}).mousemove(function(event) {
$('#tooltip-showing').css({
top: (event.pageY + 10) + 'px',
left: (event.pageX + 10) + 'px',
});
}).mouseout(function(event) {
$('#tooltip-showing').remove();
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment