$(function() { $('#tooltip') .mouseover(function(e) { $('#tip').stop() .text($(this).data('tips')) .css({ top: e.pageY +10, left: e.pageX +35, }) .fadeIn(500); }) .mouseout(function (e) { $('#tip') .fadeOut(500); }); });
<div id="tooltip">ツールチップ</div> <div id="tip">ツールチップです。</div>
#tip{ cursor:pointer; position:absolute; display:none; background-color: rgba(225,101,174,0.6); color:#FFF; } #tooltip{ padding: 20px; border:dashed 1px #e1656d; }