[lnkForumImage]
TotalShareware - Download Free Software
Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

How to put a popup box over text on a webpage?

bit-naughty

12/1/2014 7:26:00 AM

If I have a <div> and </div> section on my website, and I want a popup box to appear when I mouseover that section, what must I do? Is it possible to do it only in CSS, or do I need Javascript? The popup box must have rounded corners, and an arrow sticking out of it (like in a comic book), so I assume it must be a GIF or JPEG or whatever....? There'll be text within this box, is there any way to draw the box dynamically, so that if there's more text, it'll show a bigger box? (the text will come from the server side).


Thanks.
3 Answers

Evertjan.

12/1/2014 8:50:00 AM

0

bit-naughty@hotmail.com wrote on 01 dec 2014 in comp.lang.javascript:

> If I have a <div> and </div> section on my website, and I want a popup
> box to appear when I mouseover that section, what must I do? Is it
> possible to do it only in CSS, or do I need Javascript? The popup box
> must have rounded corners, and an arrow sticking out of it (like in a
> comic book), so I assume it must be a GIF or JPEG or whatever....?
> There'll be text within this box, is there any way to draw the box
> dynamically, so that if there's more text, it'll show a bigger box? (the
> text will come from the server side).

Seems you want to let us do the work,
this is not a paid helpdesk, but usenet.

Show us what you have done so far.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Gregor Kofler

12/1/2014 4:06:00 PM

0

Am 2014-12-01 um 08:26 schrieb bit-naughty@hotmail.com:
> If I have a <div> and </div> section on my website, and I want a popup box to appear when I mouseover that section, what must I do? Is it possible to do it only in CSS,

Yes.

> or do I need Javascript?

No. (Oh dear, he said "Jehova"...)

> The popup box must have rounded corners, and an arrow sticking out of it (like in a comic book), so I assume it must be a GIF or JPEG or whatever....?

Depends.

> There'll be text within this box, is there any way to draw the box dynamically, so that if there's more text, it'll show a bigger box?

Yes.

> (the text will come from the server side).
>
>
> Thanks.

You are welcome.

Gregor

Tim Streater

12/1/2014 6:00:00 PM

0

In article <ae8f78de-33cd-4dcb-8ba0-7b8d2e89f0d2@googlegroups.com>,
<bit-naughty@hotmail.com> wrote:

> If I have a <div> and </div> section on my website, and I want a popup box to
> appear when I mouseover that section, what must I do? Is it possible to do it
> only in CSS, or do I need Javascript? The popup box must have rounded
> corners, and an arrow sticking out of it (like in a comic book), so I assume
> it must be a GIF or JPEG or whatever....? There'll be text within this box,
> is there any way to draw the box dynamically, so that if there's more text,
> it'll show a bigger box? (the text will come from the server side).

Well you could have googled for "hover tooltip css" and similar (which
is what I did), and I ended up with:

<style type="text/css">

[data-tooltip]:hover
{
display: inline;
position: relative;
}

[data-tooltip]:hover:after
{
font-family: lucida grande;
font-size: 12px;
background: #222;
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
line-height: normal;
}

[data-tooltip]:hover:before
{
border: solid;
border-color: #222 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

</style>

Then in your <div> you do:

<div data-tooltip='PointyHead is a troll'>
(div content here)
</div>

This should provide lots of things for you to look up and understand.
Don't ask me because I've forgotten.

--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee