artdesign-tooltip

jQuery PlugIn to preview HTML content in tooltip

Usage no npm install needed!

<script type="module">
  import artdesignTooltip from 'https://cdn.skypack.dev/artdesign-tooltip';
</script>

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

ArtDesignToolTip

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 attr data-plugin-ad-tooltip="ad-tooltip", attr data-ad-tooltip-title="ToolTip Title" and attr data-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>