### Initialization and Chaining Examples

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Examples demonstrating how to initialize Tooltipster and chain its methods.

```APIDOC
## Initialization and Chaining Examples

### Example 1: Basic Initialization and Method Calls

```javascript
// Initialize your tooltip as usual:
$('#my-tooltip').tooltipster({});

// At some point you may decide to update its content:
$('#my-tooltip').tooltipster('content', 'My new content');

// ...and open it:
$('#my-tooltip').tooltipster('open');

// NOTE: most methods are actually chainable, as you would expect them to be:
$('#my-other-tooltip')
    .tooltipster({})
    .tooltipster('content', 'My new content')
    .tooltipster('open');
```

### Example 2: Using Callbacks during Initialization

```javascript
$('.tooltip').tooltipster({
    functionBefore: function(instance, helper) {
        instance.content('My new content');
    }
});
```
```

--------------------------------

### Core Methods Usage Examples

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Examples illustrating the usage of core methods like `setDefaults` and `instances`.

```APIDOC
## Core Methods Usage Examples

### Setting Default Options

```javascript
// Set default options for all future tooltip instantiations
$.tooltipster.setDefaults({
    side: 'bottom',
    // ... other options
});
```

### Accessing and Manipulating All Instances

```javascript
// The `instances` method, when used without a second parameter, allows you to access all tooltips present in the page.
// That may be useful to close all tooltips at once for example:
var instances = $.tooltipster.instances();
$.each(instances, function(i, instance){
    instance.close();
});
```

### Getting Latest Initialized Instances

```javascript
$('.tooltip1').tooltipster();
$('.tooltip2').tooltipster();

// This method call will only return an array with the instances created for the elements that matched '.tooltip2'
// because that's the latest initializing call.
var instances = $.tooltipster.instancesLatest();
```
```

--------------------------------

### Instance Method Call Example

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Demonstrates how to call instance methods on a tooltip using either the origin's HTML element or the tooltip instance itself.

```javascript
$"#my-tooltip").tooltipster(methodName [, argument1] [, argument2]);
```

--------------------------------

### Event-Driven Tooltipster Callbacks

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Manage Tooltipster callbacks using event listeners for more flexibility. This example shows how to bind multiple callbacks to the 'before' event on a specific instance, offering an alternative to monolithic callback functions.

```javascript
var instance = $("#my-tooltip").tooltipster({}).tooltipster('instance');

instance
    .on('before', doThis)
    .on('before', doThat);
```

--------------------------------

### Tooltipster Restoration Example

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Applies Tooltipster to elements with the ID 'circle circle' and 'circle tspan', demonstrating the 'previous' restoration option.

```javascript
$('#circle circle').tooltipster({ restoration: 'previous' });
$('#circle tspan').tooltipster();
```

--------------------------------

### Initialize Tooltips and Handle Grouped Events

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Initializes tooltips on elements with the 'tooltip' class. The 'start' event handler manages grouped tooltips, closing existing ones instantly when a new one is triggered on a 'tooltip_group' element.

```javascript
// initialize tooltips in the page as usual
$('.tooltip').tooltipster();

// bind on start events (triggered on mouseenter)
$.tooltipster.on('start', function(event) {

    if ($(event.instance.elementOrigin()).hasClass('tooltip_group')) {

        var instances = $.tooltipster.instances('.tooltip_group'),
            open = false,
            duration;

        $.each(instances, function (i, instance) {

            if (instance !== event.instance) {

                // if another instance is already open
                if (instance.status().open){

                    open = true;

                    // get the current animationDuration
                    duration = instance.option('animationDuration');

                    // close the tooltip without animation
                    instance.option('animationDuration', 0);
                    instance.close();
                    
                    // restore the animationDuration to its normal value
                    instance.option('animationDuration', duration);
                }
            }
        });

        // if another instance was open
        if (open) {

            duration = event.instance.option('animationDuration');

            // open the tooltip without animation
            event.instance.option('animationDuration', 0);
            event.instance.open();
            
            // restore the animationDuration to its normal value
            event.instance.option('animationDuration', duration);

            // now that we have opened the tooltip, the hover trigger must be stopped
            event.stop();
        }
    }
});
```

--------------------------------

### Load Tooltip Content via AJAX

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Use the 'functionBefore' callback to load tooltip content dynamically via AJAX. This example displays 'Loading...' until the data is fetched and then updates the tooltip content. It ensures data is loaded only once.

```javascript
$('.tooltip').tooltipster({
    content: 'Loading...', 
    // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
    functionBefore: function(instance, helper) {
        
        var $origin = $(helper.origin);
        
        // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
        if ($origin.data('loaded') !== true) {

            $.get('https://example.com/ajax.php', function(data) {

                // call the 'content' method to update the content of our tooltip with the returned data.
                // note: this content update will trigger an update animation (see the updateAnimation option)
                instance.content(data);

                // to remember that the data has been loaded
                $origin.data('loaded', true);
            });
        }
    }
});
```

--------------------------------

### Apply Custom Tooltipster Theme

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Apply a custom Tooltipster theme by providing an array of theme names to the 'theme' option. This example applies both a base theme ('tooltipster-noir') and a custom secondary theme ('tooltipster-noir-customized').

```javascript
$('.tooltip').tooltipster({
    theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});
```

--------------------------------

### Content Method

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Get or set tooltip content dynamically. Supports strings, HTML elements, and jQuery objects.

```APIDOC
## Content Method

### Description
Get or set tooltip content dynamically. Supports strings, HTML elements, and jQuery objects.

### Method
```javascript
// Initialize tooltip
$('#element').tooltipster({
    content: 'Initial content'
});

