Results 1 to 4 of 4

Thread: Stickytooltip - Prevent tooltip from changing if docked?

  1. #1
    Join Date
    Oct 2015
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Stickytooltip - Prevent tooltip from changing if docked?

    I'm using stickytooltip and what I'm trying to get working is that if I have docked a tooltip, for it not to change when I mouse over another item that has a different tooltip.

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

    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: [""], //customize tooltip status message
    	stickynotice2: "", //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({right:15, top:55})
    	},
    	
    	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){
    				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
    	}
    }
    
    //stickytooltip.init("targetElementSelector", "tooltipcontainer")
    stickytooltip.init("*[data-tooltip]", "mystickytooltip")

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Sure, try the below modified .js file, which should do the trick.
    Attached Files Attached Files
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    ragingfred (11-24-2015)

  4. #3
    Join Date
    Oct 2015
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That worked perfectly. Thank you.

  5. #4
    Join Date
    Oct 2015
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Is there anyway to make this updated script sticky on left and clear on right?

Similar Threads

  1. how to init stickytooltip on postback ?
    By Surojit Seal in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-27-2014, 06:40 PM
  2. StickyTooltip left click
    By Channiro in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-22-2013, 02:30 PM
  3. Rich HTML Balloon Tooltip - prevent browser preloading
    By gordonlips in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-21-2009, 12:03 PM
  4. Docked Content: change alignment to bottom?
    By bustya in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-04-2009, 06:46 AM
  5. Rich HTML Balloon Tooltip > tooltip inside of another tooltip?
    By croceldon in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-24-2008, 03:35 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •