• Registered: January 28, 2009
  • Posts: 16

Topic: tooltips

I found a script to accomplish this but the javascript needs to be attached to image maps which are already going to a link, using the <href tag. My script uses an <a href tag. <a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>  When I put the this after my first link in the source code, I get a tooltip appearing already but instead of the text I want to appear, I get the URL from my first link appearing as the tooltip.
I'm not sure this script is right in the first place. I'd be happy to hire someone to do this for me! Anybody out there interested?

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,810
  • Reputation: 14

Re: tooltips

Hiring somebody probably isn't necessary... it's just a matter of adjusting the Javascript source code. What is the code you are using?

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Registered: January 28, 2009
  • Posts: 16

Re: tooltips

I didn't get an email you answered--sorry. This is where I downloaded the code; you can see it for yourself

Vote up Vote down

  • LSW
  • Moderator
  • Offline
  • From: Juneau AK
  • Registered: December 20, 2008
  • Posts: 7,471
  • Reputation: -1

Re: tooltips

Why use Javascript?

If they are images just use the alt attribute and if needed the title attribute.

The imagemap itself can be CSS to rather than over complicate it with JS and make it useless for people using the keyboard to navigate or do not support JS.

Night of the Imagemap

Vote up Vote down

  • Registered: January 28, 2009
  • Posts: 16

Re: tooltips

I forgot to send the url to the script I'm using. http://www.walterzorn.com/tooltip/tooltip_e.htm
I already have a list of names on my page which is made in Photoshop. So I've used image maps to link the names to their videos. Now my client wants flyouts with a small jpg of each person as well as a bit of text. What's happening is that my flyout is showing the link to the video instead of the descriptive text. The link to the video is <href, and then I've put the <a ref after that, according to what the author of the script instructs.

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: tooltips

try this

My signature goes here --> X

Vote up Vote down

  • Registered: January 28, 2009
  • Posts: 16

Re: tooltips

Thank you--I have high hopes for this method. I'm sure I don't have it quite right yet tho'. Can you please check it out for me? Ive tried putting the CSS code both before and after my image map link which goes to a video. Since you can't see the tooltip (doesn't work), to see the code, go to the very end of the source code and you'll see a list of video links, towards the end you'll see where I've put the CSS I picked up that you sent me, then a link to Alexander McCall Smith's video interview. Here's the page: http://writetv.okstate.edu/hovertest2.html

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: tooltips

Where is the CSS for the tooltip?

My signature goes here --> X

Vote up Vote down

  • Registered: January 28, 2009
  • Posts: 16

Re: tooltips

that was actually a question I wanted to ask you. I have to make something up for it, a class called "info"? Do you think that's my only problem?

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: tooltips

go to the link in post 6 and do a view source to snag the CSS for the tooltip.

My signature goes here --> X

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: tooltips

/*
        =================================
        start of Tooltip css code here
        ================================= */

        a.info{
        position:relative;           /*this is the key*/
        z-index:24;
        background-color:#e0e0e0;    /* background colour of display text */
        color:#000000;               /* colour of display text */
        border:1px dotted #999;    /* border colour */
        text-decoration:none;
        font-style:italic;
        }

        a.info:hover {
        z-index:25;
        background-color:#ffff66;

        }

        a.info span{
        display: none;  /* hide the span text using this css */
        }

        a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top: 1.5em;
        left: 3em;
        width:15em;
        border:1px solid #ff0000; /* border colour */
        background-color:#ffff99; /* background colour here */
        color:#000000;         /* text colour */
        text-align: center;
        font-size: .8em;
        font-style:italic;
        z-index:30;
        }

        .images {
        vertical-align:bottom;
        }
My signature goes here --> X

Vote up Vote down

  • Registered: January 28, 2009
  • Posts: 16

Re: tooltips

You are very kind. I already put in a class called .info and applied it to the text I want in the tooltip. But now I've somehow lost all my image maps links and the tooltip info instead of appearing as a tooltip, appears at the bottom of the page.
I'll keep trying later, I have to go out. Thank you
you can see my CSS and the way I put it in
http://writetv.okstate.edu/hovertest2.html

Vote up Vote down

  • Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,183
  • Reputation: 3

Re: tooltips

scrawny wrote:

You are very kind. I already put in a class called .info and applied it to the text I want in the tooltip. But now I've somehow lost all my image maps links and the tooltip info instead of appearing as a tooltip, appears at the bottom of the page.
I'll keep trying later, I have to go out. Thank you
you can see my CSS and the way I put it in
http://writetv.okstate.edu/hovertest2.html

I believe you mistakenly deleted <map name="bestofWOLc59f5332"> before your <area>. That fixed some of it for me. However, I've never worked with area maps so who knows...

And I don't even know if you can add CSS tooltips to the image map? You could easily add the title tag like so though - that works!

title="tooltip"

www.visibilityinherit.com/tools.php

Vote up Vote down

  • Registered: January 28, 2009
  • Posts: 16

Re: tooltips

I made a page with a link to my video that's just plain text, not an image map. Then I picked up the CSS code from Post 6 and tried it before, then after the code to my video link...you'll see what happens if you go here http://writetv.okstate.edu/test.html and I obviously am completely clueless.

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: tooltips

you missed a bunch of the css code. The code for the span, etc needs to also be in the CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="generator" content="Adobe GoLive">
        <title>Untitled Page</title>
        <style type="text/css" media="screen"><!--
/*
        =================================
        start of Tooltip css code here
        ================================= */

        a.info{
        position:relative;           /*this is the key*/
        z-index:24;
        background-color:#e0e0e0;    /* background colour of display text */
        color:#000000;               /* colour of display text */
        border:1px dotted #999;    /* border colour */
        text-decoration:none;
        font-style:italic;
        }

        a.info:hover {
        z-index:25;
        background-color:#ffff66;

        }

        a.info span{
        display: none;  /* hide the span text using this css */
        }

        a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top: 1.5em;
        left: 3em;
        width:15em;
        border:1px solid #ff0000; /* border colour */
        background-color:#ffff99; /* background colour here */
        color:#000000;         /* text colour */
        text-align: center;
        font-size: .8em;
        font-style:italic;
        z-index:30;
        }

        .images {
        vertical-align:bottom;
        }
--></style>
    </head>

    <body bgcolor="#ffffff">
        <p><a class="info" href="#">display text<span>Tool Tip Text Here</span></a></p>
    </body>

</html>

code is based on your Demo page, but I removed the second link.
check it out.

My signature goes here --> X

Vote up Vote down