Displaying text when mouse over an object 1

[dreammaker888]

I have a column containing the title of my merchandises. The title doesn't describe the merchandise fully, but I don't want to display all the detail description.

I want a small bulletin open up when the mouse is over the title. This way, the user can move the mouse over the title and read a brief description of the item.

How is that done?

Thanks.

DMK

 

[Vragabond]

There are many ways to do that. I suggest you start googling [google]tooltip[/google] or [google]custom tooltip[/google].

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[vacunita]

Most html objects have a handy little attribute called title. where you can put text, and it will be shown when you hover over it.

How exactly are you setting your title? is it a button? a table cell (<td>) an image?

if you had an image, this would do what you want:

<img src="image.jpg" title="This is the text I want to show when someone hovers over the image">

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[dreammaker888]

Vragabond,

I will try googling tooltip later.

I'd like to learn more of what vacunita suggested.

vacunita,

OK, I see how it works in image. Have a question, the title will show briefly when mouse over. Is there any way to make it stay until I move the mouse out. Buyers may need more time to read the contents.

Secondly, I really like the text to show when mouse over the product line, which is a text in <td>.

  <tr>
    <td width="33%">&nbsp;</td>
    <td width="33%">Kodak Camera</td> 
    <td width="34%">&nbsp;</td>
  </tr>

I want the text "This is a vintage 1969 camera" to show when the mouse is over the wording "Kodak Camera" on the webpage.

Thanks.

DMK

 

[trollacious]

Follow Vragabond's advice for what you want.

Lee

 

[dreammaker888]

OK,

I figured out how to put the text in the hyperlink . . .

<td width="33%"> <a href="[URL unfurl="true"]http://yahoo.com"[/URL] title ="This is what I want to say!" >My Merchandise</a> </td>

A problem . . . How do you format the description (text) like Line Break, or Paragraph Break? And, is there a way to set the dimension of the "box"?

Thanks.

DMK

 

[Vragabond]

In your example, this would work equally well. Like vacunita said, most html elements support title attribute:

<td width="33%" title ="This is what I want to say!">My Merchandise</td>

And like I said before, if you want to control styling of the tip and duration for how long it is shown, you would need to use one of the custom tooltips. You could look at sweet titles for a nice method to have the ability to style the look of your tooltip (the one you get through title attribute).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Targol]

Am I completely wrong saying that the behavior of showing "title" attribute content as tooltip is browser dependent ?
I heard that somewhere...

If I had to do it for myself, I'd use an hidding/showing DIV dynamically filled by a javascript function called by mouse events.


Water is not bad as long as it remains outside human body ;-)

 

[johnwm]

Anchor elements also support the :hover pseudo class, so you could use disjointed rollovers with straight CSS if you want to avoid JS

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[Vragabond]

Targol, you are wrong. That is "alt" attribute in images, that IE opts to display as tooltip where other browsers don't. Every browser should show "title" in a form of a tooltip.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

Am I completely wrong saying that the behavior of showing "title" attribute content as tooltip is browser dependent ?

No, you're not completely wrong. Here's what the W3C have to say:

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context.

However, I can't think of a browser that doesn't use a tooltip for titles (apart from Lynx, which wouldn't run your Javascript either). There's also the accessibility benefit to screen readers that the W3C allude to.

If you have special requirements for your tooltips, by all means use Javascript and/or CSS to fulfil them. In most cases, the ordinary [tt]title[/tt] ones will be just fine.



-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Targol]

Thanks Vragabond and Chris for the clarifications.


Water is not bad as long as it remains outside human body ;-)

 

[dreammaker888]

I am trying to learn and modify what vragabond's link to SanDeep's Note about ToolTip.

In the following code from the example, it works exactly the way I want:

<font size="2"><a href="#" onMouseOver="showIt(1)" onMouseOut="hideIt(1)"><b>This is my product 1</b></a></font><br /><br />

I would like to add to it, when user clicks on "This is my product 1", I want it to call up

http://www.yahoo.com.

<a href="[URL unfurl="true"]www.yahoo.com">This[/URL] is my product 1</a>

How do you merge the two together?

Thank you.

DMK

 

[vacunita]

Just add the address of your link to href part:

<font size="2"><a href="[red][URL unfurl="true"]http://www.yahoo.com[/URL][/red]" onMouseOver="showIt(1)" onMouseOut="hideIt(1)"><b>This is my product 1</b></a></font><br /><br />

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[dreammaker888]

Thank you for the quick response.

The following code seems to put the tool tip in an absolute position. I intend to have many lines of my product displayed on each page. I want the tool tip to be relative to the position of the product where the user clicks.

What do I change in the following code to make the display relative?

\<div id="layer1" style="position:absolute; top:2; left:80; height:40; width:410; visibility:hidden; background-color: #e0e0e0; border: 2pt double">
<table border="0" bgcolor="#e0e0e0" cellpadding="2" cellspacing="0">
 <tr><td align="center"><font face="verdana, arial, helvetica, sans-serif" size="2">
   You could have the tooltip like this with light grey as the 
