www.webdeveloper.com
Results 1 to 2 of 2

Thread: Javascript Tipbox

  1. #1
    Join Date
    Dec 2008
    Posts
    123

    Javascript Tipbox

    I use the below script to create a tooltip that will pop up when mouseover for a form. On iPad/iPhone when I click on the icon it it does pop up but it will not go away when I try to click outside or on the icon again. How do I make it go away onclick or with a timeout. Or any other script that is more mobile compatible. thx.

    on the link
    HTML Code:
    <img src="tip-icon.png" onClick="return false;" onMouseOut="return hideTip();" onMouseOver="return tooltip('write tips here).');" >

    Code:
    captureMouse();
    
    var v_divname;
    var v_text;
    var v_title;
    var v_xoffset;
    var v_yoffset;
    var v_backcolor;
    var v_bordercolor;
    var v_textcolor;
    var v_titletextcolor;
    var v_width;
    var v_border;
    var v_title_padding;
    var v_content_padding;
    var v_fontface;
    var v_fontsize;
    var v_textalign;
    var v_titlefontsize;
    
    var v_xcoordinate = 0;
    var v_ycoordinate = 0;
    var v_visible = 0;
    var v_havemouse = 0;
    var v_layer = null;
    
    function tooltip(displaytext, title, commands) {
    	//Reset variables for this tool tip
    	init_tooltip();
    	
    	//Title and Text
    	v_title=title;
    	v_text=displaytext;
    	
    	//Parse commands if any
    	parseCommands(commands);
    	
    	
    	if (v_layer) { 
    		v_layer=getLayer(v_divname); 
    	}
    	
    	if (!(v_layer=createDivContainer())) { 
    		return false;
    	}
    
    	mainMethod();
    }
    
    function init_tooltip() {
    	
    	v_divname = 'tip';
    	v_text = 'Default Text';
    	v_title = '';
    	
    	//UI Variables
    	v_xoffset = 10;
    	v_yoffset = -30;
    	v_backcolor = '#f7f8f9';
    	v_bordercolor = '#d2dce1';
    	v_textcolor = '#6c92a8';
    	v_textalign = 'left';
    	v_width = 230;
    	
    	v_border = 1;
    	v_title_padding = '1px';
    	v_content_padding = '9px';
    	
    	v_fontface = 'Verdana, Helvetica, Arial, sans-serif';
    	v_fontsize = 11;
    	v_titlefontsize = 11;
    	
    	//SYSTEM VARIABLES
    	v_visible = 0;
    	v_layer = null;
    }
    
    function parseCommands(commands) {
    	if (commands != null) {
    		var comArray = commands.split(',');
    		for (var i = 0; i < comArray.length; i++) {
    			var args = comArray[i].split(':');
    			eval('v_' + trimWhitespace(args[0]) + '="' + trimWhitespace(args[1]) + '"');
    		}
    	}
    }
    
    // Clears popups if appropriate
    function hideTip() {
    	if (v_visible == 1) {
    		if (v_layer != null) {
    			v_layer.style.visibility = 'hidden';
    			v_visible = 0;
    		}
    	}
    	return true;
    }
    
    function mainMethod() {	
    	v_visible = 0;
    	
    	var html = makeHTML(v_text, v_title);	
    	createPopup(html);
    	
    	//if we have mouse coordinates, position layer and make visible
    	if (v_havemouse == 1) {	
    		positionLayer();
    		v_visible = 1;
    		v_layer.style.visibility = 'visible';
    	}
    }
    
    function makeHTML(text, title) {
    	
    	var container_style = 'width:' + v_width + 'px;';
    	container_style += 'border:' + v_border + 'px solid ' + v_bordercolor + ';';
    	container_style += 'background-color:' + v_backcolor + ';';
    	container_style += 'font-family:' + v_fontface + ';';
    	container_style += 'font-size:' + v_fontsize + 'px;';
    	
    	var title_style = 'background-color:' + v_bordercolor + ';';
    	title_style += 'padding:' + v_title_padding + ';';
    	title_style += 'color:' + v_titletextcolor + ';';
    	
    	var content_style = 'padding:' + v_content_padding + ';';
    	content_style += 'color:' + v_textcolor + ';';
    	content_style += 'text-align:' + v_textalign + ';';
    	
    	var txt = '<div id="tipbox_container" style="' + container_style + '">';
    	if (title!=null && title.length>0) {
    		txt += '<div id="tipbox_title" style="' + title_style + '">' + title + '</div>';
    	}
    	txt += '<div id="tipbox_content" style="' + content_style + '">' + text + '</div>';
    	txt += '</div>';
    	
    	return txt;
    }
    
    //Positions popup according to mouse input
    function positionLayer() {
    	
    	var placeX = 300;
    	var placeY = 300;
    	
    	//get final placement
    	placeX = horizontalPlacement();
    	placeY = verticalPlacement();
    	
    	//Move the object
    	v_layer.style.left = placeX + 'px';
    	v_layer.style.top = placeY + 'px';
    }
    
    //called when the mouse moves
    //sets mouse related variables
    function mouseMoveHandler(e) {
    	if (!e) {
    		e = event;
    	}
    	if (e.clientX) {
    	 //if there is an x pos property
    	 //GET MOUSE LOCATION
    		v_xcoordinate = mouseX(e);
    		v_ycoordinate = mouseY(e);	
    		v_havemouse = 1;
    	}
    	if (v_visible == 1) { 
    		positionLayer();	
    	}
    }
    
    //get mouse x coordinate
    function mouseX(evt) {
    	if (evt.pageX) return evt.pageX;
    	else if (evt.clientX) {
    	   return evt.clientX + (document.documentElement.scrollLeft ?
    	   document.documentElement.scrollLeft :
    	   document.body.scrollLeft);
    	}
    	else {
    		return null;
    	}
    }
    
    //get mouse y coordinate
    function mouseY(evt) {
    	if (evt.pageY) { 
    		return evt.pageY; 
    	}
    	else if (evt.clientY) {
    	   return evt.clientY + (document.documentElement.scrollTop ?
    	   document.documentElement.scrollTop :
    	   document.body.scrollTop);
    	}
    	else { 
    		return null;
    	}
    }
    
    //Set mouse handler
    function captureMouse() {
    	document.onmousemove = mouseMoveHandler;
    }
    
    //Creates the popup
    function createPopup(input) {
    
    	var popupwidth = v_width;
    	var text;
    	var zindex;
    	
    	text =  createBackLayer(popupwidth,zindex++);
    	text += '<div style="position: absolute; top: 0; left: 0; width: ' + popupwidth + 'px; z-index: ' + zindex + ';">' + input + '</div>';
    	
    	if (typeof v_layer.innerHTML != 'undefined') {
    		v_layer.innerHTML = text;
    	} 
    	
    	//After writing html measure height of backlayer to set height of iframe
    	var backlayer=self.document.getElementById("backdrop");
    	var container=self.document.getElementById("tipbox_container");
    	backlayer.height = container.offsetHeight;
    }
    
    //Back layer prevents forms from showing through popups
    function createBackLayer(width, Z) {
    	//Create backdrop with 0 height
    	return '<iframe id="backdrop" frameborder="0" scrolling="no" width="' + width + '" height="0" style="z-index: ' + Z + '; filter: Beta(Style=0,Opacity=0);"><p></iframe>';
    }
    
    //get horizontal box placement
    function horizontalPlacement() {
    	placeX = v_xcoordinate + v_xoffset;
    	return placeX;
    }
    
    //get vertical box placement
    function verticalPlacement() {
    	return v_ycoordinate + v_yoffset;
    }
    
    // create the div container for popup content if it doesn't exist
    function createDivContainer() {
    	var divContainer = self.document.getElementById(v_divname);
    	return divContainer;
    }
    
    function trimWhitespace(str) {  
    	while(str.charAt(0) == (" ") ) {  
    		str = str.substring(1);
    	}
    	while(str.charAt(str.length-1) == " " ) {  
    		str = str.substring(0,str.length-1);
    	}
    	return str;
    }
    Last edited by phpnewbie08; 04-19-2014 at 04:51 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Honestly, I'd say using javascript for tooltips is a bit much. You can actually create CSS tooltips, which probably would work out better in the case of mobile support.

    A nice little demo I found and really liked is probably where you might want to start looking. Granted, it's a little bulky (but it includes 4 different 'types' of the tooltip, which are all necessary, thus you could shorten the code). http://cbavota.bitbucket.org/css3-tips/

    There are also plenty of other places you can find people using pure CSS tooltips, and probably with much less code. The only thing you would need to note here is that these trigger on the :hover CSS pseudo-selector. You would merely need to add the :active pseudo-selector to allow these tooltips to trigger while the mouse (or a finger) is actively pressing on them.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles