jQuery

【jQuery】ツールチッププラグインTooltipster

May 6, 2018
Tooltipster

Tooltipsterはツールチップ用の柔軟で拡張可能なjQueryプラグイン。

Getting Started

Load jQuery and include Tooltipster’s files

<head>
    <link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="tooltipster/dist/js/tooltipster.bundle.min.js"></script>
</head>

Set up your HTML

// Putting a tooltip on an image:
<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

// Putting a tooltip on some text (span, div or whatever):
<span class="tooltip" title="This is my span's tooltip message!">Some text</span>

Activate Tooltipster

<head>
    ...
    <script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>
</head>

Style your tooltips

$('.tooltip').tooltipster({
    theme: 'tooltipster-noir'
});

Use HTML inside your tooltips

<span class="tooltip" data-tooltip-content="#tooltip_content">This span has a tooltip with HTML when you hover over it!</span>

<div class="tooltip_templates">
    <span id="tooltip_content">
        <img src="myimage.png" /> <strong>This is the content of my tooltip!</strong>
    </span>
</div>

MIT