Jquery EasyToolTip - Make Window content clickable

I would like to know if it's possible to make the Jquery EasyToolTip plugin window selectable. Right now, you mouseover the area and the tooltip comes up and follows the mouse. Anyway for it to stay stationary to select html content inside of the window.

Thanks!
/*
 * 	Easy Tooltip 1.0 - jQuery plugin
 *	written by Alen Grakalic	
 *	http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
(function($) {

	$.fn.easyTooltip = function(options){
	  
		// default configuration properties
		var defaults = {	
			xOffset: 15,		
			yOffset: 25,
			tooltipId: "easyTooltip",
			clickRemove: false,
            content: "",
			useElement: ""
		}; 
			
		var options = $.extend(defaults, options);  
		var content;
				
		this.each(function() {  				
			var title = $(this).attr("title");				
			$(this).hover(function(e){											 							   
				content = (options.content != "") ? options.content : title;
				content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
				$(this).attr("title","");									  				
				if (content != "" && content != undefined){			
					$("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");		
					$("#" + options.tooltipId)
						.css("position","absolute")
						.css("top",(e.pageY - options.yOffset) + "px")
						.css("left",(e.pageX + options.xOffset) + "px")						
						.css("display","none")
						.fadeIn("fast")
				}
			},
			function(){	
				$("#" + options.tooltipId).remove();
				$(this).attr("title",title);
			});	
			$(this).mousemove(function(e){
				$("#" + options.tooltipId)
					.css("top",(e.pageY - options.yOffset) + "px")
					.css("left",(e.pageX + options.xOffset) + "px")					
			});	
			if(options.clickRemove){
				$(this).mousedown(function(e){
					$("#" + options.tooltipId).remove();
					$(this).attr("title",title);
				});				
			}
		});
	  
	};
   
})(jQuery);

Open in new window

Shaggy1Asked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Alternatively use qtip2 - it is very good and the author very responsive on his forum

0
 
h4hardySr. Software EnginnerCommented:
you can check with the below code.. let me know is you need any more help
 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>jQuery Tools standalone demo</title>


	<script src="jquery.js"></script>
	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="standalone.css">	


<style>

body {
	margin:200px;
}	



/* trigger button */
#download_now {
	display:block;
	height:44px;
	margin-bottom:30px;
	overflow:hidden;
	width:159px;
	cursor:pointer;
}

/* mouseover state */
#download_now:hover {
	background-position:0 -44px ;		
}

/* clicked state */
#download_now:focus {
	background-position:0 -88px;
}

/* tooltip styling */
.tooltip {
	display:none;
	background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
	height:163px;
	padding:40px 30px 10px 30px;
	width:310px;
	font-size:11px;
	color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
	color:yellow;
	width:35px;
}

.tooltip a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
}
</style>
</head>

<body>



<!-- trigger element. a regular workable link -->
<a id="download_now">[ Mouse Over Here ]</a>

<!-- tooltip element -->
<div style="position: absolute; top: 17px; left: 174.5px; opacity: 0; display: none;" class="tooltip">

	<img src="any-html_files/eye.png" alt="Flying screens" style="float: left; margin: 0pt 15px 20px 0pt;">

	<table style="margin: 0pt;">
		<tbody><tr>
			<td class="label">File</td>
			<td>flowplayer-3.2.7.zip</td>
		</tr>
		<tr>
			<td class="label">Date</td>
			<td>2011-03-03</td>
		</tr>
		<tr>
			<td class="label">Size</td>
			<td>112 kB</td>
		</tr>
		<tr>
			<td class="label">OS</td>
			<td>all</td>
		</tr>		
	</tbody></table>

	<a href="http://flowplayer.org/3.2/">What's new in 3.2</a>
</div>

<script>

$(document).ready(function() {

$("#download_now").tooltip({ effect: 'slide'});
});
</script>
</body></html>

Open in new window

0
 
Shaggy1Author Commented:
Thanks for the "q - tip" works great, just what i needed
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.