Solved

Popup title text on <TD> element

Posted on 2006-06-14
6
443 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

770 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