<br /> background-color with your choice of font with border.
 </font></td></tr>
</table>
</div>

Thanks.

DMK

 

[dreammaker888]

vacunita;

I am not able to add the url link to the mouseover <a href.
The mouseover seems to obliviate the url link.

I also need to have the text pop up to a relative position. Right now, when it pops, it cover the titile entirely, which can be confusing for the user.

Thanks.

DMK

 

[vacunita]

Since I have no idea what you Javascript functions showIt and hideIt do its hard to say what is happening.

However there should be no real obstruction. Have you removed the "#" from the href part?

I would at this point suggest you take this to the JS forum here: forum216, since its clear it is now a Javascript issue and no longer has anything to do with HTML. I'm sure the guys over there will be able to help you.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[dreammaker888]

vacunita,

Thanks for the suggestion. I'll post it there. But for the heck of it, I will post the complete code here for your reference.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- CUSTOM TOOLTIP -->

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2004, Sandeep Gangadharan -->
<!-- For more free scripts go to [URL unfurl="true"]http://www.sivamdesign.com/scripts/[/URL] -->
<!--
(document.getElementById) ? dom = true : dom = false;

function hideIt(add) {
  if (dom) {document.getElementById('layer'+add).style.visibility='hidden';}
  if (document.layers) {document.layers["layer"+add].visibility='hide';}
 }
function showIt(add) {
 if (dom) {
  if (document.getElementById('layer'+add).style.visibility=='visible') { hideIt(add); }
  else {document.getElementById('layer'+add).style.visibility='visible'} }

 if (document.layers) {
  if (document.layers["layer"+add].visibility=='show') { hideIt(add); }
  else {document.layers["layer"+add].visibility='show'}  }
 }
// -->
</script>

</head>

<body>
<?php

$layctr=1;


Echo '<div id="layer' . $layctr . '" style="position:absolute; top:20; left:180; visibility:hidden; background-color: #FFFF99; border: 1pt single">';


echo '<table border="0" bgcolor="#FFFF99" cellpadding="2" cellspacing="0">';
echo ' <tr><td align="left"><font face="verdana, arial, helvetica, sans-serif" size="1">';
echo   'You could have the tooltip like this with light grey as the';
echo '<br /> background-color with your choice of font with border.';
echo   'You could have the tooltip like this with light grey as the';
echo '<br /> background-color with your choice of font with border.';
echo   'You could have the tooltip like this with light grey as the';
echo '<br /> background-color with your choice of font with border.';
echo ' </font></td></tr>';
echo '</table>';
echo '</div>';




echo '<font size="2"><a href="[URL unfurl="true"]http://www.yaho.com"[/URL] onMouseOver="showIt(' . $layctr . ')" onMouseOut="hideIt(' . $layctr . ')"><b>Links 1</b></a></font><br /><br /> ';
?>

<p></p>
<p></p>
<p></p>
<a href="[URL unfurl="true"]http://www.yahoo.com">Alex[/URL] here</a>
<p></p>
<p></p>
<p></p>

<?php
$layctr=2;

Echo '<div id="layer' . $layctr . '" style="position:absolute; top:2; left:80; left:80; height:40; visibility:hidden; background-color: #FFFF99; border: 1pt single">';


echo '<table border="0" bgcolor="#FFFF99" cellpadding="2" cellspacing="0">';
echo ' <tr><td align="left"><font face="verdana, arial, helvetica, sans-serif" size="1">';
echo   'This is the 2nd toolTip background-color with your choice of font with border.';
echo ' </font></td></tr>';
echo '</table>';
echo '</div>';



echo '<font size="2"><a href="#" onMouseOver="showIt(' . $layctr . ')" onMouseOut="hideIt(' . $layctr . ')"><b>Links 1</b></a></font><br /><br /> ';


?>
</body>
</html>

DMK

 

[vacunita]

Ahh I see the problem, the Tooltip is appearing on top of the links. now if you add units to your positions for the tooltip, you'll be able to move the tooltip so it doesn't obstruct the link.

<div id="layer' . $layctr . '" style="position:absolute; top:20[red]px[/red]; left:180[red]px[/red]; visibility:hidden; background-color: #FFFF99; border: 1pt single">

Of curse you could also dynamically capture the position of the mouse, and alter the position of the tooltip based on that, but again that's a question of the JS forum.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[dreammaker888]

It turned out, what vragsbond had suggested works beautifully for us. We adopted the code from
walterzorn.com and it works.

The alt and titlte browser property was kind of limited. The timeout was too fast and it only display a short number of characters.

The Sandeep's script had conflict with the table I am already using.

It was a good exercise and I thank all for helping out.

Thanks.

DMK