jQuery

【jQuery】ツールチップスタイルプラグインinfoBox

May 23, 2017
infobox

infoBoxは、マウスオーバー時にツールチップを表示するjQueryプラグイン。ボックスは、ボックスの幅を指定しない限り、ページ外に移動することなく配置されます。

  1. width
  2. position
  3. bg_color
  4. text_color

Include JS Files

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/infoBox.js"></script>

HTML

<p>This will the paragraph content
    <a id="sampledata">This will be the information box content</a>
</p>

Initialize the plugin

$(document).ready(function(){
    $('#sampledata').infoBox();
});

MIT