【jQuery】超軽量jQueryツールチッププラグインzTip

jQuery

ztip

October 29, 2017

zTipは無料の超軽量jQueryツールチッププラグイン。

Getting started

jQueryライブラリがインストールされていることを確認します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

headにCSSを含めます

<link rel="stylesheet" href="ztip.css" />

/bodyタグの直前

<script src="ztip.min.js"></script>
<script>
    jQuery(document).ready(function($){
        $(".my-tooltip").zTip();
    });
</script>

HTML

<span class="my-tooltip" title="My tooltip text">Hover me</span>

Options

<script>
    $(".my-tooltip").zTip({
        // Theme
        theme: 'default',

        // attr:title | > .child-elem | .dom-elem | function callback
        source: 'attr:title',

        // Tooltip positon relative to element top | bottom
        position: 'top',

    });
</script>

MIT

Latest Posts

Related Posts