// Get current content
var content = $('#element').tooltipster('content');
console.log(content); // 'Initial content'

// Set new content (works whether tooltip is open or closed)
$('#element').tooltipster('content', 'New content');

// Set HTML content
$('#element').tooltipster('content', $('<strong>Bold content</strong>'));

// Update content via instance
$('#element').tooltipster({
    functionBefore: function(instance, helper) {
        instance.content('Dynamic content loaded!');
    }
});
```
```

--------------------------------

### Core Event Listeners for All Tooltipster Instances

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Set default callbacks for all Tooltipster instances using core event listeners. This example demonstrates binding a function to the 'init' event, which will be executed for every initialized tooltip, in addition to any instance-specific initializers.

```javascript
$.tooltipster.on('init', function(event){
    doThis();
});

$("#my-tooltip").tooltipster({
    functionInit: doThat
});
```

--------------------------------

### Set HTML Content Dynamically

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Use the `functionInit` option to dynamically set HTML content for a tooltip. This example detaches an HTML element and uses it as the tooltip's content.

```javascript
 $('.tooltip').tooltipster({
    functionInit: function(instance, helper){
        var content = $(helper.origin).find('.tooltip_content').detach();
        instance.content(content);
    }
});
```

--------------------------------

### Live Binding for New Elements with Tooltipster

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Implement live binding for elements added to the DOM after initialization. This example uses event delegation on the body to attach tooltips to elements matching '.tooltip:not(.tooltipstered)' as they are interacted with. It also includes opening the tooltip immediately upon interaction. Consider changing the selector and event type as needed.

```javascript
$"body").on('mouseenter', '.tooltip:not(.tooltipstered)', function(){
    $(this)
        .tooltipster({ ... })
        .tooltipster('open');
});
```

--------------------------------

### Load Tooltip Content Dynamically via AJAX

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Use the `functionBefore` callback to load content asynchronously. Ensure content is only loaded once by marking the element with data. Handles basic AJAX GET requests and more complex `$.ajax` calls with error handling.

```javascript
$('.tooltip').tooltipster({
    content: 'Loading...', 
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);

        // Only load once
        if ($origin.data('loaded') !== true) {
            $.get('https://api.example.com/tooltip-data', function(data) {
                // Update tooltip content with response
                instance.content(data);

                // Mark as loaded to prevent repeated requests
                $origin.data('loaded', true);
            });
        }
    }
});
```

```javascript
$('.tooltip').tooltipster({
    content: 'Loading...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin),
            dataId = $origin.data('content-id');

        if (!$origin.data('loaded')) {
            $.ajax({
                url: '/api/tooltip/' + dataId,
                success: function(response) {
                    instance.content(response.html);
                    $origin.data('loaded', true);
                },
                error: function() {
                    instance.content('Error loading content');
                }
            });
        }
    }
});
```

--------------------------------

### Initialize Tooltipster with Options

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Demonstrates initializing Tooltipster with various common options like animation, delay, theme, and trigger.

```javascript
 $('.tooltip').tooltipster({
   animation: 'fade',
   delay: 200,
   theme: 'tooltipster-punk',
   trigger: 'click'
});
```

--------------------------------

### Get Origin Element Method

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Returns the HTML element that the tooltip is attached to.

```javascript
instance.elementOrigin();
```

--------------------------------

### Initialize multiple tooltips with a callback

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

When using multiple tooltips, callbacks like 'functionInit' receive the specific instance that triggered the callback, allowing targeted manipulation.

```javascript
$('#my-element').tooltipster({
    content: 'HELLO',
    functionInit: function(instance, helper) {
        var string = instance.content();
        instance.content(string.toLowerCase());
    },
    multiple: true
});
```

--------------------------------

### Get Tooltip Element Method

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Returns the root HTML element of the tooltip if it is currently open, otherwise returns null.

```javascript
instance.elementTooltip();
```

--------------------------------

### Initialize Tooltipster with Custom Touchstart/Touchleave Triggers (No Delay)

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Configure custom touch triggers for opening on touchstart and closing on touchleave, with no delay. Ideal for mobile interactions.

```javascript
$('#custom_touch_hover').tooltipster({ delayTouch: 0, trigger: 'custom', triggerOpen: { touchstart: true }, triggerClose: { touchleave: true } });
```

--------------------------------

### Query Tooltip Status and Configuration

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Demonstrates how to use the 'status' method to retrieve the current state (destroyed, enabled, open, state) and configuration of a tooltip. Useful for conditional logic.

```javascript
$('#my-tooltip').tooltipster();

var status = $('#my-tooltip').tooltipster('status');
console.log(status);
// {
//     destroyed: false,    // Has tooltip been destroyed
//     enabled: true,       // Is tooltip enabled
//     open: false,         // Is tooltip currently open
//     state: 'closed'      // 'appearing', 'stable', 'disappearing', 'closed'
// }

// Use in conditional logic
if (!status.open) {
    $('#my-tooltip').tooltipster('open');
}

if (status.state === 'stable') {
    console.log('Tooltip is fully visible and stable');
}
```

--------------------------------

### Get Tooltip Content Method

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Retrieves the current content of a tooltip. If multiple origins match the selector, it returns the content of the first one.

```javascript
instance.content();
```

--------------------------------

### Format Data Sets for Tooltip Content (On-the-fly)

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Use `functionInit` to store raw data and `functionFormat` to format it for display only when the tooltip is shown, preserving the original data.

