Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: incrediBILL

Message Too Old, No Replies

html dynamic pop up , how to create.

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

New User

joined:Nov 15, 2012
posts: 11
votes: 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.
12:21 am on Nov 23, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12716
votes: 244


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 :(
12:39 am on Nov 23, 2012 (gmt 0)

New User

joined:Nov 15, 2012
posts: 11
votes: 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.
4:24 am on Nov 23, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
7:21 am on Nov 23, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12716
votes: 244


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.
11:02 am on Nov 23, 2012 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 2, 2003
posts: 948
votes: 4


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
12:14 pm on Nov 23, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 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?
9:18 pm on Nov 23, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12716
votes: 244


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 :)
9:23 pm on Nov 23, 2012 (gmt 0)

New User

joined:Nov 15, 2012
posts: 11
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members