Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26263 > unrolled thread

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

Back to article view | Back to comp.lang.javascript

Contents

  How to put a popup box over text on a webpage? bit-naughty@hotmail.com - 2014-11-30 23:26 -0800
    Re: How to put a popup box over text on a webpage? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-12-01 09:49 +0100
    Re: How to put a popup box over text on a webpage? Gregor Kofler <usenet@gregorkofler.com> - 2014-12-01 17:06 +0100
    Re: How to put a popup box over text on a webpage? Tim Streater <timstreater@greenbee.net> - 2014-12-01 17:59 +0000

#26263 — How to put a popup box over text on a webpage?

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.

[toc] | [next] | [standalone]

#26264

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)

[toc] | [prev] | [next] | [standalone]

#26265

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

[toc] | [prev] | [next] | [standalone]

#26268

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web