Mouse Tooltip JavaScript Library V0.2
Installation
Place the downloadedmTips.jsfile in your project and import it into the pages where it is needed.
This project depends onJQuery.js, which requires jQuery to be included before use.
Quick Start
Step 1: Import mTips.js into the page.
Step 2: Add the data-mtpis attribute to the HTML element.
1 | <div data-mtpis='Enter the tooltip text'></div> |
Done! Go ahead and try it out! HTML code can also be inserted.
The tooltip can be displayed even without importing the CSS stylesheet. If you want additional styles, you need to import the CSS file, as shown below.
note:
The tooltip feature may not work with dynamically generated page elements, but this issue has already been fixed.
Usage
Enable via HTML Attributes
1 | <div data-mtpis='Tooltip text'></div> |
Simply add the data-mtpis attribute to any HTML element to enable mouse tooltip functionality for that element.
To change the tooltip text, simply modify the value of the data-mtpis attribute.
Enable via JavaScript
Show a tooltip using JavaScript:
1 | mTips.s('Tooltip controlled by JavaScript with a callback function'); |
Hide a tooltip using JavaScript:
1 | mTips.h(); |
Example:
1 2 3 4 5 6 7 8 9 10 | //====================================$('#app0').on('mouseenter', function(e) { // Mouse enter event: display the tooltip mTips.s('Tooltip controlled by JavaScript with a callback function');});$('#app0').on('mouseleave', function(e) { // Mouse leave event: remove the tooltip mTips.h();}); |
Set Styles via HTML Attributes
To use custom styles, you must import the mTips.css file into the page.
Set the style by adding the data-mtpis-style attribute and specifying its value.
1 | <div data-mtpis='Tooltip text' data-mtpis-style='Style'></div> |
There are five styles in total. default is the default style, so no separate configuration is required when using it.
1 2 3 4 5 | <div data-mtpis='Tooltip text' data-mtpis-style='default'></div><div data-mtpis='Tooltip text' data-mtpis-style='success'></div><div data-mtpis='Tooltip text' data-mtpis-style='info'></div><div data-mtpis='Tooltip text' data-mtpis-style='warning'></div><div data-mtpis='Tooltip text' data-mtpis-style='danger'></div> |
Color schemes are based on Bootstrap.
Set Styles via JavaScript
Pass the style parameter as the second argument.
mTips.s('Tooltip text ', 'Style parameter');Callback Function
The callback function, if provided, will be executed after the tooltip is displayed.
Pass the callback function as the third argument:
1 | mTips.s('Tooltip text ', 'Style parameter',function); |
If no style needs to be specified, you can pass the function directly as the second argument:
1 | mTips.s('Tooltip text ', function); |
The callback function also works after the tooltip is closed:
1 | mTips.h(function); |
Summary
Parameter List
1 | mTips.s('Tooltip text','Style parameter',function); |
Parameter 1: The element on which to display the tooltip. Preferably $(this).
Parameter 2: The text to display in the tooltip.
Parameter 3: If this parameter is a function, it is treated as a callback function; otherwise, it is treated as a style parameter.
Parameter 4: Callback function executed after the tooltip is displayed.
1 | mTips.h(function); |
Parameter 1: Optional. A callback function executed after the tooltip is removed.
Attribute List
1 | <div data-mtpis='Tooltip text' data-mtpis-style='Style'></div> |
data-mtpis: Tooltip text to display
data-mtpis-style: Used to set the tooltip style
Style List
default
success
info
warning
danger
Configuration Item
1 2 3 | mTips.c.x // Mouse X offset, defaults to 10mTips.c.y // Mouse Y offset, defaults to 10mTips.c.style // Style configuration in JSON format. Usually does not need modification. |
Customization
You can add your preferred CSS class in the stylesheet and pass its class name to the function. However, when defining the style, you must use mTips_ as the prefix to avoid conflicts with other styles. When passing the class name to the function, do not include this prefix.