```html
<span id="example" title='["Sarah", "John", "Matthew"]'>People</span>
```

```javascript
$('#example').tooltipster({

    functionInit: function(instance, helper){

        var content = instance.content(),
            people = JSON.parse(content);
		
        instance.content(people);
    },
    // this formats the content on the fly when it needs to be displayed but does not modify its value
    functionFormat: function(instance, helper, content){

        var displayedContent = 'We have ' + content.length + ' people today. Say hello to ' + content.join(', ');
        
        return displayedContent;
    }
});
```

```javascript
// Alright! this logs: ["Sarah", "John", "Matthew"]
console.log($('#example').tooltipster('content'));
```

--------------------------------

### Get and use a Tooltipster instance

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Retrieve the Tooltipster instance for an element to directly call its methods. This is an alternative to calling methods through the jQuery plugin interface.

```javascript
var instance = $('#my-element').tooltipster('instance');

instance.open().content('My new content');
```

--------------------------------

### Apply Built-in and Custom Themes

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Explains how to apply Tooltipster's built-in themes (e.g., 'tooltipster-noir') and how to extend them for custom styling. Also shows how to set default themes for all tooltips.

```javascript
// Use built-in theme
$('.tooltip').tooltipster({
    theme: 'tooltipster-noir'
});
// Available themes: tooltipster-light, tooltipster-borderless,
// tooltipster-punk, tooltipster-noir, tooltipster-shadow

// Apply multiple themes (for sub-theming)
$('.tooltip').tooltipster({
    theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});

// CSS for custom theme extension:
// .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
//     background: grey;
//     border: 3px solid red;
//     border-radius: 6px;
// }

// Set default theme for all tooltips
$.tooltipster.setDefaults({
    theme: 'tooltipster-light',
    animation: 'grow',
    delay: 100
});
```

--------------------------------

### Manipulate multiple tooltips using instances

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Access and control individual tooltips on an element that has multiple tooltips enabled. Use $.tooltipster.instances() to get an array of all active instances.

```javascript
var instances = $.tooltipster.instances($myElement);

// use the instances to make any method calls on the tooltips
instances[0].content('New content for my first tooltip').open();
instances[1].content('New content for my second tooltip').open();
```

--------------------------------

### Initialize Tooltipster with Custom Touchstart/Touchleave Triggers (Interactive)

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Enable interactivity for tooltips triggered by touchstart and touchleave. Allows users to interact with the tooltip content.

```javascript
$('#custom_touch_hoverinteractive').tooltipster({ interactive: true, trigger: 'custom', triggerOpen: { touchstart: true }, triggerClose: { touchleave: true } });
```

--------------------------------

### Listen to Tooltip Lifecycle Events

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Shows how to use the event system to hook into tooltip lifecycle events like 'before', 'ready', and 'after' for custom behavior. Supports both instance-level and core-level listeners.

```javascript
// Instance-level event listeners
var instance = $('#my-tooltip').tooltipster({}).tooltipster('instance');

instance
    .on('before', function(event) {
        console.log('Tooltip about to open');
        // event.stop() to prevent opening
    })
    .on('ready', function(event) {
        console.log('Tooltip is open and ready');
    })
    .on('after', function(event) {
        console.log('Tooltip has closed');
    })
    .on('state', function(event) {
        // event.state: 'appearing', 'stable', 'disappearing', 'closed'
        console.log('State changed to:', event.state);
    });

// Core-level listeners (affect all tooltips)
$.tooltipster.on('init', function(event) {
    console.log('New tooltip initialized:', event.instance);
});

$.tooltipster.on('before', function(event) {
    // Global pre-open hook
    if (someCondition) {
        event.stop(); // Prevent this tooltip from opening
    }
});

// Unbind listeners
instance.off('before');
$.tooltipster.off('init');

// Available events:
// init, before, ready, after, close, closing, created, destroy, destroyed, 
// format, geometry, position, reposition, repositioned, scroll, start,
// startcancel, startend, state, updated
```

--------------------------------

### Get Latest Initialized Tooltip Instances

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Retrieves only the Tooltipster instances that were generated during the most recent initialization call. This is helpful when you need to interact with a specific group of newly created tooltips.

```javascript
 $('.tooltip1').tooltipster();
$('.tooltip2').tooltipster();
// this method call will only return an array with the instances created for the elements that matched '.tooltip2' because that's the latest initializing call.
var instances = $.tooltipster.instancesLatest();
```

--------------------------------

### Initialize and Update Tooltip Content

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Demonstrates initializing a tooltip, updating its content, and then opening it. Most methods are chainable for sequential operations.

```javascript
// initialize your tooltip as usual:
$('#my-tooltip').tooltipster({});
// at some point you may decide to update its content:
$('#my-tooltip').tooltipster('content', 'My new content');
// ...and open it:
$('#my-tooltip').tooltipster('open');
```

```javascript
// NOTE: most methods are actually chainable, as you would expect them to be:
$('#my-other-tooltip')
    .tooltipster({})
    .tooltipster('content', 'My new content')
    .tooltipster('open');
```

--------------------------------

### Custom Tooltip Triggers: Mouse Enter and Close on Click/Scroll

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Configure a tooltip to open on mouse enter and close on either a mouse click or scrolling. This setup is primarily for desktop interactions.

```javascript
$('#example').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        mouseenter: true
    },
    triggerClose: {
        click: true,
        scroll: true
    }
});
```

--------------------------------

### Initialize Tooltipster with Multiple Content Instances

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Apply multiple tooltips to the same element, each with different content and positions. 'multiple: true' is required.

