### Apply Tooltipster Theme Source: http://calebjacob.github.io/tooltipster To use a pre-packaged theme, include its CSS file and specify the theme name in the Tooltipster options during initialization. This example applies the 'tooltipster-noir' theme. ```javascript $('.tooltip').tooltipster({ theme: 'tooltipster-noir' }); ``` -------------------------------- ### Grouped Tooltips with Instant Opening Source: http://calebjacob.github.io/tooltipster This example demonstrates how to group tooltips so that when hovering over adjacent elements, one tooltip closes instantly before the next opens. It requires the 'tooltip_group' class on elements and uses a custom event listener for 'start'. ```html ``` ```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(); } } }); ``` -------------------------------- ### Initialize Tooltipster and Get Instance Source: http://calebjacob.github.io/tooltipster Initializes Tooltipster on an element and retrieves its instance for direct manipulation. This allows chaining method calls on the instance. ```javascript $('#my-element').tooltipster(); var instance = $('#my-element').tooltipster('instance'); ``` -------------------------------- ### Get Latest Tooltip Instances Source: http://calebjacob.github.io/tooltipster Illustrates how to get the instances created during the last initializing call for a specific selector using `$.tooltipster.instancesLatest()`. ```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(); ``` -------------------------------- ### Custom Open/Close Triggers (Mouse and Scroll) Source: http://calebjacob.github.io/tooltipster Configure Tooltipster to open on mouseenter and close on click or scroll. This setup is useful for desktop interactions. ```javascript $('#example').tooltipster({ trigger: 'custom', triggerOpen: { mouseenter: true }, triggerClose: { click: true, scroll: true } }); ``` -------------------------------- ### Manipulate Multiple Tooltip Instances Source: http://calebjacob.github.io/tooltipster Access and manipulate individual tooltips on an element when using the 'multiple: true' option. Use $.tooltipster.instances() to get an array of all instances and then call methods on specific array elements. ```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(); // WARNING: calling methods in the usual way only affects the first tooltip that was created on the element $myElement.tooltipster('content', 'New content for my first tooltip') ``` -------------------------------- ### Tooltipster Initialization and Basic Methods Source: http://calebjacob.github.io/tooltipster Demonstrates how to initialize Tooltipster and use basic methods like setting content and opening a tooltip. Most methods are chainable. ```APIDOC ## Tooltipster Basic Usage ### Description Initializes a tooltip and demonstrates common methods for content manipulation and display. ### Method ```javascript $("#my-tooltip").tooltipster(options); $("#my-tooltip").tooltipster('methodName', [arguments]); ``` ### Example ```javascript // Initialize your tooltip as usual: $('#my-tooltip').tooltipster({}); // Update its content: $('#my-tooltip').tooltipster('content', 'My new content'); // Open it: $('#my-tooltip').tooltipster('open'); // Chained methods: $('#my-other-tooltip') .tooltipster({}) .tooltipster('content', 'My new content') .tooltipster('open'); ``` ``` -------------------------------- ### Tooltipster Initialization with Options Source: http://calebjacob.github.io/tooltipster Demonstrates how to initialize Tooltipster on elements and configure its behavior using various options. ```APIDOC ## Initialize Tooltipster with Options ### Description Initializes Tooltipster on selected elements and allows customization through a comprehensive set of options. ### Method JavaScript (jQuery plugin) ### Endpoint N/A (Client-side JavaScript) ### Parameters #### Options Object - **animation** (string) - Optional - Determines the animation effect for showing and hiding the tooltip. Accepted values: 'fade', 'grow', 'swing', 'slide', 'fall'. Default: 'fade'. - **animationDuration** (integer or integer[]) - Optional - Sets the duration of the animation in milliseconds. Can be a single value or an array for different open/close durations. Default: 350. - **arrow** (boolean) - Optional - Adds a speech bubble arrow to the tooltip. Default: true. - **content** (string, jQuery object, any) - Optional - Overrides the default content of the tooltip. Default: null. - **contentAsHTML** (boolean) - Optional - If true, interprets the 'content' string as HTML. Default: false. - **contentCloning** (boolean) - Optional - If true, a clone of the jQuery object provided to 'content' is used. Default: false. - **debug** (boolean) - Optional - Enables or disables console logging for hints and notices. Default: true. - **delay** (integer or integer[]) - Optional - Delay in milliseconds before the tooltip animates on hover. Can be a single value or an array for different open/close delays. Default: 300. - **delayTouch** (integer or integer[]) - Optional - Delay in milliseconds for touch interactions before the tooltip animates on hover. Can be a single value or an array for different open/close delays. Default: [300, 500]. - **distance** (integer or integer[]) - Optional - Distance in pixels between the origin and the tooltip. Can be a single value or an array for different sides. Default: 6. - **functionInit** (function) - Optional - A custom function fired once at instantiation. - **functionBefore** (function) - Optional - A custom function fired before the tooltip opens. Returning false prevents opening. - **functionReady** (function) - Optional - A custom function fired when the tooltip and its content are added to the DOM. - **functionAfter** (function) - Optional - A custom function fired after the tooltip is closed and removed from the DOM. - **functionFormat** (function) - Optional - A custom function to format the tooltip's content for display. Must return the formatted content. ### Request Example ```javascript $(".tooltip").tooltipster({ animation: "fade", delay: 200, theme: "tooltipster-punk", trigger: "click" }); ``` ### Response N/A (Client-side JavaScript behavior) ``` -------------------------------- ### Tooltipster Initialization with Callback Source: http://calebjacob.github.io/tooltipster Shows how to initialize Tooltipster with options, including a callback function that can modify the tooltip's content. ```APIDOC ## Tooltipster Initialization with Callback ### Description Initializes Tooltipster with configuration options, including a `functionBefore` callback to dynamically set content. ### Method ```javascript $('.selector').tooltipster(options); ``` ### Parameters #### Options - **functionBefore** (function) - Callback function executed before the tooltip is shown. ### Example ```javascript $('.tooltip').tooltipster({ functionBefore: function(instance, helper) { instance.content('My new content'); } }); ``` ``` -------------------------------- ### Initialize and Update Tooltip Content Source: http://calebjacob.github.io/tooltipster Demonstrates initializing a tooltip, updating its content, and then opening it. Note that most methods are chainable for convenience. ```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'); ``` -------------------------------- ### Apply Custom Tooltip Theme Source: http://calebjacob.github.io/tooltipster Shows how to apply a custom theme by providing an array of theme names to the `theme` option during tooltip initialization. This allows for layering themes. ```javascript $('.tooltip').tooltipster({ theme: ['tooltipster-noir', 'tooltipster-noir-customized'] }); ``` -------------------------------- ### Initialize Tooltip with Callback Function Source: http://calebjacob.github.io/tooltipster Initializes tooltips and uses the `functionBefore` callback to update the content dynamically before the tooltip appears. ```javascript $('.tooltip').tooltipster({ functionBefore: function(instance, helper) { instance.content('My new content'); } }); ``` -------------------------------- ### Initialize Tooltipster with HTML Content Source: http://calebjacob.github.io/tooltipster Use the `functionInit` option to dynamically set HTML content for a tooltip based on elements within the origin. The content is detached from its original location and assigned to the tooltip instance. ```html
This div has a tooltip with HTML when you hover over it! This is the content of my tooltip!
``` ```javascript $('.tooltip').tooltipster({ functionInit: function(instance, helper){ var content = $(helper.origin).find('.tooltip_content').detach(); instance.content(content); } }); ``` -------------------------------- ### Callback Function Signature Source: http://calebjacob.github.io/tooltipster Illustrates the common input signature for Tooltipster callback functions like functionInit, functionBefore, and functionReady. The 'instance' parameter refers to the Tooltipster object, and 'helper' contains useful variables such as the origin element. ```javascript // this is valid for the other callback functions too functionInit(instance, helper){ ... } ``` -------------------------------- ### Programmatic Tooltip Control (Open/Close) Source: http://calebjacob.github.io/tooltipster Demonstrates initializing tooltips and then programmatically opening a specific tooltip on page load and closing it when a key is pressed. Requires jQuery. ```html Example ``` ```javascript $(document).ready(function() { // first on page load, initialize all tooltips $('.tooltip').tooltipster(); // then immediately open the tooltip of the element named "example" $('#example').tooltipster('open'); // as soon as a key is pressed on the keyboard, close the tooltip. $(window).keypress(function() { $('#example').tooltipster('close'); }); }); ``` -------------------------------- ### Format Data Set for Tooltip Content (On-the-fly) Source: http://calebjacob.github.io/tooltipster Use `functionFormat` to format a data set for display without altering the underlying stored content. The original data is parsed in `functionInit` and stored, while `functionFormat` handles the presentation logic when the tooltip is shown. ```html People ``` ```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; } }); // Alright! this logs: ["Sarah", "John", "Matthew"] console.log($('#example').tooltipster('content')); ``` -------------------------------- ### Core Methods - $.tooltipster Source: http://calebjacob.github.io/tooltipster Details on how to use core methods that can affect multiple tooltips at once, accessed via `$.tooltipster.methodName()`. ```APIDOC ## Core Methods ### Description Core methods provide functionality to manage multiple tooltips globally or based on specific criteria. ### Method ```javascript $.tooltipster.methodName([arguments]); ``` ### Methods #### instances - **Arguments**: None, selector, or HTML element. - **Description**: Returns Tooltipster instances for all tooltips on the matched element(s). If no argument is provided, returns all instances on the page. #### instancesLatest - **Arguments**: None. - **Description**: Returns Tooltipster instances generated during the last initializing call. #### on, one, off, triggerHandler - **Arguments**: None specified. - **Description**: Handle Tooltipster's events coming from any instances. #### origins - **Arguments**: None, selector. - **Description**: Returns an array of all HTML elements with initialized tooltips. If a selector is passed, results are limited to descendants. #### setDefaults - **Arguments**: `options` (object). - **Description**: Changes the default options for all tooltips created from this point forward. ### Examples ```javascript // Set default options for all future tooltip instantiations $.tooltipster.setDefaults({ side: 'bottom', // ... other options }); // Close all tooltips on the page var instances = $.tooltipster.instances(); $.each(instances, function(i, instance){ instance.close(); }); // Get instances from the latest initializing call $('.tooltip2').tooltipster(); // Assuming .tooltip1 was initialized earlier var instances = $.tooltipster.instancesLatest(); ``` ``` -------------------------------- ### Instance Methods Source: http://calebjacob.github.io/tooltipster Methods available on a Tooltipster instance to manipulate individual tooltips. ```APIDOC ## close ### Description Closes the tooltip. When the animation is over, its HTML element is destroyed (definitely removed from the DOM). The `callback` function argument is optional. ### Arguments - `callback` (function) - Optional: A function to be called after the animation is over. ``` ```APIDOC ## content (getter) ### Description Returns a tooltip's current content. If the selector matches multiple origins, only the value of the first will be returned. ### Arguments None ``` ```APIDOC ## content (setter) ### Description Updates the tooltip's content. ### Arguments - `content` (any) - The new content for the tooltip. ``` ```APIDOC ## destroy ### Description Closes and destroys the tooltip functionality. ### Arguments None ``` ```APIDOC ## disable ### Description Temporarily disables a tooltip from being able to open. ### Arguments None ``` ```APIDOC ## elementOrigin ### Description Returns the HTML element which has been tooltipped. ### Arguments None ``` ```APIDOC ## elementTooltip ### Description Returns the HTML root element of the tooltip if it is open, `null` if it is closed. ### Arguments None ``` ```APIDOC ## enable ### Description If a tooltip was disabled, restores its previous functionality. ### Arguments None ``` ```APIDOC ## instance ### Description Returns the instance of Tooltipster associated to the tooltip. If the selector matches multiple origins, only the instance of the first will be returned. ### Arguments None ``` ```APIDOC ## on, one, off, triggerHandler ### Description Handle Tooltipster's events on a per-instance basis. ### Arguments - `callback` (function) - The function to handle the event. ``` ```APIDOC ## open ### Description Opens the tooltip. The `callback` function argument is optional and, if provided, is called when the opening animation has ended. ### Arguments - `callback` (function) - Optional: A function to be called after the opening animation has ended. ``` ```APIDOC ## option (getter) ### Description Returns the value of an option. ### Arguments - `optionName` (string) - The name of the option to retrieve. ``` ```APIDOC ## option (setter) ### Description Sets the value of an option. This is for advanced users only and may lead to unexpected results. ### Arguments - `optionName` (string) - The name of the option to set. - `optionValue` (any) - The new value for the option. ``` ```APIDOC ## reposition ### Description Resizes and repositions the tooltip. ### Arguments None ``` -------------------------------- ### Tooltipster Options Source: http://calebjacob.github.io/tooltipster Configuration options that can be set when initializing Tooltipster or updated later. ```APIDOC ## updateAnimation ### Description Plays a subtle animation when the content of the tooltip is updated (if the tooltip is open). You may create custom animations in your CSS files. Set to null to disable the animation. ### Default Value 'rotate' ### Allowed Values 'fade', 'rotate', 'scale', null ``` ```APIDOC ## viewportAware ### Description Tries to place the tooltip in such a way that it will be entirely visible on screen when it's opened. If the tooltip is to be opened while its origin is off screen (using a method call), you may want to set this option to false. ### Default Value true ### Allowed Values boolean ``` ```APIDOC ## zIndex ### Description Set the z-index of the tooltip. ### Default Value 9999999 ### Allowed Values integer ``` -------------------------------- ### Customizing Tooltip Themes Source: http://calebjacob.github.io/tooltipster Explains how to create custom themes for Tooltipster by defining secondary themes that override existing packaged themes. ```APIDOC ## Styling Tooltips with Custom Themes ### Description Customize the appearance of Tooltipster tooltips by creating secondary themes that override properties of packaged themes. ### CSS Example ```css /* Create a custom secondary theme on top of tooltipster-noir */ .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box { background: grey; border: 3px solid red; border-radius: 6px; box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4); } .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content { color: blue; padding: 8px; } ``` ### JavaScript Example ```javascript $('.tooltip').tooltipster({ theme: ['tooltipster-noir', 'tooltipster-noir-customized'] }); ``` ``` -------------------------------- ### Configure Tooltipster Options Source: http://calebjacob.github.io/tooltipster Use this to set various options for Tooltipster, such as animation, delay, theme, and trigger. Ensure jQuery is included before this script. ```javascript $(".tooltip").tooltipster({ animation: "fade", delay: 200, theme: "tooltipster-punk", trigger: "click" }); ``` -------------------------------- ### Programmatic Open and Close Methods Source: http://calebjacob.github.io/tooltipster Control the visibility of tooltips programmatically using the 'open' and 'close' methods. ```APIDOC ## Opening and Closing a Tooltip: Method Calls ### Description Allows direct control over the opening and closing of tooltips via JavaScript method calls, with optional callback functions. ### Method `$(selector).tooltipster('open')` `$(selector).tooltipster('close')` ### Parameters #### Method Arguments - **callback** (function) - Optional - A function to be executed after the animation completes. ### Request Example ```javascript $(document).ready(function() { // Initialize all tooltips $('.tooltip').tooltipster(); // Immediately open the tooltip of the element with id 'example' $('#example').tooltipster('open'); // Close the tooltip when any key is pressed $(window).keypress(function() { $('#example').tooltipster('close'); }); }); ``` ``` -------------------------------- ### Dynamic Live Binding with Tooltipster Source: http://calebjacob.github.io/tooltipster Implement live binding for dynamically created elements by listening for mouseenter events on the body. This approach requires careful consideration of potential issues like event bubbling and race conditions. Ensure the selector targets elements that are not already tooltipped. ```javascript $"body").on('mouseenter', '.tooltip:not(.tooltipstered)', function(){ $(this) .tooltipster({ ... }) .tooltipster('open'); }); ``` -------------------------------- ### Set Tooltipster Options via Data Attributes Source: http://calebjacob.github.io/tooltipster Initialize Tooltipster and apply options specified in a `data-tooltipster` attribute. The attribute value must be a valid JSON string. This method allows per-element configuration. ```html World ``` ```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); }); } } }); ``` -------------------------------- ### Monolithic Callback vs. Event Listeners in Tooltipster Source: http://calebjacob.github.io/tooltipster Demonstrates refactoring a monolithic callback function into separate event listeners for better flexibility and control over Tooltipster's mechanics. ```javascript $"#my-tooltip").tooltipster({ functionBefore: function(instance, helper){ doThis(); doThat(); } }); ``` -------------------------------- ### Format Data Set for Tooltip Content (Initialization) Source: http://calebjacob.github.io/tooltipster Format a JSON data set from the title attribute into a human-readable string upon tooltip initialization using `functionInit`. The computed content is then set using `instance.content()`. Note that this modifies the stored content. ```html People ``` ```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); } }); // this logs: "We have 3 people today. Say hello to Sarah, John, Matthew" console.log($('#example').tooltipster('content')); ``` -------------------------------- ### AJAX Content Loading with Tooltipster Source: http://calebjacob.github.io/tooltipster Use the functionBefore option to load dynamic content via AJAX the first time a tooltip opens. Displays 'Loading...' until data is fetched. Ensure 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); }); } } }); ``` -------------------------------- ### Open and Set Content via Instance Source: http://calebjacob.github.io/tooltipster Manipulate tooltips directly using their instances for more advanced control. This is an alternative to calling methods through the jQuery object. ```javascript var instance = $('#my-element').tooltipster('instance'); instance.open().content('My new content'); ``` -------------------------------- ### Initialize Multiple Tooltips on One Element Source: http://calebjacob.github.io/tooltipster Set up two independent tooltips on the same element using the 'multiple: true' option. Note that the first tooltip initialization is standard, while subsequent ones require 'multiple: true'. ```javascript var $myElement = $('#my-element'); // create a first tooltip as usual. The multiple option is actually optional for the first tooltip $myElement.tooltipster({ content: 'My first tooltip', side: 'top' }); // initialize a second tooltip $myElement.tooltipster({ // don't forget to provide content here as the first tooltip will have deleted the original title attribute of the element content: 'My second tooltip', multiple: true, side: 'bottom' }); ``` -------------------------------- ### Set Default Tooltip Options Source: http://calebjacob.github.io/tooltipster Shows how to set default options for all future tooltip instantiations using `$.tooltipster.setDefaults()`. ```javascript // Set default options for all future tooltip instantiations $.tooltipster.setDefaults({ side: 'bottom', ... }); ``` -------------------------------- ### Declare a Plugin in Tooltipster Options Source: http://calebjacob.github.io/tooltipster To use a plugin, specify its full name (namespace.pluginName) in the 'plugins' array within the Tooltipster options. This ensures the plugin's functionality is loaded. ```javascript $('#example').tooltipster({ plugins: ['pluginNamespace.pluginName'] }); ``` -------------------------------- ### Set Up HTML for Tooltips Source: http://calebjacob.github.io/tooltipster Add a 'tooltip' class to elements that will have a tooltip and set the 'title' attribute for the tooltip's content. Be mindful of class name conflicts with frameworks like Bootstrap. ```html // Putting a tooltip on an image: // Putting a tooltip on some text (span, div or whatever): Some text ``` -------------------------------- ### Close All Tooltips Source: http://calebjacob.github.io/tooltipster Demonstrates how to retrieve all active tooltip instances on the page and close them simultaneously using `$.tooltipster.instances()` and `instance.close()`. ```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(); }); ``` -------------------------------- ### Custom Open/Close Triggers (Mouse and Touch) Source: http://calebjacob.github.io/tooltipster Enhance custom triggers by adding touch events like touchstart and tap for mobile compatibility. This ensures the tooltip responds to both mouse and touch interactions. ```javascript $('#example').tooltipster({ trigger: 'custom', triggerOpen: { mouseenter: true, touchstart: true }, triggerClose: { click: true, scroll: true, tap: true } }); ``` -------------------------------- ### Predefined 'click' Trigger Configuration Source: http://calebjacob.github.io/tooltipster This configuration replicates the default 'click' behavior using custom triggers. It includes click and tap for both opening and closing the tooltip. ```javascript $('#example').tooltipster({ trigger: 'custom', triggerOpen: { click: true, tap: true }, triggerClose: { click: true, tap: true } }); ``` -------------------------------- ### Event Handling with Tooltipster Instances Source: http://calebjacob.github.io/tooltipster Manage Tooltipster events on a per-instance basis using the .on(), .one(), and .off() methods. This allows for flexible binding and unbinding of multiple callbacks for events like 'before'. ```javascript var instance = $("#my-tooltip").tooltipster({}).tooltipster('instance'); instance .on('before', doThis) .on('before', doThat); ``` -------------------------------- ### Callback Function Arguments Source: http://calebjacob.github.io/tooltipster Describes the arguments passed to various callback functions within Tooltipster. ```APIDOC ## Callback Arguments ### Description Almost all user callbacks have the same input signature: `functionInit(instance, helper)`. The `functionFormat` and `functionPosition` callbacks receive an additional third parameter. ### Parameters - **instance** (Tooltipster object) - The Tooltipster object which is calling the callback function. - **helper** (object) - An object containing 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` and `open` callbacks, undefined otherwise). - `helper.event` (Event) - The mouse or touch event that triggered the action (present in `functionBefore` and `functionAfter` callbacks, null or undefined otherwise). ``` -------------------------------- ### Event Handling with Tooltipster Core Listeners Source: http://calebjacob.github.io/tooltipster Set default callbacks for all Tooltipster instances using core listeners with $.tooltipster.on(). This is an alternative to $.tooltipster.setDefaults() and ensures callbacks are called before initialization. ```javascript $.tooltipster.on('init', function(event){ doThis(); }); $("#my-tooltip").tooltipster({ functionInit: doThat }); ``` -------------------------------- ### Initialize Tooltipster with ARIA Support Source: http://calebjacob.github.io/tooltipster Initializes Tooltipster on an input field, setting its content from an ARIA description span and managing ARIA attributes on focus and blur events. ```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); } }); // if in addition you want the tooltip to be displayed when the field gets focus, add these custom triggers : $('#myfield') .focus(function(){ $(this).tooltipster('open'); }) .blur(function(){ $(this).tooltipster('close'); }); ``` -------------------------------- ### Predefined Trigger Shorthands Source: http://calebjacob.github.io/tooltipster Explanation of the shorthand trigger options 'hover' and 'click'. ```APIDOC ## Predefined Trigger Shorthands ### Description Provides shorthand configurations for common trigger behaviors. ### Method `tooltipster(options)` ### Parameters #### Request Body - **trigger** (string) - Required - Can be set to 'hover' or 'click' for predefined behaviors. ### Request Example (Hover) ```javascript $('#example').tooltipster({ trigger: 'hover' }); // Equivalent to: $('#example').tooltipster({ trigger: 'custom', triggerOpen: { mouseenter: true, touchstart: true }, triggerClose: { mouseleave: true, originClick: true, touchleave: true } }); ``` ### Request Example (Click) ```javascript $('#example').tooltipster({ trigger: 'click' }); // Equivalent to: $('#example').tooltipster({ trigger: 'custom', triggerOpen: { click: true, tap: true }, triggerClose: { click: true, tap: true } }); ``` ``` -------------------------------- ### Enable Content Cloning for Shared HTML Source: http://calebjacob.github.io/tooltipster If multiple tooltips use the same HTML content element, set the 'contentCloning' option to true when initializing Tooltipster to ensure proper functionality. ```javascript $('.tooltip').tooltipster({ contentCloning: true }); ``` -------------------------------- ### Activate Tooltipster Source: http://calebjacob.github.io/tooltipster Initialize Tooltipster on elements with the 'tooltip' class using a jQuery script before the closing head tag. You can use any selector to target your elements. ```html ... ``` -------------------------------- ### Include Tooltipster Files Source: http://calebjacob.github.io/tooltipster Load jQuery and Tooltipster's CSS and JavaScript files in the head of your HTML document. Ensure you use a compatible jQuery version, especially for SVG support. ```html ``` -------------------------------- ### Tooltipster Open/Close Callbacks Source: http://calebjacob.github.io/tooltipster Execute a callback function after a tooltip has fully opened or closed. The callback is ignored if the action is cancelled before completion. ```javascript $(document).ready(function() { $('.tooltip').tooltipster(); $('#example').tooltipster('open', function(instance, helper) { alert('The tooltip is now fully shown. Its content is: ' + instance.content()); }); $(window).keypress(function() { $('#example').tooltipster('close', function(instance, helper) { alert('The tooltip is now fully hidden'); }); }); }); ``` -------------------------------- ### Setting HTML Content via Options Source: http://calebjacob.github.io/tooltipster Provide HTML content for a tooltip using the 'content' option, referencing a jQuery object. Set 'contentCloning' to true if the same element is used as content for multiple tooltips. ```javascript $('#tooltip').tooltipster({ content: $('#tooltip_content'), // if you use a single element as content for several tooltips, set this option to true contentCloning: false }); ``` -------------------------------- ### Resolve Plugin Method Conflicts Source: http://calebjacob.github.io/tooltipster To call methods with the same name from different plugins, access the plugin's specific instance object via the main tooltip instance and use the plugin's full name (namespace.pluginName) to call the desired method. ```javascript $('#example').tooltipster({ functionBefore: function(instance, helper) { instance['laa.follower'].methodName(); } }); ``` -------------------------------- ### Resolve Plugin Option Conflicts Source: http://calebjacob.github.io/tooltipster When plugins have options with the same name, wrap each plugin's options under a property named after the plugin's full identifier (namespace.pluginName). This isolates their configurations. ```javascript $('#example').tooltipster({ content: 'Hello', theme: 'tooltipster-noir', 'laa.follower': { anchor: 'top-center' }, 'some.otherPlugin': { anchor: 'value' } }); ``` -------------------------------- ### Tooltipster Status Object Structure Source: http://calebjacob.github.io/tooltipster The `status` method returns an object detailing the current state of a tooltip. Properties include `destroyed`, `destroying`, `enabled`, `open`, and `state` (which can be 'appearing', 'stable', 'disappearing', or 'closed'). ```javascript { // if the tooltip has been destroyed destroyed: boolean, // if the tooltip is scheduled for destruction (which means that the tooltip is currently closing and may not be reopened) destroying: boolean, // if the tooltip is enabled enabled: boolean, // if the tooltip is open (either appearing, stable or disappearing) open: boolean, // the state equals one of these four values: state: 'appearing' || 'stable' || 'disappearing' || 'closed' } ``` -------------------------------- ### Predefined 'hover' Trigger Configuration Source: http://calebjacob.github.io/tooltipster This configuration replicates the default 'hover' behavior using custom triggers. It includes mouseenter for opening and mouseleave/originClick for closing, along with touch equivalents. ```javascript $('#example').tooltipster({ trigger: 'custom', triggerOpen: { mouseenter: true, touchstart: true }, triggerClose: { mouseleave: true, originClick: true, touchleave: true } }); ``` -------------------------------- ### Custom Tooltip Theme CSS Source: http://calebjacob.github.io/tooltipster Provides CSS rules for creating a custom secondary theme that overrides properties of the 'tooltipster-noir' theme, affecting background, border, and content styling. ```css /* This is how you would create a custom secondary theme on top of tooltipster-noir: */ .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box { background: grey; border: 3px solid red; border-radius: 6px; box-shadow: 5px 5px 2px 0 rgba(0,0,0,0.4); } .tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content { color: blue; padding: 8px; } ``` -------------------------------- ### Initialize Nested Tooltips Source: http://calebjacob.github.io/tooltipster Nested tooltips can be initialized within the 'functionReady' callback of the parent tooltip. Ensure 'interactive' is set to true on the parent for interaction with the nested tooltip. The nested tooltip is initialized using its own tooltipster call. ```html Hover me! ``` ```javascript $('#nesting').tooltipster({ content: $('Hover me too!'), functionReady: function(instance, helper){ // the nested tooltip must be initialized once the first tooltip is open, that's why we do this inside functionReady() instance.content().tooltipster({ content: 'I am a nested tooltip!', distance: 0 }); }, interactive: true }); ``` -------------------------------- ### Custom Trigger Configuration Source: http://calebjacob.github.io/tooltipster Configure custom open and close triggers for Tooltipster. This allows fine-grained control over when a tooltip appears or disappears based on user interactions. ```APIDOC ## Custom Trigger Configuration ### Description Allows users to define specific events that trigger the opening and closing of a tooltip, overriding default behaviors. ### Method `tooltipster(options)` ### Parameters #### Request Body - **trigger** (string) - Optional - Set to 'custom' to enable custom trigger configuration. - **triggerOpen** (object) - Optional - An object where keys are trigger events (e.g., 'mouseenter', 'touchstart') and values are booleans indicating if the trigger is active. - **triggerClose** (object) - Optional - An object where keys are trigger events (e.g., 'click', 'scroll', 'tap') and values are booleans indicating if the trigger is active. ### Request Example ```javascript $('#example').tooltipster({ trigger: 'custom', triggerOpen: { mouseenter: true, touchstart: true }, triggerClose: { click: true, scroll: true, tap: true } }); ``` ``` -------------------------------- ### Resolve Plugin Name Conflicts Source: http://calebjacob.github.io/tooltipster If multiple plugins share the same name, use their specific namespace to avoid conflicts when declaring them in the 'plugins' option. The namespace is typically found in the plugin's source file. ```javascript $('#example').tooltipster({ plugins: ['laa.follower'] }); ``` -------------------------------- ### Set Content in Callback using Instance Source: http://calebjacob.github.io/tooltipster Modify tooltip content within a callback function using the provided Tooltipster instance. This ensures the correct instance is being manipulated. ```javascript $('#origin').tooltipster({ functionBefore: function(instance, helper){ instance.content('Random content'); } }); ``` -------------------------------- ### Tooltipster Side Fallback Order Source: http://calebjacob.github.io/tooltipster Defines the preferred order of sides for tooltip positioning. If the preferred side is not available, Tooltipster falls back to other sides in the specified order. ```javascript // ... is the same as ... 'top' => ['top', 'bottom', 'right', 'left'] 'bottom' => ['bottom', 'top', 'right', 'left'] 'right' => ['right', 'left', 'top', 'bottom'] 'left' => ['left', 'right', 'top', 'bottom'] ``` -------------------------------- ### Modify Content in Callback for Multiple Tooltips Source: http://calebjacob.github.io/tooltipster Update tooltip content within a callback function when using multiple tooltips on a single element. It's crucial to use the 'instance' parameter provided to the callback to ensure you're modifying the correct tooltip. ```javascript $('#my-element').tooltipster({ content: 'HELLO', functionInit: function(instance, helper) { var string = instance.content(); instance.content(string.toLowerCase()); }, multiple: true }); ``` -------------------------------- ### Use HTML Content in Tooltips Source: http://calebjacob.github.io/tooltipster For HTML content, use a 'data-tooltip-content' attribute pointing to a selector for the HTML element. Ensure the content element is hidden via CSS to prevent it from displaying outside the tooltip. ```html This span has a tooltip with HTML when you hover over it!
This is the content of my tooltip!
``` -------------------------------- ### Custom Tooltipster Side Fallbacks Source: http://calebjacob.github.io/tooltipster Specify custom fallback orders for tooltip positioning or disable certain sides entirely by providing an array of desired sides. ```javascript side: ['top', 'left', 'bottom', 'right'] ``` ```javascript side: ['top', 'right', 'left'] ``` ```javascript side: ['right'] ``` -------------------------------- ### HTML for Accessible Tooltip Source: http://calebjacob.github.io/tooltipster This HTML structure is used to create an accessible tooltip by pairing an input field with a hidden description span that serves as the ARIA tooltip content. ```html Please insert your name here ``` -------------------------------- ### Include Tooltipster SVG Plugin Source: http://calebjacob.github.io/tooltipster This snippet shows how to include the Tooltipster SVG plugin in your HTML head for improved SVG element support. It requires jQuery and the main Tooltipster bundle. ```html ``` -------------------------------- ### Update Tooltip Content Source: http://calebjacob.github.io/tooltipster Update the content of one or multiple tooltips, whether they are open or closed. The updateAnimation option can control the animation during content changes. ```javascript $('#myelement').tooltipster('content', 'My new content'); ``` ```javascript instance.content('My new content'); ``` -------------------------------- ### Custom Tooltip Positioning with JavaScript Source: http://calebjacob.github.io/tooltipster Use the functionPosition option to modify the computed position of a tooltip. Your callback receives the proposed position and must return the modified object. Ensure coordinates are relative to the viewport. ```javascript $('#my-tooltip').tooltipster({ functionPosition: function(instance, helper, position){ position.coord.top += 10; position.coord.left += 10; return position; } }); ``` -------------------------------- ### CSS for Hiding ARIA Tooltip Source: http://calebjacob.github.io/tooltipster This CSS rule ensures that the ARIA tooltip content is hidden visually but remains accessible to screen readers. ```css #myfield_description { position: absolute; visibility: hidden; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.