JSFiddle - React, Tailwind, and code Playground

by mark edwards

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<h2>Persistant Tooltip Test!</h2>
<h5>a persistant tooltip is won that says "live" if you mouse over it.  it should only disappear once you mouse off the item or the tooltip itself - 2014-06-10</h5>
<br />
first: <span class='marksTooltips' id='first-span-google' data-tooltip='<span class="popupTooltipClass">first:<a href="http://google.com">google</a></span>'>google tooltip</span>
&nbsp; &nbsp; &nbsp;	
second: <span class='marksTooltips' id='second-span-yahoo' data-tooltip='<span  class="popupTooltipClass"second:><a href="http://yahoo.com">yahoo</a></span>'>yahoo tooltip</span>

JavaScript

$(document).ready(function(){
	$("span.marksTooltips").jqxTooltip({
	    autoHide: false,
        position: 'bottom',
         left:  -10
	});
	$.each($("span.marksTooltips"), function () {
	    $(this).jqxTooltip({
	        content: $(this).attr('data-tooltip')
	    });
		var oldX= 0, oldY= 0, newX= 0, newY= 0, directionDegrees	= 0;
		var ready		= true;
		$('span.marksTooltips').mousemove(function(e) {
				/* determine direction of cursor as we leave the element */
			newX = e.pageX;
			newY = e.pageY;
			checkForMovement();
		})
		function checkForMovement() {
			if  (ready)	{
				ready = false ;
				setTimeout(function() {
					directionDegrees = Math.atan2( (newX - oldX) , ((newY - oldY)*-1) ) / Math.PI * 180;
					if  ( directionDegrees < 0 )	{
						directionDegrees = 360 + directionDegrees;
					}
					oldX=newX;
					oldY=newY;
					ready = true ;
				}, 10);
			}
		};
		$('span.marksTooltips').mouseleave(function() {
			if  ( directionDegrees < 110 || directionDegrees > 250 )	{
				$('span.marksTooltips').jqxTooltip('close', 300);
			}
		});
		$('span.popupTooltipClass').mouseleave(function() {
			$("span.marksTooltips").jqxTooltip('close', 300);
		});
    });
});