JavaScript - Tooltip Changes Places

I'm fairly new to programming, I just started JavaScript and I did read the rules. I am a student and will not post my code asking someone to do my homework. I just need a little guidance.

For my assignment, when a webpage is loaded, it prompts the user to enter hours worked, their pay rate and tax rate, then use a function to calculate the net weekly pay, then display all numbers on the screen. Now I have this working and it appears on the screen, but I need to limit the hours worked to a whole number and the pay and tax rates need to only show 2 digits on either side of the decimal.

From searching I found a lot of information about ParceInt, ParceFloat and toFixed, but cannot get these to work. Either these are not correct or I'm not using them correctly.

Below are samples of 2 of the prompts. Can someone help me with this problem? Also is it better the handle this problem at the prompt or in the function or where it writes to the screen?

Code:

var hours_worked = prompt ("How many hours did you work?", "");
parseInt(hours_worked);
var pay_rate = prompt ("What is your pay rate?", "");
parseFloat(pay_rate);

Hopefully the subject was good enough and the content descriptive to understand when I'm trying to accomplish.

Brian

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, I'm really new to Javascript. Recently in my IT class, we made a HTML page which would open a popup box, where the user could enter a key word. When the user pressed enter, the page would navigate to a specific page. The code we used was:
Code:

<script language = "JavaScript">
where = window.prompt ("Please tell me where you would like to go.");
switch (where){
case "Digg" :
	window.location = "http://www.digg.com" ;
	break;
default:
	window.location = "http://www.google.com" ;
}
</script>

What I am hopeing to do, is implement this code on my workplaces server, and have the keywords link to other html documents within the server. However when I tested this, for some reason the links are not working. Can this actually be done? Am I missing something silly? Are there any other ways of doing this?

Thanks in advance

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 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

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.

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?

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

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