JavaScript - Tooltip Js And Ie

I have a the following code for displaying a tooltip:

Code:

<a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display">

The javascript for the tooltip is as follows:

Code:

$(document).ready(function(){

    $("a.tooltip").live( {
        mouseenter:
            function(e){
                this.t = this.title;
                this.title = "";
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip")
                    .css("top",(e.pageY - 10) + "px")
                    .css("left",(e.pageX + 20) + "px")
                    .fadeIn("fast");
                var css_width = $('#tooltip').width();
                var text_width = $('#tooltip').textWidth();
                if (css_width > text_width) {
                    $('#tooltip').width(text_width);
                }
            },
        mouseleave:
            function(){
                this.title = this.t;
                $("#tooltip").remove();
            }
        }
    );

});

$.fn.textWidth = function textWidth() {
    var html_org = $(this).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(this).html(html_calc); 
    var width= $(this).find('span:first').width(); 
    $(this).html(html_org); 
    return width;
}

What I want to do is to be able to add another variable 'width' to be able to set the width of the tooltip like so:

Code:

<a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display">

This width will then be passed into the javascript above and used to set the width of the tooltip.

How can I modify the above code to do this??

Thanks

http://www.panic.com/coda/

If you put ur mouse over Download a fancy jquery pops up! I wud want the same popup but flip the image around so its below the mouse pointer not above, the CSS is confusing me can some1 tell me how do i fix that issue?

Thanx

Hi I would like to use javascript to control what tooltip displays when a tab is rolled over depending on which tab was clicked.

Code:

  <li id='1tab_1a' class='selected'><a id='1link_1a'  title="Customer Info Screen"><span >Customer Info</span></a></li>
  <li id='1tab_1b' ><a id='1link_1b'  title="Order Detail"  ><span>Order</span></a></li>
 
 <li id='1tab_1c' ><a id='1link_1c'  title="Phone Detail" ><span>Phone:  7093521232</span></a></li>

For example when the Customer Info tab is selected I would like the tooltips to be like above but when Order is the tab selected I would like the
tooltip to say Customer Info Detail, Order Detail Screen, and Phone Detail. How could I use an onclick event to control what tooltip is being
displayed depending on which tab is selected? I have about 20 sets of customer info and sometimes not everyone contains all of the tabs and I
would also like to be able to add more customers.

I have had trouble with this problem for a while and I'm open to all suggestions. My problem is one of reference and of appending children to the body of the document. What I am trying to do is calculate the height of a tooltip div so that I can position it vertically away from the mouse dynamically based on where the mouse is while it is still over the link. I have a list of anchors set in an unordered list and they have a tooltip attribute: tooltip="tooltip info goes here".

Code:

initToolTips = function(){
	var anchors = document.getElementsByTagName("a");
	for(var i = 0; i < anchors.length; i++){
		var tip = anchors[i].getAttribute("tooltip");
		if(!tip) continue;

		var divHolder = document.createElement("div");
		var divTop = document.createElement("div");
		var divMid = document.createElement("div");
		var divBot = document.createElement("div");

		divHolder.className = "tooltip";  // color:#333;
		divTop.className = "tooltiptop"; // background:url(...) ;
		divMid.className = "tooltipmid"; // background:url(...) repeat-y;
		divBot.className = "tooltipbot"; // background:url(...);

		divHolder.appendChild(divTop);
		divHolder.appendChild(divMid);
		divHolder.appendChild(divBot);
		
		var atts = divHolder.style;

		anchors[i].onmouseover = function(e){ 
			divMid.innerHTML = e.target.getAttribute("tooltip");
			document.body.appendChild(divHolder);

			alert(divHolder.style.height); //divHolder is 
		}
		anchors[i].onmousemove = function(e){
			var ie = (document.all);
			if(ie){
				atts.marginLeft =(event.clientX) + "px";
				//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height)  + "px";
			}
			else{
				atts.marginLeft = (e.pageX) + "px";
				//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
			}
		}
		anchors[i].onmouseout = function(e){
			document.body.removeChild(divHolder);	
		}
	}
}

