mtip
v0.0.1
Published
A flexible, simple,cross browser and extensible Javascript plugin for javascript custom tooltips.
Downloads
1
Maintainers
manishjankyReadme
mtip
A flexible, simple,cross browser and extensible Javascript plugin for javascript custom tooltips by Manish Kumar under MIT license.
Compatible with
Mozilla Firefox
Google Chrome,
IE8+
Opera
No Jquery required. Fully Customizable with available options
Getting Strated
Download & Include mTip.js
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.
Set up Your Markup
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>Activate mTip Tooltip
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.
Options
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.
FAQ's
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.