```javascript
$('.inline').tooltipster({ content: 'Second', multiple: true, position: 'right' });
```

```javascript
$('.inline').tooltipster({ content: 'Third', multiple: true, position: 'bottom' });
```

```javascript
$('.inline').tooltipster({ content: 'Fourth', multiple: true, position: 'left' });
```

--------------------------------

### Initialize Tooltipster with Content Cloning

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Use this when multiple tooltips share the same HTML content. Ensures proper cloning of content.

```javascript
 $('.tooltip').tooltipster({
    contentCloning: true
});
```

--------------------------------

### Initialize Tooltipster with a callback

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Use the 'functionBefore' callback to manipulate the tooltip content via the instance. The instance is passed as the first argument to the callback.

```javascript
$('#origin').tooltipster({
    functionBefore: function(instance, helper){
        instance.content('Random content');
    }
});
```

--------------------------------

### Tooltip Initialization with Callback

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Initializes a tooltip and uses the `functionBefore` callback to dynamically set its content before it appears.

```javascript
 $('.tooltip').tooltipster({
    functionBefore: function(instance, helper) {
        instance.content('My new content');
    }
});
```

--------------------------------

### Customize Tooltip Position with functionPosition

Source: https://context7.com/calebjacob/tooltipster/llms.txt

The `functionPosition` callback allows precise control over tooltip placement. It receives the current position object and should return a modified position object. Example shows offsetting and centering over the viewport.

```javascript
// Offset tooltip position by 10 pixels
$('#my-tooltip').tooltipster({
    functionPosition: function(instance, helper, position) {
        position.coord.top += 10;
        position.coord.left += 10;
        return position;
    }
});
```

```javascript
// Advanced: Center tooltip over viewport
$('#my-tooltip').tooltipster({
    functionPosition: function(instance, helper, position) {
        var windowWidth = helper.geo.window.size.width,
            windowHeight = helper.geo.window.size.height;

        position.coord.left = (windowWidth - position.size.width) / 2;
        position.coord.top = (windowHeight - position.size.height) / 2;
        position.side = 'bottom'; // Hide arrow positioning

        return position;
    }
});
```

--------------------------------

### Initialize Tooltipster with New Options

Source: https://github.com/calebjacob/tooltipster/blob/master/plugins.md

Use new options directly during initialization or namespace them to prevent conflicts with other plugins.

```javascript
$el.tooltipster({
    side: 'top',
    myNewOption: 'value'
})
```

```javascript
$el.tooltipster({
    side: 'top',
    'myNamespace.myPlugin': {
        myNewOption: 'value'
    }
})
```

--------------------------------

### Manage Tooltipster Content Dynamically

Source: https://context7.com/calebjacob/tooltipster/llms.txt

The content method allows you to get or set tooltip content programmatically. It supports string, HTML element, and jQuery object content. Updates work whether the tooltip is open or closed.

```javascript
// Initialize tooltip
$('#element').tooltipster({
    content: 'Initial content'
});
```

```javascript
// Get current content
var content = $('#element').tooltipster('content');
console.log(content); // 'Initial content'
```

```javascript
// Set new content (works whether tooltip is open or closed)
$('#element').tooltipster('content', 'New content');
```

```javascript
// Set HTML content
$('#element').tooltipster('content', $('<strong>Bold content</strong>'));
```

```javascript
// Update content via instance
$('#element').tooltipster({
    functionBefore: function(instance, helper) {
        instance.content('Dynamic content loaded!');
    }
});
```

--------------------------------

### Custom Tooltip Triggers: Desktop and Touch Support

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Enhance the custom trigger configuration to include touch device interactions like 'touchstart' and 'tap' for opening and closing, alongside desktop triggers.

```javascript
$('#example').tooltipster({
    trigger: 'custom',
    triggerOpen: {
        mouseenter: true,
        touchstart: true
    },
    triggerClose: {
        click: true,
        scroll: true,
        tap: true
    }
});
```

--------------------------------

### Open and Close Methods

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Programmatically control tooltip visibility with optional callbacks.

```APIDOC
## Open and Close Methods

### Description
Programmatically control tooltip visibility with optional callbacks.

### Method
```javascript
// Initialize
$('.tooltip').tooltipster();

// Open tooltip
$('#my-tooltip').tooltipster('open');

// Open with callback when animation completes
$('#my-tooltip').tooltipster('open', function(instance, helper) {
    console.log('Tooltip is now fully visible');
    console.log('Content:', instance.content());
});

// Close tooltip
$('#my-tooltip').tooltipster('close');

// Close with callback
$('#my-tooltip').tooltipster('close', function(instance, helper) {
    console.log('Tooltip is now closed');
});

// Example: Open on page load, close on keypress
$(document).ready(function() {
    $('.tooltip').tooltipster();
    $('#example').tooltipster('open');

    $(window).keypress(function() {
        $('#example').tooltipster('close');
    });
});
```
```

--------------------------------

### Format Data Sets for Tooltip Content (Initialization)

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Initialize tooltips with JSON data in the title attribute and format it into a human-readable sentence during initialization using `functionInit`.

```html
<span id="example" title="We have 3 people today. Say hello to Sarah, John, Matthew">People</span>
```

```javascript
$('#example').tooltipster({
    functionInit: function(instance, helper){

        // parse the content
        var content = instance.content(),
            people = JSON.parse(content),
            // and use it to make a sentence
            newContent = 'We have ' + people.length + ' people today. Say hello to ' + people.join(', ');
        
        // save the edited content
        instance.content(newContent);
    }
});
```

