html dynamic pop up , how to create.

Forum Moderators: open

Message Too Old, No Replies

html dynamic pop up , how to create.

fixxi

11:53 pm on Nov 22, 2012 (gmt 0)

Hi All,

how do i create in html ( or is it javascript / ajax > ) a dynamic description that shows when an html element is hovered with the mouse ?

For example, I have a link called "Link to the mooon" , I want as soon as a visitor hover the mouse over the link, a small description box to appear with description like " Click here to go to the moon. Thank you"

I don't want the standard HTML alt descriptions.. these appear to slowly and are to small.

lucy24

12:21 am on Nov 23, 2012 (gmt 0)

In javascript you start with "onhover" to call a function. (There are other ways but that's the most straightforward.)

In raw html you can do it with image maps combined with a title attribute. Or did you mean "title" when you said "alt"? You'd almost have to, since alts don't simply appear.

It might be easier if you explained what you're really after. MMN without the M? "Click here" in case the user doesn't know how to operate a link?

If you're looking for exact cut-and-paste code you have come to the wrong forum :(

fixxi

12:39 am on Nov 23, 2012 (gmt 0)

apparently what i need is [onehackoranother.com...]
One question, How many browsers backwards support jquery ? also is jquery enabled by default in the browsers like javascript ? I am just wondering how many people won't be able to see the jquery pop out because their browser would not support it.

tedster

4:24 am on Nov 23, 2012 (gmt 0)

jquery IS a javascript library and it is kept quite up to day. As long as the pop-up plug-in you use continues to be updated if and when jquery updates require it, you should be fine.

lucy24

7:21 am on Nov 23, 2012 (gmt 0)

also is jquery enabled by default in the browsers like javascript

Well, there's your problem. What have you got for the users-- apparently including at least 95% of WebmasterWorld members-- who have scripting turned off?

The specific answer is "MSIE >= {some number}" where the exact number depends on the question.

birdbrain

11:02 am on Nov 23, 2012 (gmt 0)

Hi there fixxi,

have you considered CSS for this task?

Here is an example...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>simple css tooltip</title>

<style type="text/css">
#links {
   padding:0;
   margin:0;
   list-style-type:none;
  }
#links li {
   clear:both;
  }
.tooltip {
   position:relative;
   float:left;
   padding:5px 10px;
   font-size:1em;
   color:#000;
   text-decoration:underline;
  }
.tooltip:hover {
   color:#999;
 }
.tooltip span {
   position:absolute;
   z-index:1;
   display:none; 
   width:300px;
   padding:10px;
   top:0; 
   left:100%;
   border:3px double #c96;
   background-color:#fdb;
   font-size:80%;
   color:#630;
  }
.tooltip:hover span {
   display:block;
  }
</style>

</head>
<body>

<ul id="links">

<li>
<a class="tooltip" href="http://www.gotothemoon.com/">Link to the Moon
<span>
Click here to go to the moon.<br> 
Thank you
</span>
</a>
</li>

<li>
<a class="tooltip" href="http://www.lipsum.com/">Link to the Lorem ipsum
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</span>
</a>
</li>

</ul>

</body>
</html>

birdbrain

g1smd

12:14 pm on Nov 23, 2012 (gmt 0)

It is never "alt" text that "pops up" (unless we're talking about old versions of IE, that is).

It is the title attribute text that pops up. Have you tried it?

lucy24

9:18 pm on Nov 23, 2012 (gmt 0)

I think when the OP said "alt" he meant "title". That is, the content may have been the alt content but it's the title function.

Yes, I remember when w3 had to explain prominently that the reason Firefox seemed to behave oddly w/r/t title and alt is that it was (then) the only browser doing what it was supposed to do :)

fixxi

9:23 pm on Nov 23, 2012 (gmt 0)

Thank you for all suggestions , I am trying. Sorry for confusion, I guess I meant Title not alt.