JavaScript - Jquery Tooltip Only Runs Once In Forum...

$(function() {
// HIDING THE CLASS
$(".ad-nav").css("opacity","0.0");

// ON MOUSE OVER
$(".ad-nav").hover(function () {

// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO HIDE
$(this).stop().animate({
opacity: 0.0
}, "slow");
});
});

I am hiding a Div and showing it on mouse over. Fade Animation is smooth on Safari but a bit choppy FF. Can anyone come up with a solution to make it run smoothly on both? thanks.

Hi,
i have some users picture in a page that is coming from database with php mysql_fetch_array function.

what i want to do it, When mouse moves to any user's picture then then a small box should appear with that user's profile information with ajax and when mouse moves out it should disappear. and the box position should be with the mouse.
please give me some sample code

Anyone got any idea why this script won't work in IE (crap)?

Working example (FF):
http://martynleeball.x10hosting.com/tooltip.htm

Code:

function obj_position(obj,id) {
    //Setup variables to hold position values
    var left = top = 0;
   
    if (obj.offsetParent) {
        do {
            //Get position values and put in variables
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    //Get alt content for tooltip
    var alt_message = document.getElementById(id).getAttribute('alt');
    return left+","+top+","+alt_message;
}
function display_tooltip(obj) {
    //Get the elementID first
    var elmID = obj.id;
   
    //First of all get the position data for current element
    //Also get the message to be displayed- contained in the alt
    var pos_mess = obj_position(obj,elmID);
   
    //Now splitup the returned string to get the lef _position, right
    //position and the message to be displayed
    var part = pos_mess.split(",");
   
    //Create variables for the parts
    var left_pos = part[0];
    var top_pos = part[1] - 18;
    var message = part[2];
   
    var container = document.getElementById('tooltip_container');
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id','tooltip');
    newdiv.className = 'tooltip_style';
    newdiv.innerHTML = message;
   
    //Position div
    newdiv.style.position="absolute";
    newdiv.style.top=top_pos+"px";
    newdiv.style.left=left_pos+"px";
   
    //Append newly created div to container
    container.appendChild(newdiv);
   
}
function delete_tooltip() {
    var container = document.getElementById('tooltip_container');
    var old_div = document.getElementById('tooltip');
    container.removeChild(old_div);
}

Hi all, I am fairly new to javascript and finaly found a tooltip script that I want to use. (man there is a lot of them out there). I got it to work no problem and the editing is real easy.

The problem is that it is a tool tip for a text link. Would like to know if it is possible to use this with an image that is linked to a site.

The script and code is at http://www.javascriptkit.com/script/...ltooltip.shtml

The part that I think needs editing is

Code:

<a
 href="http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml"
 rel="htmltooltip">RSS Ajax Ticker</a>

Either that or the other part in the body section
Code:

<!--Inline HTML Tooltips (DIV with class="htmltooltip"-->
<!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source-->

Thanks in advance for any help in this.

Scott

Is it possible to prevent the tooltip that appears when mousing over an image from appearing? This is without removing the alt or title tags.

Hi,
I am using a tooltip that uses the following javascript

Code:

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX - 90; //Get X coodrinates
        var mousey = e.pageY  - 400; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 90 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 90;
        } if ( tipVisY < 90 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 90;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});
</script>

As you can see I have set its X position at -90 and y position at -400 so that It could be displaying well when the mouse is hover over a link and it do appear well in the testing page http://bloghutsbeta.blogspot.com/201...slidernav.html
If you put your mouse over ALEX in 'A' category BUT from the same test site but in different location from above here http://bloghutsbeta.blogspot.com/201...ting-main.html if you put your mouse over ALEX under 'SIMULATION' category then you will see that the tooltip is way down.

Not even that the tooltip moves away if the screen resolution changes. I changed value again and again but didn't reach any conclusion, can someone help me with this issue as what to do to fix it?

Note: If you require a complete markup please let me know in comment, I considered it not required that's why I didn't added it to my post ^^

hi!

i would just like to say first of all, that i only use forums for help unless i've exacerbated all other forms of help as i am such a javascript noob! so please bear with my while i try to explain my problem...

i've isolated the javascripts to this page > http://nang-nang.net/tumblr/blog/help.html
in this example the plant image is using lightbox 2 and the bird.gif is using prototip2 to create a tooltip (that displays my latest tweet)

(i should mention that these scripts will be used to pimp out my tumblr blog/portfolio http://bubblejam.tumblr.com eventually)

the problem: i need the tooltip to stay put! i've managed to put the bird in a <div style="position:fixed..." etc so that's fine. but the tooltip isn't fixed and moves as the page scrolls down!

can anyone take a look at what javascript i've got so far and fingers crossed there's a simple solution! thanks!!

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

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

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

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

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.

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?

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();
});

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.