```javascript
// this logs: "We have 3 people today. Say hello to Sarah, John, Matthew"
console.log($('#example').tooltipster('content'));
```

--------------------------------

### Instance Methods and Object-Oriented API

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Access tooltip instances directly for more control and better performance. This API allows programmatic interaction with individual tooltips.

```APIDOC
## Instance Methods and Object-Oriented API

Access tooltip instances directly for more control and better performance.

### Method
JavaScript (jQuery plugin)

### Endpoint
N/A (Client-side functionality)

### Parameters
N/A (Methods are called on instance objects)

### Request Example
```javascript
// Get instance reference
var instance = $('#my-tooltip').tooltipster('instance');

// Chain method calls directly on instance
instance
    .content('New content')
    .open()
    .option('animation', 'grow');

// Get all instances on a page
var allInstances = $.tooltipster.instances();
$.each(allInstances, function(i, instance) {
    instance.close();
});

// Get instances for specific element
var elementInstances = $.tooltipster.instances('#my-element');

// Get instances from last initialization call
$('.batch-tooltips').tooltipster({ theme: 'tooltipster-light' });
var latestInstances = $.tooltipster.instancesLatest();

// Instance methods available:
// instance.close([callback])
// instance.content([newContent])
// instance.destroy()
// instance.disable()
// instance.enable()
// instance.elementOrigin()
// instance.elementTooltip()
// instance.open([callback])
// instance.option(name[, value])
// instance.reposition()
// instance.status()
```

### Response
N/A (Methods modify tooltip state or return information about it)
```

--------------------------------

### Basic Plugin Structure for Tooltipster

Source: https://github.com/calebjacob/tooltipster/blob/master/plugins.md

This is a template for a basic Tooltipster plugin, demonstrating the structure for core and instance level methods, including special `__init` and `__destroy` methods, and private methods.

```javascript
$.tooltipster._plugin({
    name: 'namespace.pluginName',
    core: {
        __init: function(core) { ... },
        myNewCoreMethod: function() { ... },
        // double underscore please
        __somePrivateMethod: function() { ... }
    },
    instance: {
        __init: function(instance) { ... },
        __destroy: function() { ... },
        myNewInstanceMethod: function() { ... },
        // double underscore please
        __somePrivateMethod: function() { ... }
    }
});
```

--------------------------------

### Instance Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Methods that operate on a specific Tooltipster instance.

```APIDOC
## Instance Methods

### instance

Returns the instance of Tooltipster associated with the tooltip. If the selector matches multiple origins, only the instance of the first will be returned.

### on, one, off, triggerHandler

Handles Tooltipster's events on a per-instance basis.

### open

Opens the tooltip. The `callback` function argument is optional and is called when the opening animation has ended.

### option (getter)

Returns the value of an option.

### option (setter)

Sets the value of an option (for advanced users only).

### reposition

Resizes and repositions the tooltip.

### status

Returns various information about the tooltip, such as whether it is open or not.
```

--------------------------------

### Initialize Tooltipster with Custom Tap Triggers (Interactive)

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Configure interactive tooltips with custom tap triggers for opening and closing. Enhances user experience on touch devices.

```javascript
$('#custom_touch_tapinteractive').tooltipster({ interactive: true, trigger: 'custom', triggerOpen: { tap: true }, triggerClose: { tap: true } });
```

--------------------------------

### Initialize Tooltipster with Custom Tap Triggers

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Set up custom tap triggers for opening and closing tooltips on touch devices. Ensures a responsive tap interaction.

```javascript
$('#custom_touch_tap').tooltipster({ trigger: 'custom', triggerOpen: { tap: true }, triggerClose: { tap: true } });
```

--------------------------------

### Instance Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Methods to manipulate a specific tooltip instance.

```APIDOC
## Instance Methods

Instance methods can be called using the origin element or the tooltip instance.

### close

- **Arguments**: `callback` (optional function)
- **Description**: Closes the tooltip. The HTML element is destroyed after the animation. The optional callback is executed once the animation is complete.

### content (getter)

- **Arguments**: None
- **Description**: Returns the current content of a tooltip. If multiple origins match, returns the content of the first one.

### content (setter)

- **Arguments**: `content`
- **Description**: Updates the tooltip's content.

### destroy

- **Arguments**: None
- **Description**: Closes and destroys the tooltip functionality.

### disable

- **Arguments**: None
- **Description**: Temporarily disables the tooltip from opening.

### enable

- **Arguments**: None
- **Description**: Restores functionality to a previously disabled tooltip.

### elementOrigin

- **Arguments**: None
- **Description**: Returns the HTML element which has been tooltipped.

### elementTooltip

- **Arguments**: None
- **Description**: Returns the root HTML element of the tooltip if it is open, otherwise returns `null`.
```

--------------------------------

### Create and Use Custom Tooltipster Plugins (JavaScript)

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Extend Tooltipster's functionality by registering custom plugins. Plugins can add new methods to both the core and instance objects, allowing for custom behaviors and interactions.

```javascript
// Register a custom plugin
$.tooltipster._plugin({
    name: 'myns.myPlugin',
    core: {
        __init: function(core) {
            this.__core = core;
        },
        closeAllTooltips: function() {
            var instances = this.__core.instances();
            $.each(instances, function(i, instance) {
                instance.close();
            });
            return this.__core;
        }
    },
    instance: {
        __init: function(instance) {
            this.__instance = instance;
        },
        __destroy: function() {
            // Cleanup when tooltip is destroyed
        },
        flashContent: function() {
            var self = this;
            if (self.__instance._$tooltip) {
                self.__instance._$tooltip.fadeOut(100).fadeIn(100);
            }
            return self.__instance;
        }
    }
});

// Use the plugin
$('#tooltip').tooltipster({
    plugins: ['sideTip', 'myPlugin']
});

// Call custom instance method
$('#tooltip').tooltipster('flashContent');

// Call custom core method
$.tooltipster.closeAllTooltips();
```

