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?
- A cross browser javascript custom tooltip plugin. A simple, flexible, extensible and customizable plugin.
2.Need help with implementing mTip?
- Please go through the Getting Started Section. Still if you face any issue feel free to contact.
3.Do we need jQuery for mTip to work?
- No mTip is a pure javascript plugin. You don't need jQuery for mTip to work.
4.Which all browsers do mTip support?
- mTip supports all modern browsers. IE8+, Edge, Chrome, Firefox, Opera.
5.I found a bug/issue with mTip?
- Go ahead and report a issue on issue tracker on GitHub Issue Tracker
6.How can i customize mTip tooltips?
- There is a range of options available that helps to customize mTip tooltips. Please visit Options section to know more about available options the help customize mTip tooltips.
7.How compatible is mTip tooltip with Internet Explorer?
- mTip supports IE 8 and later versions. It works decently with IE8+. But there might be some things which may come up. You can report if you come across one, we will address your query and try to fix if a issue is reported.
More Features Coming Soon.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent