Lightweight JavaScript and CSS library to create stylish and customizable tooltips for your website.
Enhance your website's user experience with visually appealing and informative tooltips. customTooltip.js provides a simple yet powerful way to replace default browser tooltips with custom-designed ones, improving both UX and UI.
You can see a live demo by opening the customTooltip.html file in your browser. This file showcases different tooltip examples and how they appear on various elements.
Integrate custom tooltips into your website in a few easy steps:
-
Include the CSS: Add the
customTooltip.cssstylesheet to the<head>section of your HTML document.<link rel="stylesheet" href="customTooltip.css">
Ensure the path to
customTooltip.cssis correct relative to your HTML file. -
Include the JavaScript: Add the
customTooltip.jsscript before the closing</body>tag of your HTML document.<script src="customTooltip.js"></script>
Make sure the path to
customTooltip.jsis also correct. -
Add
data-tooltipattribute: To any HTML element where you want to display a custom tooltip, add thedata-tooltipattribute and set its value to the tooltip text.<button data-tooltip="This is a custom tooltip!">Hover over me</button> <a href="#" data-tooltip="A longer tooltip message.">Link with tooltip</a> <span data-tooltip="Tooltip on a span element.">Span element</span>
That's all! Custom tooltips will now appear when users hover over elements with the
data-tooltipattribute.
The appearance of the tooltips is fully customizable through CSS by modifying the customTooltip.css file. Here are some key areas you can easily adjust:
-
Basic Tooltip Styling (
.custom-tooltipclass):background-color: Change the tooltip background color.color: Change the tooltip text color.padding: Adjust the spacing inside the tooltip.border-radius: Control the rounded corners of the tooltip.font-size: Set the tooltip text size.box-shadow: Customize the tooltip's shadow effect.transition: Modify the fade-in/fade-out animation speed and style.
-
Arrow Styling (
.custom-tooltip::after): (Optional - if you use the arrow)border-color: Change the color of the tooltip arrow.border-width: Adjust the size of the arrow.top,left,margin-left,margin-top: Fine-tune the arrow's position and alignment.
-
Arrow Position Classes (
.custom-tooltip.tooltip-arrow-top,.custom-tooltip.tooltip-arrow-bottom):- These classes (applied automatically by the JavaScript when needed) allow you to style the arrow differently depending on whether the tooltip appears above or below the element. You can adjust the
topandborder-colorproperties within these classes.
- These classes (applied automatically by the JavaScript when needed) allow you to style the arrow differently depending on whether the tooltip appears above or below the element. You can adjust the
Example Customizations (in customTooltip.css):
-
Change colors and font:
.custom-tooltip { background-color: #0056b3; /* Dark blue background */ color: #fffde7; /* Light yellow text */ font-family: 'Arial', sans-serif; } .custom-tooltip::after { border-color: #0056b3 transparent transparent transparent; /* Match arrow color to background */ }
-
Remove the arrow completely:
.custom-tooltip::after { content: none; /* Hide the arrow */ }
Experiment with these and other CSS properties to create tooltips that perfectly match your website's design and branding.
customTooltip.js: The JavaScript code responsible for creating, positioning, and showing/hiding the custom tooltips.customTooltip.css: The CSS stylesheet that defines the visual appearance and animation of the tooltips.customTooltip.html: A demo HTML file demonstrating various tooltip examples and usage.demo-custom-tooltip.gif: An animated GIF showcasing the tooltips in action (like the one at the top of this README).
Jaime Paez
This project is open-source and available under the MIT License (optional: you can add a LICENSE file and link it here). Feel free to use, modify, and distribute it as you wish.
Contributions are welcome! If you have suggestions for improvements, bug fixes, or new features, please feel free to:
- Fork the repository.
- Create a new branch for your feature or fix.
- Implement your changes and commit them.
- Submit a pull request.
Enjoy using customTooltip.js to create beautiful and user-friendly tooltips on your website!