--------------------------------

### Declare a Plugin in Tooltipster Options

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Specify plugin names in the 'plugins' option to activate them. Use the format 'pluginNamespace.pluginName' to avoid conflicts.

```javascript
$('#example').tooltipster({
    plugins: ['pluginNamespace.pluginName']
});
```

--------------------------------

### Initialize Tooltipster with Custom Click Triggers

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Set up custom triggers to open and close tooltips specifically on click events.

```javascript
$('#custom_mouse_click').tooltipster({ trigger: 'custom', triggerOpen: { click: true }, triggerClose: { click: true } });
```

--------------------------------

### Basic Initialization

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Initialize tooltips on elements using the jQuery plugin syntax. Content is sourced from the title attribute by default or can be set via options.

```APIDOC
## Basic Initialization

### Description
Initialize tooltips on elements using the jQuery plugin syntax. Content is sourced from the title attribute by default or can be set via options.

### Method
```javascript
$('.tooltip').tooltipster();

$('#my-tooltip').tooltipster({
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-noir',
    side: 'bottom',
    trigger: 'click'
});

// HTML content using data-tooltip-content attribute
// HTML: <span class="tooltip" data-tooltip-content="#tooltip_content">Hover me</span>
// HTML: <div id="tooltip_content"><strong>Rich content!</strong></div>
$('.tooltip').tooltipster({
    contentCloning: true  // Clone content for multiple tooltips
});
```
```

--------------------------------

### Full Tooltipster Plugin Template

Source: https://github.com/calebjacob/tooltipster/blob/master/plugins.md

A comprehensive template for creating Tooltipster plugins, including core and instance methods, default options, and lifecycle management.

```javascript
(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['tooltipster'], function($) {
            return (factory($));
        });
    }
    else if (typeof exports === 'object') {
        module.exports = factory(require('tooltipster'));
    }
    else {
        factory(jQuery);
    }
}(this, function($) {

    var pluginName = 'NAMESPACE.PLUGINNAME';
    
    $.tooltipster._plugin({
        name: pluginName,
        core: {
            __init: function(core) {
                
                this.__core = core;
                
                /* YOUR CODE HERE */
            },
            MYCOREPUBLICMETHOD: function() {
                
                /* YOUR CODE HERE */
                
                return this.__core;
            }
        },
        instance: {
            __defaults: function() {
                
                return {
                     /* YOUR DEFAULT OPTIONS HERE */
                };
            },
            __init: function(instance) {
                
                var self = this;
                
                self.__instance = instance;
                // let's namespace our listeners for specific unbinding later
                self.__namespace = pluginName+ '-' +Math.round(Math.random()*1000000);
                self.__options;
                
                // initial options loading
                self.__reloadOptions();
                
                // reload at every future options changes
                self.__instance._on('options.'+ self.__namespace, function() {
                    self.__reloadOptions();
                });
                
                /* YOUR CODE HERE */
            },
            __destroy: function() {
                
                // unbind our listeners
                this.__instance._off('.'+ self.__namespace);
                
                /* YOUR CODE HERE */
            },
            __reloadOptions: function() {
                this.__options = this.__instance._optionsExtract(pluginName, this.__defaults());
            },
            MYPUBLICINSTANCEMETHOD: function(){
                
                /* YOUR CODE HERE */
                
                return this.__instance;
            }
        }
    });
}
```

--------------------------------

### Initialize Tooltipster with Click Trigger and Tracking

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Use this for tooltips that appear on click. 'trackOrigin' and 'trackTooltip' are enabled for precise positioning.

```javascript
$('.tooltip.click').tooltipster({ trigger: 'click', trackOrigin: true, trackTooltip: true });
```

--------------------------------

### Initialize Tooltipster with Custom Mouseenter/Mouseleave Triggers

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Configure custom triggers for opening on mouseenter and closing on mouseleave. Useful for fine-grained control.

```javascript
$('#custom_mouse_hover').tooltipster({ trigger: 'custom', triggerOpen: { mouseenter: true }, triggerClose: { mouseleave: true } });
```

--------------------------------

### Tooltipster Core Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/README.md

Core methods for managing Tooltipster instances and settings globally.

```APIDOC
## Tooltipster Core Methods

### Description
Core methods for managing Tooltipster instances and settings globally.

### Methods
- **instances([selector || element])**: Returns a collection of Tooltipster instances matching the provided selector or element.
- **instancesLatest()**: Returns the latest created Tooltipster instance.
- **on, one, off, triggerHandler**: Methods for managing global event listeners.
- **origins()**: Returns a collection of all origin elements managed by Tooltipster.
- **setDefaults({})**: Sets default options for all future Tooltipster instances. Accepts an object of options.
```

--------------------------------

### SVG.js Path with Tooltipster and Title

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Demonstrates creating an SVG path using SVG.js, adding a native HTML title, and applying Tooltipster for enhanced tooltips.

```javascript
var draw = SVG('drawing'),
    nested = draw
        .viewbox(0, 0, 300, 200)
        .nested()
        .viewbox(-50, 20, 200, 300),
    path = draw.path('M150 0 L75 200 L225 200 Z')
        .rotate(25)
        .scale(0.5);
$(path.node)
    .attr('id', 'triangle')
    .append('<title>Triangle</title>')
    .tooltipster({ theme: 'tooltipster-shadow' });
```

