A flexible, simple,cross browser and extensible Javascript plugin for javascript custom tooltips.
A flexible, simple,cross browser and extensible Javascript plugin for javascript custom tooltips by Manish Kumar under MIT license.
No Jquery required. Fully Customizable with available options
After you Download mTip include mTip.js files in your html.
<head>
<script type="text/javascript" src="mTip/mTip.js"></script>
</head>
Note: You don't need any jQuery for mTip to work. It built on pure javascript and supports most of the browsers out there as listed above.
To have the elements to show mTip tooltips set the data-mtip=* attribute to whatever text you want to be shown in the tooltip.
//Apply tooltip to a span element
<span data-mtip="This is a span">This is a span</span>
//Apply tooltip to a div
<div data-mtip="This is a div">This is a div</div>
/Apply tooltip to a image
<img src="img.jpg" data-mtip="This is a Image">This is a Image</div>
The last thing to be done is to activate mTip. In order to activate do this add below code in your head tag.
//If you are using jQuery
<script>
$(document).ready(function(){
mTip();
});
</script>
//If you are not using jQuery
<script>
window.onload=function(){
mTip();
}
</script>
//If you want to use mTip in angular projects keep the below code in your controller
<script>
$scope.$on('$viewContentLoaded', function () {
//Here your view content is fully loaded !!
mTip();
});
</script>
And there you go nothing else needed. You are successfuly done away with using the default html tooltips and in place of that you will now see tooltips of your choice which you can even configure according to your choice. Read more in Options on how to customize the mTip tooltips.
mTip gives you a range of options which you can use to customize your tooltips to your satisfaction. Here is how you can use these options.
<script>
$(document).ready(function(){
mTip({
color:"white",
backgroundColor:"rgb(158, 226, 235)",
position:"bottom"
});
});
</script>
Below is the list of currently available options. More to come soon.
| Option | Accepted Values | Description |
|---|---|---|
| backgroundColor | ny valid html color in hexadecimal/rgb(0,0,0)/nameOfColor | Sets the background color of the mTip tooltip |
| color | Any valid html color in hexadecimal/rgb(0,0,0)/nameOfColor | Sets the forecolor/textcolor of the mTip tooltip text |
| delay | Any valid integer | Delays the appearence of the tooltip for the number of miliseconds passed as the value of the delay parameter. |
| opacity | Any valid integer between 0 - 1 | Sets the opacity of the tooltip i.e gives transparency to the tooltip with 0 being transparent and 1 being opaque. Also using this can affect the transparency of contents of the tooltip |
| position | bottom, left, right, top | This parameter is used to position the mTip tooltip. Based on the value of the option the tooltip position is either bottom, left, right or top. |
| selector | Any valid CSS Selector | This parameter is used to initialize tooltip only on those elements which are identified by the selector as passed in the options for example:- use '.className' for selecting elemets having class as 'className'. |
| trigger | click, hover | This parameter is used to tell mTip when to show the tooltip i.e based on the value passes the tooltip is shown either on click of the element or mouse hover. |
1.What is mTip?
2.Need help with implementing mTip?
3.Do we need jQuery for mTip to work?
4.Which all browsers do mTip support?
5.I found a bug/issue with mTip?
6.How can i customize mTip tooltips?
7.How compatible is mTip tooltip with Internet Explorer?
More Features Coming Soon.
FAQs
A flexible, simple,cross browser and extensible Javascript plugin for javascript custom tooltips.
The npm package mtip receives a total of 1 weekly downloads. As such, mtip popularity was classified as not popular.
We found that mtip demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.