Cool DHTML Tooltip II, external files

**damien_thiriet** · 07-01-2008, 02:28 PM

1) Script Title: Cool DHTML Tooltip II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...mltooltip2.htm

3) Describe problem: Is it possible to use external files to make this script working ? I pasted the css (step 1) in my .css, then i created a cooldhtml.js file
with the step 2 (without the script lines), and wrote a

Code:

<script type="text/javascript" scr="cooldhtml.js">
</noscript>

I made a

Code:

<span onmouseover="ddrivetip('on y arrive', 300)";
onmouseout="hideddrivetip()">voievodie</span>

and nothing. I am using FF 2.0. and strict xhtml, and I would like to avoid pasting so many lines in every file...

**allahverdi** · 07-01-2008, 02:34 PM

Can you post link to your site?

**ddadmin** · 07-02-2008, 02:55 AM

Well, you shouldn't have any problems moving the script to an external .js file, and referencing that on your page. The key is to reference that file in the BODY of your page, not the HEAD. I've included tooltip.js below. Download that, and also, add the following reference to the BODY of your page:

Code:

<body>

<script src="tooltip.js" type="text/javascript">

/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

**damien_thiriet** · 07-02-2008, 09:40 AM

Unfortunately, my site is not yet on the web...

**damien_thiriet** · 07-02-2008, 12:33 PM

Originally Posted by ddadmin

Well, you shouldn't have any problems moving the script to an external .js file, and referencing that on your page. The key is to reference that file in the BODY of your page, not the HEAD. I've included tooltip.js below. Download that, and also, add the following reference to the BODY of your page:

Code:

<body>

<script src="tooltip.js" type="text/javascript">

/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

I tried with this tooltip.js, but it doesn't work, even if I create a new page only following instructions of http://www.dynamicdrive.com/dynamici...mltooltip2.htm.

I wrote this :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <script></script>
  <meta content="text/html; charset=UTF-8"
 http-equiv="content-type" />
  <title>test</title>
  <meta content="damien thiriet" name="author" />
  <style type="text/css">
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
  </style>
</head>
<body style="direction: ltr;">
<script src="tooltip.js" type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<a href="voila.xhtml"
 onmouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)"
 onmouseout="hideddrivetip()">voila</a>
</body>
</html>

And it doesn't work

. But the net's demo is working

...

**ddadmin** · 07-02-2008, 06:56 PM

Works for me. Here's a skeleton page I tested Cool DHTML Tooltip that now is accessed via an external file:

Code:

<html>

<style type="text/css">

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

<body>

<script src="tooltip.js" type="text/javascript">

/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
 onMouseout="hideddrivetip()">Search Engine</a>

</body>

</html>

**damien_thiriet** · 07-04-2008, 12:36 PM

Unfortunately, this skeleton page doesn't work neither. Maybe is it a browser problem ? My problem is FF 2.0.1.15

**ddadmin** · 07-05-2008, 12:28 AM

Can you upload the skeleton page to your site, and post the URL? There must be something amiss with your version...

**damien_thiriet** · 07-08-2008, 11:35 AM

Here si the skeleton page, I haven't got web pages yet (I am waiting to have everything running well...)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
  <title>test</title>


  <meta content="damien thiriet" name="author" />

  <style type="text/css">
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}
  </style>
</head>

<body style="direction: ltr;">

<script src="tooltip.js" type="text/javascript">
/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<a href="voila.xhtml" onmouseover="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)" onmouseout="hideddrivetip()">voila</a>
</body>

</html>

**codeexploiter** · 07-08-2008, 11:46 AM

1. Any errors? when you load the page. If you have firebug installed you can check it out easily.

2. Make sure that you have enabled JavaScript in your browser.

3. Check with IE.

Thread: Cool DHTML Tooltip II, external files

Thread Tools

Search Thread

Cool DHTML Tooltip II, external files

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

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

Bookmarks

Bookmarks

Posting Permissions