Solved

Popup title text on <TD> element

Posted on 2006-06-14
6
446 Views
Last Modified: 2013-11-19
Does anyone know if it is possible to create like a mouseover popup TITLE on a <TD> element?  I do this with buttons, would like to do it with a <TD> element.

Button Sample:
<input type="button" name="Print"  value="Click Here To Print For Your Records"  onClick="Javascript:window.print();" class="ButtonBorder" title="Click here to Print Order Submit screen.">

When I brush mouse over the button, the Title Text appears.  Want to do this will a <TD>.  Please advise, sulzener
0
Comment
Question by:sulzener
  • 3
  • 2
6 Comments
 
LVL 10

Expert Comment

by:jagadeesh_motamarri
ID: 16906537
Hi sulzener ,

Try this code: and play around

CODE:
<html>
<head>
<title>STATIC POP-UP NOTE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

createNotes=function(){

            showNote=function(){
                        // gets note1 element
                        var note1=document.getElementById('note1');
                        // shows note1 element
                        note1.style.visibility='visible';
            }

            hideNote=function(){
                        // gets note1 element
                        var note1= document.getElementById('note1');
                        // hides note1 element
                        note1.style.visibility='hidden';
            }
            var a1=document.getElementById('a1');
            // shows note1 element when mouse is over
            a1.onmouseover=showNote;
            // hides note1 element when mouse is out
            a1.onmouseout=hideNote;
}
// execute code once page is loaded
window.onload=createNotes;
</script>

<style type="text/css">

p {
            font: normal 12px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}

#note1 {
            position: absolute;
            top: 30px;
            left: 160px;
            background: #ffc;
            padding: 10px;
            border: 1px solid #000;
            z-index: 1;
            visibility: hidden;
            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}
</style>
</head>
<body>




<table width="100" border="1">
  <tr>
    <td id="a1">Put your mouse here</td>
    <td>Experts-Exchange</td>
  </tr>
  <tr>
    <td>Experts-Exchange</td>
    <td>Experts-Exchange</td>
  </tr>
  <tr>
    <td>Experts-Exchange</td>
    <td>Experts-Exchange</td>
  </tr>
</table>




<div id="note1">PHP: PHP Hypertext Preprocessor</div>
</body>
</html>


______Jags.
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 250 total points
ID: 16906811
<td title="Click here to Print Order Submit screen."> should work.
TITLE is an attribute that you can use on any html tag.
0
 

Author Comment

by:sulzener
ID: 16906849
Sorry if I wasn't more specific, but I'm looping thru a file and display columns/rows of data.  My goals is to display some additional data over the name when it is highlighted.  I guess I could do a transparent button and noone whould know the difference.   But I was hoping for something easier.  Any other thoughts?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16907158
> over the name when it is highlighted.
you mean when it's hovered?  and what name are you refering to?  is that just some text?  if so, you can use any inline tag:

<td>
lorem ipsum <span title="Hello">name</span> dolor sed...
</td>
0
 

Author Comment

by:sulzener
ID: 16909057
GrandSchtroumpf, I tried your first recomendation twice before I posted this message.  I thought that should work. Apparently I wasn't testing the right source, because when I tried it again (after your post), it worked.  Sorry about the bogus question.  Thanks to all.  I did learn som things.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16909517
<:°)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Understanding mobile browsers 9 84
VBScript on Html 15 47
Filktering Alphabetically 8 29
Extracting content from meta tag PHP MYHTML DOM 3 20
This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question