--------------------------------

### Initialize Tooltipster with Click/Tap Open and Scroll Close Triggers

Source: https://github.com/calebjacob/tooltipster/blob/master/demo/index.html

Combine click and tap triggers for opening with a scroll trigger for closing. Useful for dynamic content where scrolling might dismiss the tooltip.

```javascript
$('#custom_touch_clicktapscroll').tooltipster({ trigger: 'custom', triggerOpen: { click: true, tap: true }, triggerClose: { scroll: true } });
```

--------------------------------

### Apply Tooltipster Theme

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Apply a pre-defined theme like 'tooltipster-noir' by specifying its name in the Tooltipster options. Ensure the theme's CSS file is included.

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

--------------------------------

### Specify Tooltipster Options via Data Attributes

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Configure tooltipster options on a per-element basis using `data-tooltipster` attributes. The `functionInit` option parses these attributes and applies them.

```html
<span class="tooltip" data-tooltipster='{"side":"left","animation":"slide"}' title="Hello">World</span>
```

```javascript
 $('.tooltip').tooltipster({
    functionInit: function(instance, helper){

        var $origin = $(helper.origin),
            dataOptions = $origin.attr('data-tooltipster');

        if(dataOptions){
			
dataOptions = JSON.parse(dataOptions);

            $.each(dataOptions, function(name, option){
                instance.option(name, option);
            });
        }
    }
});
```

--------------------------------

### Initialize Tooltipster

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Use basic initialization to apply tooltips using the title attribute. Custom options can be provided for animation, theme, side, and trigger. HTML content can be used via a data attribute.

```javascript
// Basic initialization - uses title attribute for content
$('.tooltip').tooltipster();
```

```javascript
// With custom options
$('#my-tooltip').tooltipster({
    animation: 'fade',
    delay: 200,
    theme: 'tooltipster-noir',
    side: 'bottom',
    trigger: 'click'
});
```

```javascript
// HTML content using data-tooltip-content attribute
// HTML: <span class="tooltip" data-tooltip-content="#tooltip_content">Hover me</span>
// HTML: <div id="tooltip_content"><strong>Rich content!</strong></div>
$('.tooltip').tooltipster({
    contentCloning: true  // Clone content for multiple tooltips
});
```

--------------------------------

### Create Nested Tooltips (JavaScript)

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Implement nested tooltips by initializing a new tooltip on the content of an existing, interactive tooltip. Ensure the parent tooltip has `interactive: true` to allow interaction with its content.

```javascript
$('#parent').tooltipster({
    content: ($('<span id="nested-origin">Hover me for nested tooltip!</span>')),
    interactive: true,
    functionReady: function(instance, helper) {
        // Initialize nested tooltip after parent opens
        instance.content().tooltipster({
            content: 'I am a nested tooltip!',
            distance: 0,
            side: 'right'
        });
    }
});
```

--------------------------------

### Tooltipster Instance Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/README.md

Methods available on a Tooltipster instance to control individual tooltips.

```APIDOC
## Tooltipster Instance Methods

### Description
Methods available on a Tooltipster instance to control individual tooltips.

### Methods
- **close([callback])**: Closes the tooltip. An optional callback function can be provided.
- **content([myNewContent])**: Gets or sets the content of the tooltip. If `myNewContent` is provided, it updates the tooltip's content.
- **destroy()**: Destroys the tooltip instance, removing all associated event listeners and elements.
- **disable()**: Disables the tooltip, preventing it from opening.
- **elementOrigin()**: Returns the origin element of the tooltip.
- **elementTooltip()**: Returns the tooltip element.
- **enable()**: Enables the tooltip, allowing it to open.
- **instance()**: Returns the Tooltipster instance associated with the element.
- **on, one, off, triggerHandler**: Methods for managing event listeners (similar to jQuery's event methods).
- **open([callback])**: Opens the tooltip. An optional callback function can be provided.
- **option(optionName [, optionValue])**: Gets or sets a specific option for the tooltip. If `optionValue` is provided, it updates the option.
- **reposition()**: Repositions the tooltip.
- **status()**: Returns the current status of the tooltip (e.g., 'visible', 'hidden').
```

--------------------------------

### Initialize Tooltips on Dynamic Elements (JavaScript)

Source: https://context7.com/calebjacob/tooltipster/llms.txt

Use event delegation to initialize tooltips on elements that are added to the DOM after the page has loaded. This approach ensures tooltips are available on dynamically created elements upon their first interaction.

```javascript
// Delegation approach - tooltips initialize on first hover
$('body').on('mouseenter', '.tooltip:not(.tooltipstered)', function() {
    $(this)
        .tooltipster({
            theme: 'tooltipster-light',
            delay: 0
        })
        .tooltipster('open');
});

// For click triggers
$('body').on('click', '.tooltip:not(.tooltipstered)', function() {
    $(this)
        .tooltipster({
            trigger: 'click'
        })
        .tooltipster('open');
});

// Note: .tooltipstered class is automatically added after initialization
```

--------------------------------

### Callback Function Arguments

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Illustrates the common parameters passed to Tooltipster's callback functions, including the instance, helper object, and event.

```javascript
functionInit(instance, helper){
    ...
}
```

--------------------------------

### Initialize Tooltipster with ARIA Accessibility

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

This snippet demonstrates how to initialize Tooltipster to work with WAI-ARIA for accessibility. It uses functionInit, functionReady, and functionAfter to manage ARIA attributes and content.