The initToolTips function is called from a window.onload. The problem is that in the onmouseover function i cannot get to the height attribute of the div anymore, I have had people tell me that the reference is gone when the function ends so I cannot use the divHolder variable like that. I have also had people tell me that I cannot reference height values when the object does not exist yet. To me it looks like the div tooltip object exists after the onmouseover function but i cannot obtain a reference to it. I have thought about setting an attribute of the anchor tag the creates the div like offsetToolTipY='divHolder.style.height'; but i can't get a reference of the height outside of the onmouseover function because it hasn't been appended to the document yet.

The only other thing I could think of was to setup the div completely and set the display:none; attribute and then append it to the document (all outside of the onmouseover function). And then the onmouseover function would only set the display:inline; but again this did not work because for some reason it still does not have the height information. here is the code for that example:

Code:

wren.initToolTips = function(){
	var anchors = document.getElementsByTagName("a");
	for(var i = 0; i < anchors.length; i++){
		var tip = anchors[i].getAttribute("tooltip");
		if(!tip) continue;

		var divHolder = document.createElement("div");
		var divTop = document.createElement("div");
		var divMid = document.createElement("div");
		var divBot = document.createElement("div");

		divHolder.className = "tooltip";
		divTop.className = "tooltiptop";
		divMid.className = "tooltipmid";
		divBot.className = "tooltipbot";

		divHolder.appendChild(divTop);
		divHolder.appendChild(divMid);
		divHolder.appendChild(divBot);
		
		var atts = divHolder.style;
		atts.display = "none";
		document.body.appendChild(divHolder);

		anchors[i].onmouseover = function(e){ 
			divMid.innerHTML = e.target.getAttribute("tooltip");
			atts.display = "inline";
			//alert(divHolder.style.height); //alerts nothing
		}
		anchors[i].onmousemove = function(e){
			var ie = (document.all);
			if(ie){
				atts.marginLeft =(event.clientX) + "px";
				//atts.marginTop = (event.clientY - divTop.style.height - divMid.style.height - divBot.style.height)  + "px";
			}
			else{
				atts.marginLeft = (e.pageX) + "px";
				//atts.marginTop = (e.pageY - divTop.style.height - divMid.style.height - divBot.style.height) + "px";
			}
		}
		anchors[i].onmouseout = function(e){
			atts.display = "none";
		}
	}
}

I can't get any height information from the dynamically created div at all.
Any Help is immensely appreciated. Thank You.

-Jon

Hi.
I'm very new to creating webpages. I came across this guide for making tooltips online (here's the link:http://sixrevisions.com/tutorials/ja...cript_tooltip/)

I love the look of the tooltip. The problem I'm having is, when I scroll down, the tooltip stays at the top of the page. Does anyone have any idea why?

hello

i wanted to add HTML Tooltip script to my website
and if i done all what instructions told then that worked with links only

is possible to make it work with a image links?
i made image with paint so the quality is bad :P

I was wondering if I could get some help in something. I am working on my church's website, and I previously implemented something called "Reftagger" onto the new website: http://www.logos.com/reftagger

It "converts" any bible verse into a hyperlink as well as a tooltip. I thought that this was a neat idea, and wanted to do the same with the Westminster Larger (and Shorter) Catechism as well. Anytime it says "WLC Q58" (for example) I want it to automatically display that specific question and answer. So far, I simply have a basic tooltip and a hyperlink inserted for every WLC Q: http://covenantrpc.freehostia.com/covenant/sermons/ (just look at the page source and you'll see what I did). Then I have the tooltip.js file: http://covenantrpc.freehostia.com/co...ons/tooltip.js

What I want to do is create some sort of definition library or glossary. One where it tells the webpage that every time the webpage says "WLC 58" it will be automatically converted into a hyperlink and tooltip, just like Reftagger.

I'm trying to use Zeroclipboard http://code.google.com/p/zeroclipboard/
to copy stuff to the clipboard and add a tooltip when the mouse hover on the flash. but it doesn't seem to be working.
my html code:

Code:

<div rel="<?php echo $url;?>" class="cp-code">copied code</div>
<div class="test" style="display: none; border: 1px solid #ccc; padding: 8px;">click copy,test,test</div>

