Tooltip Quicker
Tooltip quicker is a small library, that helps you create new tooltips in a quick way.
Minified version of the library has only 1.3kb!. You can easily edit not minified version.
To download tooltip-quicker, you can use npm install tooltip-quicker
To download tooltip-quicker, you can use npm install tooltip-quicker
1. Description
A tooltip-quicker is a library that provides simple and fast tooltip functionality. You can customize it on your own by developing new styles for these tooltips.
Currently tooltips look like on included screenshot below:
1.1 Functionality description
- Tooltip quicker provides two ready icons to use as a tooltip icon.
- On desktop you can choose, between hovering on icon or clicking to show the tooltip.
- On mobile functionality changes automatically, user has to click on icon to show the tooltip.
- Tooltip provides cross icon to close the tooltip
2. Documentation
In documentation section, I'm going to introduce you how to use tooltip-quicker and install it
2.1 How to use library?
Firstly, in your js file, you have to declare below function:
tooltipQuicker.addTooltip('.parent-elem',{ eventType: 'click', dissapear: false });
First parameter
It's main div class or id of an element that is going to have your tooltips inside
<body class="parent-elem"><div tip-quick><div class="tooltip-quicker icon-2"></div><div class="tooltip-content"><h1>Content</h1><img class="tooltip-close-icon" src="images/close-tooltip.png" alt="close-tooltip"/></div></div></body>
Second parameter
The second parameter allows you to set the specific event up. Basically:
{eventType: 'click' || 'hover',dissapear: true || false}
- eventType - can have two events, or click or hover.
- dissapear - can be set to false or true. If true, it implies that when you hover and trigger mouseleave event, tooltip will dissapear automatically.
2.2 Which classes or elements are required?
Well, correct structure looks like that:
<div class="parent-elem"><div tip-quick> <!-- Has to have tip-quick attribute --><div class="tooltip-quicker icon-1"></div> <!-- Has to have tooltip-quicker class and icon-1 is optional --><div class="tooltip-content"> <!-- Has to have tooltip-content class --><h1>Content</h1><img class="tooltip-close-icon" src="images/close-tooltip.png" alt="close-tooltip"/> <!-- Has to have close icon with the class tooltip-close-icon --></div></div></div>
2.2 How to get it and install it?
You can simply get it into your application by downloading it by npm: npm install tooltip-quicker. Once you've installed the library, include it in your HTML file.
3. Contribution and the last word
Please, contribute freely into the project, raise issues, make pull request
Hopefully, I said everything clearly and you're going to enjoy tooltip-quicker
3.1 Contact
Hit me up on twitter, let's talk: https://twitter.com/RobertJWozniak
Check my other repositories, they're really cool! Thank you