May 6, 2018


Getting Started

Load jQuery and include Tooltipster’s files

    <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>

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

        $(document).ready(function() {

Style your tooltips

    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>