README
ArtDesignToolTip (v1.0.0)
jQuery PlugIn to preview HTML content in tooltip
- ArtDesignToolTip is a jQuery PlugIn to preview HTML content in tooltip
- Class prefix to prevent conflict with classes from other CSS files
- Full style control with JS - no need CSS: position, icons, colors, opacity etc
- Full control of the position of close element
- Multiple instances
Full instructions, Examples and Download - www.artdesign-jquery.com/ArtDesignBoxIFrame
Instruction
Load files
First method
Define a required files in file
Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js
window.ArtDesignFilesLoader.RequiredResources([
"JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css",
"JavaScript/Browser/Browser.js",
"JavaScript/ColorAnimation/ColorAnimation.js",
"JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js",
"JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js",
"JavaScript/ArtDesign/ArtDesignToolTip/ArtDesignToolTipSettings.js",
"JavaScript/ArtDesign/ArtDesignToolTip/ArtDesignToolTip.js"
]);
Load Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/
with param BasePath
were BasePath
is path to folder Resources
.
<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/"></script>
Then initialize a PlugIn with function window.ArtDesignFilesLoader.Ready()
.
window.ArtDesignFilesLoader.Ready(function() {
$("body").ArtDesignToolTip();
});
Second method
Load all the necessary files to run a PlugIn.
<link rel="stylesheet" href="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css">
<script type="text/javascript" src="JavaScript/jQuery/jQuery.js"></script>
<script type="text/javascript" src="JavaScript/Browser/Browser.js"></script>
<script type="text/javascript" src="JavaScript/ColorAnimation/ColorAnimation.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignToolTip/ArtDesignToolTipSettings.js"></script>
<script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignToolTip/ArtDesignToolTip.js"></script>
Then initialize a PlugIn.
$(document).ready(function() {
$("body").ArtDesignToolTip();
}
SetUp web elements
ArtDesignToolTip
Create html element (
<a>
,<div>
,<span>
,<input>
,<textarea>
etc.) and add attrdata-plugin-ad-tooltip="ad-tooltip"
, attrdata-ad-tooltip-title="ToolTip Title"
and attrdata-ad-tooltip-content="ToolTip Content"
.
<div data-plugin-ad-tooltip="ad-tooltip" data-ad-tooltip-title="ToolTip Title" data-ad-tooltip-content="ToolTip Content">Tooltip</div>