My js code: i have added the jquery library.

Code:

ZeroClipboard.setMoviePath("http://example.com/js/ZeroClipboard.swf");
var clip = null;
var url = '';
function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor( true );

    $('.cp-code').mouseover( function() {
        clip.setText(this.innerHTML);
             $('test').style.display = 'block';
        if (clip.div) {
            clip.receiveEvent('mouseout', null);
            clip.reposition(this);
        } else {
                        clip.glue(this);
                }
        clip.receiveEvent('mouseover', null);
        url = $(this).attr('rel');
    });

    clip.addEventListener('mouseUp', function(client) {
        window.open(url);
    });
clip.addEventListener('mouseOut', function (client) {
 $('test').style.display = 'none'; 
});
}

$(document).ready(function() {
	init();
});

Hi all, can anyone recommend me nice tooltip script which is javascript library independent, meaning no help/code from any of libraries such as (jquery, prototype,scriptalicious, mootools,extjs etc.).

Here is the one I particularly like but it uses protoype and that is not option for me now, because I'm just integrating something else into already existing huge script and I don't wanna mess up old functionality or bring some additional unnecessary overhead.

Or even better if you can give me some guidelines / pointers , how to make one from scratch that would be acceptable for me also.

The most important thing is that it points from above downwards, because I found like dozen of good ones but pointing from below. Here is an example what I mean when I say from pointing from above.



Thank you

I'm using custom javascript tooltips to show information about designs in a t-shirt shop, such as design name and artist. I downloaded the code and CSS for the tooltips and am attempting to assign the tooltip to each design using a javascript array and a for-in loop. Only problem is that the tooltips aren't showing at all, no matter what I do. I think the problem is related to the onmouseover event that I'm using, but the only thing that seems to work even partway is changing the visibility to "show" in the CSS. From that I can see that the text is being assigned to the tooltips properly and that they are being positioned within the window, but the onmouseover event is having no effect either way when I revert the visibility back to "hidden." Help!

Here is the code for the "toolTip.js" file:

Code:

// Extended Tooltip Javascript
// copyright 9th August 2002, 3rd July 2005, 24th August 2008
// by Stephen Chapman, Felgall Pty Ltd

// permission is granted to use this javascript provided that the below code is not altered

function pw() 
	{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth}; 
	
function mouseX(evt) 
	{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;} 

function mouseY(evt) 
	{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY} 
	
function popUp(evt,oi) 
	{if (document.getElementById) 
		{var wp = pw(); 
		dm = document.getElementById(oi); 
		ds = dm.style; 
		st = ds.visibility; 
		
		if (dm.offsetWidth) 
			ew = dm.offsetWidth; 
		
		else if (dm.clip.width) 
			ew = dm.clip.width; 
			
			if (st == "visible" || st == "show") 
				{ ds.visibility = "hidden"; } 
			
			else {
				tv = mouseY(evt) + 20; 
				lv = mouseX(evt) - (ew/4); 
				
				if (lv < 2) 
					lv = 2; 
				
				else if (lv + ew > wp) 
						lv -= ew/2; lv += 'px';tv += 'px';  
						ds.left = lv; 
						ds.top = tv; 
						ds.visibility = "visible";
				}
			}
		}

Here is the relevant code where I attempt to assign the event to the tooltip visibility change. Note the syntax in SetLinks() function, where the onclick behavior is set. This syntax is working perfectly here. I modelled the 'controlPopUp() syntax similarly, but no go.

Code:

window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
		controlToolTip();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
						
						var newDesignTip = document.createElement('div');
						var newDesignTipID = "tt-design" + boxNum;
						newDesignTip.setAttribute('class',"tip");
						newDesignTip.textContent = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						newDesignTip.innerText = designImages[boxNum][2] + " Artist: " + designImages[boxNum][3];
						
						newDesignBox.appendChild(newDesignTip);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (var x in designImages)
			{ 
				document.getElementById("design"+x).onclick = new Function( "sendToURL(" + x + ")" );
			}
	}
	
function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