```javascript
 $('#myfield').tooltipster({
    functionInit: function(instance, helper){
        var content = $('#myfield_description').html();
        instance.content(content);
    },
    functionReady: function(instance, helper){
        $('#myfield_description').attr('aria-hidden', false);
    },
    functionAfter: function(instance, helper){
        $('#myfield_description').attr('aria-hidden', true);
    }
});
```

--------------------------------

### Callback Function Arguments

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Input signature for most user callback functions.

```APIDOC
## Callback Function Arguments

Most user callbacks (functionInit, functionBefore, functionReady, functionAfter, functionFormat, functionPosition, open, close) receive the following parameters:

- **instance** (Tooltipster object): The Tooltipster instance calling the callback.
- **helper** (object): Contains useful variables.
  - **helper.origin** (HTMLElement): The HTML element on which the tooltip is set.
  - **helper.tooltip** (HTMLElement): The root HTML element of the tooltip (present in functionReady, open callbacks; undefined otherwise).
  - **helper.event** (Event): The mouse or touch event that triggered the action (present in functionBefore, functionAfter; null/undefined otherwise).

`functionFormat` and `functionPosition` receive an additional third parameter.
```

--------------------------------

### Core Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Methods that can affect or handle multiple tooltips at once.

```APIDOC
## Core Methods

Core methods are methods which may affect/handle several tooltips at once. You call them with: `$.tooltipster.methodName([argument]);`

### instances

**Arguments**: None OR selector OR HTML element

Returns the instances of Tooltipster of all tooltips set on the element(s) matched by the argument. If there is no argument, then all instances of all tooltips present in the page are returned.

### instancesLatest

**Arguments**: None

Returns the instances of Tooltipster which were generated during the last initializing call.

### on, one, off, triggerHandler

Handles Tooltipster's events coming from any instances. See the [events](#events) section.

### origins

**Arguments**: None OR selector

Returns an array of all HTML elements in the page which have one or several tooltips initialized. If a selector is passed, the results will be limited to the descendants of the matched elements.

### setDefaults

**Arguments**: options

Changes the default options that will apply to any tooltips created from now on.
```

--------------------------------

### Providing HTML Content via Options

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Set the content option to an element to use its HTML as the tooltip's content. If the same element is used for multiple tooltips, set contentCloning to false to avoid cloning.

```javascript
$('#tooltip').tooltipster({
    content: $('#tooltip_content'),
   // if you use a single element as content for several tooltips, set this option to true
   contentCloning: false
});
```

--------------------------------

### Initialize multiple tooltips on a single element

Source: https://github.com/calebjacob/tooltipster/blob/master/index.html

Configure an element to support multiple independent tooltips by setting the 'multiple' option to true. Each tooltip can have its own content and options.

```javascript
$myElement.tooltipster({
	content: 'My first tooltip',
	side: 'top'
});

$myElement.tooltipster({
	content: 'My second tooltip',
	multiple: true,
	side: 'bottom'
});
```

--------------------------------

### Managing Tooltipster Options with Protected Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/plugins.md

When introducing new options for Tooltipster, use the protected `_optionsExtract` instance method. This ensures proper integration and handling of custom configurations.

```javascript
instance._optionsExtract(options);
```

--------------------------------

### Tooltipster Instance Protected Methods

Source: https://github.com/calebjacob/tooltipster/blob/master/plugins.md

Protected methods available at the instance level of Tooltipster. These are for extending instance functionality.

```APIDOC
## Instance Level Protected Methods (`instance.methodName`)

### Methods
- `_close`, `_open`: Similar to public equivalents, but allow passing an event object as the first parameter for custom triggers.
- `_openShortly`: Enables delayed tooltip opening, similar to the `hover` trigger.
- `_on`, `_one`, `_off`, `_trigger`: Event methods, same as core level.
- `_optionsExtract`: Must be used when introducing new options. Refer to the [Create new options](#options) section.
- `_plug`, `_unplug`: Manually enable/disable plugins on a specific instance. See the [example](#examples.plug).
- `touch*` methods (`_touchIsEmulatedEvent`, `_touchIsMeaningfulEvent`, `_touchIsTouchEvent`, `_touchRecordEvent`, `_touchSwiped`): Used for handling touch devices and differentiating touch events from emulated click events.

### Protected Properties
- `instance._$tooltip`: jQuery-wrapped tooltip HTML element.
- `instance._$origin`: jQuery-wrapped origin HTML element.
```

--------------------------------

### Define Custom Tooltipster Plugin

Source: https://github.com/calebjacob/tooltipster/blob/master/plugins.md

Defines a plugin named 'namespace.myPlugin' with core methods like 'closeAll' and instance methods like 'openWithoutAnimation'. Use this to add custom behaviors to Tooltipster.

```javascript
$.tooltipster._plugin({
    name: 'namespace.myPlugin',
    core: {
        __init: function(core) {
            this.__core = core;
        },
        closeAll: function() {
            
            var instances = this.__core.instances();
            
            $.each(instances, function(i, instance) {
                instance.close();
            });
            
            this.__log();
            
            return this.__core;
        },
        __log: function() {
            console.log('Closed all tooltips in the page');
        }
    },
    instance: {
        __init: function(instance) {
            this.__instance = instance;
        },
        openWithoutAnimation: function() {
        
            var animationDuration = this.__instance.option('animationDuration');
        
            this.__instance
                .option('animationDuration', 0)
                .open()
                .option('animationDuration', animationDuration);
            
            return this.__instance;
        }
    }
});
```