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

Groups > comp.lang.javascript > #26268

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

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web