Tooltipster是一个干净、轻量级的jQuery Tooltip插件,用于在任何DOM元素上创建极其灵活、经过HTML5验证、支持触摸的工具提示。
# NPM $ npm install tooltipster # Bower $ bower install tooltipster
1.在文档中包含必要的JavaScript和CSS文件。
<!-- Core Stylesheet --> <link rel="stylesheet" href="/path/to/dist/css/tooltipster.bundle.min.css" /> <!-- OPTIONAL Themes --> <link rel="stylesheet" href="/path/to/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css" /> <link rel="stylesheet" href="/path/to/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css" /> <link rel="stylesheet" href="/path/to/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css" /> <link rel="stylesheet" href="/path/to/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-punk.min.css" /> <link rel="stylesheet" href="/path/to/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" /> <!-- jQuery --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- JavaScript --> <script src="/path/to/dist/js/tooltipster.bundle.min.js"></script>
2.根据您的需要加载工具提示插件:
<!-- SVG Plugin --> <script src="./dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js"></script> <!-- Discovery Plugin --> <script src="./tooltipster-discovery/tooltipster-discovery.min.js"></script> <!-- Follower Plugin --> <link rel="stylesheet" href="./tooltipster-follower/dist/css/tooltipster-follower.min.css" /> <script src="./tooltipster-follower/dist/js/tooltipster-follower.min.js"></script> <!-- scrollableTip Plugin --> <script src="./tooltipster-scrollableTip/tooltipster-scrollableTip.min.js"></script> <!-- SelectableText Plugin--> <script src="./tooltipster-selectableText/tooltipster-selectableText.js"></script>
3.使用默认选项调用插件。
$(document).ready(function() { $('.tooltip').tooltipster(); });
4.将工具提示附加到指定的元素,并将自定义工具提示内容插入标题
属性如下:
<a href="https://www.jqueryscript.net" class="tooltip" title="Tooltip Content Here"> jQueryScript.Net </a>
5.或者将任何内容加载到工具提示中:
<span class="tooltip" data-tooltip-content="#tooltip_content"> Hover Me </span> <div class="tooltip_templates"> <span id="tooltip_content"> ANY HTML HERE </span> </div>
.tooltip_templates { display: none; }
$('.tooltip').tooltipster({ // if you have two tooltips that have the same data-tooltip-content attribute contentCloning: true });
6.使用以下选项自定义工具提示。
// fade, grow, swing, slide, fall animation: 'fade', // Sets the duration of the animation, in milliseconds. // If you wish to provide different durations for the opening and closing animations, provide an array of two different values. animationDuration: 350, // If set, this will override the content of the tooltip. content: null, // If the content of the tooltip is provided as a string, // it is displayed as plain text by default. contentAsHTML: false, // If you provide a jQuery object to the 'content' option, // this sets if it is a clone of this object that should actually be used. contentCloning: true, // Debug mode debug: true, // Delay how long it takes (in milliseconds) for the tooltip to start animating in. delay: 200, // Upon touch interaction, this is the delay before the tooltip starts its opening and closing animations when the 'hover' trigger is used (*). // If you wish to specify different delays for opening and closing, you may provide an array of two different values. delayTouch: [300, 500], // fired only once at instantiation functionInit: null // fired before the tooltip opens functionBefore: null // fired when the tooltip and its contents have been added to the DOM. functionReady: null // fired once the tooltip has been closed and removed from the DOM. functionAfter: null // A custom function that does not modify the content but that can format it for display. // It gets the two first usual arguments and also the content as third argument. // It must return the value that will be displayed in the tooltip, either a string or a jQuery-wrapped HTML element. functionFormat: null, // The minimum version of Internet Explorer to run on. IEmin: 6, // Give users the possibility to interact with the tooltip. interactive: false, // Allows you to put multiple tooltips on a single element. multiple: false, // will default to document.body, or must be an element positioned at (0, 0) // in the document, typically like the very top views of an app. parent: null, // The names of plugins to be used by Tooltipster. plugins: ['sideTip'], // Repositions the tooltip if it goes out of the viewport when the user scrolls the page, in order to keep it visible as long as possible. repositionOnScroll: false, // Specifies if a TITLE attribute should be restored on the HTML element after a call to the 'destroy' method. // This attribute may be omitted, or be restored with the value that existed before Tooltipster was initialized, or be restored with the stringified value of the current content. // Note: in case of multiple tooltips on a single element, only the last destroyed tooltip may trigger a restoration. restoration: 'none', // Sets if the tooltip should self-destruct after a few seconds when its origin is removed from the DOM. // This prevents memory leaks. selfDestruction: true, // Set a theme that will override the default tooltip appearance. // You may provide an array of strings to apply several themes at once (see the themes section). // Default, Light, Borderless, Punk, Noir, Shadow theme: [], // How long (in ms) the tooltip should live before closing. timer: 0, // Sets how often the tracker should run (see trackOrigin and trackTooltip), in milliseconds. // The tracker runs even if trackOrigin and trackTooltip are false to check if the origin has not been removed while the tooltip was open, so you shouldn't set too high or too low values unless you need to. trackerInterval: 500, // Repositions the tooltip if the origin moves or is resized. As this option may have an impact on performance, we suggest you enable it only if you need to. trackOrigin: false, // Repositions the tooltip if its size changes. // When the size change results from a call to the 'content' method, the tooltip is already repositioned without the need to enable this option. // As this option may have an impact on performance, we suggest you enable it only if you need to. trackTooltip: false, // Sets when the tooltip should open and close. 'hover' and 'click' correspond to predefined sets of built-in triggers, while 'custom' lets you create your own, for a completely customized behavior. // click, mouseenter, touchstart, tap, click, mouseleave, originClick, scroll, tap, touchleave trigger: 'hover', triggerClose: { click: false, mouseleave: false, originClick: false, scroll: false, tap: false, touchleave: false }, triggerOpen: { click: false, mouseenter: false, tap: false, touchstart: false }, // 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. updateAnimation: 'rotate', // Set the z-index of the tooltip. zIndex: 9999999, // mouse follower plugin options minWidth: 0, maxWidth: null, offset: [15,-15], // top-left, top-center, top-right, left-center // left-right, bottom-left, bottom-center, bottom-right anchor: 'top-left',
7.API方法。
// instance.methodName(arg); // or $('element').tooltipster(methodName, arg); instance.close([callback]) instance.content([myNewContent]) instance.destroy() instance.disable() instance.elementOrigin() instance.elementTooltip() instance.enable() instance.instance() instance.on() instance.one() instance.off() instance.triggerHandler() instance.open([callback]) instance.option(optionName [, optionValue]) instance.reposition() instance.status()
8.事件。
// instance.on(event, function); // or $.tooltipster.on(event, function); instance .on('init', doSomething) .on('before', doSomething) .on('after', doSomething) .on('close', doSomething) .on('closing', doSomething) .on('created', doSomething) .on('destroy', doSomething) .on('destroyed', doSomething) .on('dismissable', doSomething) .on('format', doSomething) .on('geometry', doSomething) .on('state', doSomething) .on('ready', doSomething) .on('reposition', doSomething) .on('repositioned', doSomething) .on('scroll', doSomething) .on('start', doSomething) .on('startcancel', doSomething) .on('startend', doSomething) .on('updated', doSomething)
2022-05-24
2020-06-06
2019-08-20
2018-01-30
2018-01-30
2017-04-29
2017-03-22
2017-03-05
2017-03-04
2017-01-22
2016-10-20
2016-09-23
2016-08-20
2016-07-18
2016-07-09
2016-06-22
2016-06-14
第3.3.0版(2014-11-12)
第3.2.4版(2014-05-15)
第3.2.3版(2014-05-02)
第3.2.1版(2014-04-07)
第3.2.1版(2014-04-05)
第3.2.0版(2014-04-05)
第3.1.4版(2014-03-20)
第3.1.3版(2014-03-20)
第3.1.2版(2014-03-18)
v3.1.0(2014年2月25日)
3.0.5版(2014-01-27)
3.0.2版(2014-01-14)
3.0.1版(2014-01-10)
v3.0.0(2013年12月31日)
v2.2.3版本(2013-10-31)
v2.2.2版本(2013-6-01)
v2.1.4版本(2013-6-01)
v2.1.3版本(2013-2-13)