Power Tip - A jQuery plugin that creates hover tooltips
JQuery 3.3.1, PowerTip
Snippet by CodAmz
5140 0
Resources
<div id="placement-examples"> <h2>Placement examples (with smart placement)</h2> <div> <input type="button" id="north-west" value="North West" title="North west placement" /> <input type="button" id="north" value="North" title="North placement" /> <input type="button" id="north-east" value="North East" title="North east placement" /><br /> <input type="button" id="west" value="West" title="West placement" /> <input type="button" id="east" value="East" title="East placement" /><br /> <input type="button" id="south-west" value="South West" title="South west placement" /> <input type="button" id="south" value="South" title="South placement" /> <input type="button" id="south-east" value="South East" title="South east placement" /> </div> </div> <div id="mousefollow-examples"> <h2>Mouse follow examples</h2> <div title="Mouse follow {followMouse: true}"> The PowerTip for this box will follow the mouse. </div> </div> <div id="mouseon-examples"> <h2>Mouse on to popup examples</h2> <div> The PowerTip for this box will appear on the right and you will be able to interact with its content. </div> </div> <div id="api-examples"> <h2>API examples</h2> <input id="api-open" type="button" value="Show mouse-on tooltip" /> <input id="api-close" type="button" value="Close any open tooltips" /> </div>
#placement-examples div { text-align: center; } #placement-examples input { background-color: #EEE; margin: 10px; padding: 10px 30px; } #placement-examples #east { margin-left: 200px; } #mousefollow-examples div { background-color: #EEE; text-align: center; margin: 0 auto; width: 100%; padding: 50px 0; } #mouseon-examples div { background-color: #EEE; text-align: center; width: 200px; padding: 40px; } #api-examples input { background-color: #EEE; margin: 10px; padding: 10px 30px; }
// placement examples $('#north').powerTip({ placement: 'n', smartPlacement: true }); $('#east').powerTip({ placement: 'e', smartPlacement: true }); $('#south').powerTip({ placement: 's', smartPlacement: true }); $('#west').powerTip({ placement: 'w', smartPlacement: true }); $('#north-west').powerTip({ placement: 'nw', smartPlacement: true }); $('#north-east').powerTip({ placement: 'ne', smartPlacement: true }); $('#south-west').powerTip({ placement: 'sw', smartPlacement: true }); $('#south-east').powerTip({ placement: 'se', smartPlacement: true }); // mouse follow examples $('#mousefollow-examples div').powerTip({ followMouse: true }); // mouse-on examples $('#mouseon-examples div').data('powertipjq', $([ '<p><b>Here is some content</b></p>', '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>', '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>' ].join('\n'))); $('#mouseon-examples div').powerTip({ placement: 'e', mouseOnToPopup: true }); // api examples $('#api-open').on('click', function() { $.powerTip.show($('#mouseon-examples div')); }); $('#api-close').on('click', function() { $.powerTip.hide(); });
Javascript Resources
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/js/core.js
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/js/csscoordinates.js
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/js/displaycontroller.js
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/js/placementcalculator.js
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/js/tooltipcontroller.js
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/js/utility.js
{} CSS Resources
https://codeamaze.com/Uploads/Resources/2018/08/Nu3mJtZI2sI/css/jquery.powertip.css