function controlToolTip()
	{
		for (var x in designImages)
			{ 
				var currTip = "tt-design" + x;
				document.getElementById( "design" + x ).onmouseover = "controlPopUp( event , " + x + ")";
			}
	}
	
function controlPopUp( evt , x )
	{
		var e = evt;
		var currTip = "tt-design" + x;
		popUp( e , currTip );
	}

Here is the CSS:

Code:

.tip {
	font:10px/12px Arial,Helvetica,sans-serif; 
	border:solid 1px #666666; 
	width:270px; 
	padding:1px;
	position:absolute; 
	z-index:100; 
	visibility:hidden;
	color:#333333; 
	top:20px;
	left:90px; 
	background-color:#ffffcc;
	layer-background-color:#ffffcc;
}

Thanks in advance for your help!

I am able to align the tooltip using the offset command, but would like to align the tooltip to open in the upper left of the screen. How can I do this?
Thanks, Wina

i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why?

i test it on this
site: Quote:
http://bowser.effectgames.com/~jhuck...rd/test10.html

Code:

$(document).ready(function(){
   $("#d_clip_container").hover(
  function () {
    $(this).append($('<span class="tip">click to copy</span>'));
  },
  function () {
    $(this).find("span:last").remove();
  });
})

i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you.

Hello,

I'm attempting to use a jQuery tooltip (Tipsy, located here) in the index of a forum. What I'd like to do is remove the forum's description and place it in a pop-up when you hover over the forum name.

I've managed to get it to work, but only on the very first forum name. After that, they simply display the default browser tooltip.

Here is the script code that goes in the header:

Code:

<script type='text/javascript'>
jQuery.noConflict();
  jQuery(function() {
    jQuery('#tooltip').tipsy({gravity: 's'});
  });
</script>

Here is the part of the template that is affected:

Code:

<h4>
    <a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" id='tooltip' title='{$forum_data['description']}'>{$forum_data['name']}</a>
</h4>

And the Tipsy library can be viewed he http://www.xasper.net/jquery.tipsy.js

Does anyone know what could get this to work?

I appreciate any assistance. Thank you.

Hello! I come to you guys with a javascript problem. I'm using the javascript mouseover called wz_tooltip.js located here.
Inside of it, I'm using many variables which have worked perfectly fine. If any variable has a value that conflicts with javascript, I simply do a php str_replace. This has worked perfectly for all but one issue. When one of the $string has a breaking line in it <br />, it breaks the javascript mouseover entirely. I can't figure this out for the life of me. The mouseover code itself is bolded:

Code:

$placeholders = array("'", "<br />");
$fixup = array("\'", "TEST");

$saPreview2 = str_replace($placeholders, $fixup, $lastxdevel2['pagetext']);

$lastxdevelt2.="<div class='smallfont'><font size='2'><a  onmouseover=\"Tip('<b>Title:</b> $saTitle2<br/><b>User:</b> $lastxdevel2[lastposter]<br /><b>Last Post:</b>$agdate2<br/><b>Preview: </b>$saPreview2')\" onmouseout=\"UnTip()\"  href='showthread.php?t=$lastxdevel2[threadid]'>$lastxdevel2[title]</a></font></div>";

I tested with other values to make sure that the strings were properly being replaced, and indeed they were. I have the mouseover tooltip set to a specific width. So multiple lines work fine (one line running into another), but if there is a <br /> inside or any form of a formal line break, it literally causes the javascript mouseover script to cease to function. This is impossible to avoid because $string's value is text from a forum post.

I'll reiterate that the str replace is working. When I view source, there are no <br/> tags. There are still line breaks though.

Why would line breaks in $string cause a javascript mouseover to cease functioning? I have a feeling it must be how the tooltip handles line breaks? Thank you in advance.

Hi!

My problem:

When my web page loads, i check the height of the browser window to set the height of the elements of the page correctly.
But after that i can often see appearing tooltips after the page loaded.
For example: automatic page translate under google chrome, remember password tooltips under several browser
These tooltips change the usable size of the browser and ruins the positions of the elements.

Is there a way to disable them through javascript?

thx for the help