(function($) { $.fn.tooltip = function() { /** * Core */ var $tooltip = $('<div class="md-tooltip"></div>').appendTo('body'); return this.each(function() { var self = $(this); self.on({ mouseenter:function(e) { setPosition(e.pageX, e.pageY); $tooltip.html(self.data('tooltip')); showTooltip(); }, mouseleave:function() { hideTooltip(); }, mousemove:function(e) { setPosition(e.pageX, e.pageY); } }); }); /** * Method */ function showTooltip() { $tooltip.stop() .fadeIn(); } function hideTooltip() { $tooltip.stop() .fadeOut(); } function setPosition(x, y) { $tooltip.css({ top: y + 15, left: x + 5 }); } }; }(jQuery)); $(function() { $('[data-tooltip]').tooltip(); });
<ul> <li data-tooltip="Dは泥酔、Nはナイト(夜)の意味で、「泥酔ナイト」">DN</li> <li data-tooltip="神がかって素晴らしい">カミッテル</li> <li data-tooltip="別件があるという意味の<br>オヤジギャグ">ベッケンバウアー</li> <li data-tooltip="「パターン」のガーリー系の活用事例">パティーン</li> <li data-tooltip="「ありがとう」の活用例">ありとーすちゃすてすチャース</li> <li data-tooltip="ハスハス(興奮状態)">HASHAS</li> <li data-tooltip="イケメン">池様</li> </ul>
/* for plugin */ .md-tooltip { display: none; position: absolute; padding: 7px 10px; -webkit-border-radius: 5px; border-radius: 5px; background: rgba(0, 0, 0, .7); *background: #333; color: #fff; font-size: 12px; } .md-tooltip:after { content: ""; position:absolute; width: 0; height: 0; left: 15px; top: -20px; margin: 0 0 0 -5px; border-top: 10px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 10px solid rgba(0, 0, 0, .7); } /* for demo */ ul { margin: 0; padding: 0; } li { list-style: none; display: inline-block; *display: inline; *zoom: 1; margin: 0 10px 10px 0; padding: 10px 20px; background: #eee; }