artdesign-tooltip v1.0.0
#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 paramBasePath
wereBasePath
is path to folderResources
.<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>
9 years ago