Sticky Tooltip for Ipad

[mimi]

Hello!

http://www.dynamicdrive.com/dynamici...ckytooltip.htm

I love this simple and great tooltip.
I would to make this sticky tooltip responsive to ipad, iphone and Android.
For example, "mouseenter" event will be changed "click" or "touchstart" event, if we access by the touch device.

I would really appreciate someone's help and advice.

Thank you!
mimi

[bernie1227]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[mimi]

Hi Bernie,

Thank you for pointing that out.

mimi

[vwphillips]

/* Sticky Tooltip script (v1.0)
* Created: Nov 25th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var stickytooltip={
	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
	fadeinspeed: 200, //duration of fade effect in milliseconds
	rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
	stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
	stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
	stickynotice2: "Click outside this box to hide it", //customize tooltip status message

	//***** NO NEED TO EDIT BEYOND HERE

	isdocked: false,

	positiontooltip:function($, $tooltip, e){
		var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
		var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
		x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
		y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
		$tooltip.css({left:x, top:y})
	},

	showbox:function($, $tooltip, e){
		$tooltip.fadeIn(this.fadeinspeed)
		this.positiontooltip($, $tooltip, e)
	},

	hidebox:function($, $tooltip){
		if (!this.isdocked){
			$tooltip.stop(false, true).hide()
			$tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
		}
	},

	docktooltip:function($, $tooltip, e){
		this.isdocked=true
		$tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
	},


	init:function(targetselector, tipid){
    	jQuery(document).ready(function($){
			var $targets=$(targetselector)
			var $tooltip=$('#'+tipid).appendTo(document.body)
			if ($targets.length==0)
				return
			var $alltips=$tooltip.find('div.atip')
			if (!stickytooltip.rightclickstick)
				stickytooltip.stickynotice1[1]=''
			stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
			stickytooltip.hidebox($, $tooltip)
			$targets.bind('mouseenter', function(e){
 //				$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
 //				stickytooltip.showbox($, $tooltip, e)
			})
			$targets.bind('mouseleave', function(e){
 //				stickytooltip.hidebox($, $tooltip)
			})
			$targets.bind('mousemove', function(e){
 				$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
				stickytooltip.showbox($, $tooltip, e)
		    	if (!stickytooltip.isdocked){
					stickytooltip.positiontooltip($, $tooltip, e)
				}
			})
			$tooltip.bind("mouseenter", function(){
				stickytooltip.hidebox($, $tooltip)
			})
			$tooltip.bind("click", function(e){
				e.stopPropagation()
			})
			$(this).bind("click", function(e){
				if (e.button==0){
					stickytooltip.isdocked=false
					stickytooltip.hidebox($, $tooltip)
				}
			})
			$(this).bind("contextmenu", function(e){
				if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
					stickytooltip.docktooltip($, $tooltip, e)
					return false
				}
			})
			$(this).bind('keypress', function(e){
				var keyunicode=e.charCode || e.keyCode
				if (keyunicode==115){ //if "s" key was pressed
					stickytooltip.docktooltip($, $tooltip, e)
				}
			})
		}) //end dom ready
	}
}

[mimi]

Thanks! but it doesn't work:'(

[bernie1227]

Hiya Mina,
With the version on the dynamic drive page, on an iPad, it displays the same functionality that you are describing. For example, both Thailand and British columbia's tooltips appear when the links clicked on and diissapears when clicked away, however the one with the lank, Japan, does not work. Try looking example script for where those two links are and attempt to imitate that.
Thanks,
Bernie