나는 P 태그
| Cat | Mammal | Sleeping on the TV |
| Tuna | Chicken ;) | In the cupboard |
| Spider | Insect | Behind you |
| Chicken | Poultry, haha | Crossing the road |
| Lama | Mammal | Really slow fading tooltip |
Move over this
Notice how the select box disappears
소스
<html>
<head>
<title>다양한효과의 풍선도움말</title>
<style>
.thdrcell {
background:#F3F0E7;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:5px;
border-bottom:1px solid #C8BA92;
}
.tdatacell {
font-family:arial;
font-size:12px;
padding:5px;
background:#FFFFFF
}
.dvhdr1 {
background:#F3F0E7;
font-family:arial;
font-size:12px;
font-weight:bold;
border:1px solid #C8BA92;
padding:5px;
width:150px;
}
.dvbdy1 {
background:#FFFFFF;
font-family:arial;
font-size:12px;
border-left:1px solid #C8BA92;
border-right:1px solid #C8BA92;
border-bottom:1px solid #C8BA92;
padding:5px;
width:150px;
}
.dogvdvhdr {
width:300;
background:#C4D5E3;
border:1px solid #C4D5E3;
font-weight:bold;
padding:10px;
}
.dogvdvbdy {
width:300;
background:#FFFFFF;
border-left:1px solid #C4D5E3;
border-right:1px solid #C4D5E3;
border-bottom:1px solid #C4D5E3;
padding:10px;
}
.pgdiv {
width:320;
height:250;
background:#E9EFF4;
border:1px solid #C4D5E3;
padding:10px;
margin-bottom:20;
font-family:arial;
font-size:12px;
}
</style>
<script src="js/boxover.js"></script>
</head>
<body>
<p style="margin-top:0px" title="header=[Tooltip with fade & delay] body=[some text for the body] delay=[400] fade=[on]"><b>나는 P 태그</b></p>
<table border=1>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Cat] body=[A nocturnal creature found prowling about alley ways throughout the world.]">
<td class=tdatacell>Cat</td><td class=tdatacell>Mammal</td><td class=tdatacell>Sleeping on the TV</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Tuna] body=[A most tasty snack - especially popular in the gym community, containing 27g per 100g protein. Also commonly mistaken for chicken by those cerebrally challenged individuals out there.]">
<td class=tdatacell>Tuna</td><td class=tdatacell>Chicken ;)</td><td class=tdatacell>In the cupboard</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Spider] body=[Spiderman, Spiderman, does whatever a spider can!]">
<td class=tdatacell>Spider</td><td class=tdatacell>Insect</td><td class=tdatacell>Behind you</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Chicken] body=[Most commonly known to be crossing the road - goddam I crack myself up; apparently I shouldn't quit my day job though]">
<td class=tdatacell>Chicken</td><td class=tdatacell>Poultry, haha</td><td class=tdatacell>Crossing the road</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Lama] body=[Last seen being fed in Napolean Dynamite] fade=[on] fadespeed=[0.01]">
<td class=tdatacell>Lama</td><td class=tdatacell>Mammal</td><td class=tdatacell>Really slow fading tooltip</td>
</tr>
</table></p>
<img src="img/sample.jpg" title="header=[Good! Fantastic Nature] body=[You wouldn't find this funny unless you've seen Southpark series 8<p>Note that this box halts on a single click</p>]"><p>
Move over <span title="cssbody=[dogvdvbdy] cssheader=[dogvdvhdr] header=[Ha ha! Another dog in a hat] body=[Well I lied. This was actually a legit example - just showing you can have pictures in the captions as well, or any legitamate HTML for that matter<center><p><img src='doghat2.jpg'></p>] fixedabsx=[150] fixedabsy=[270]" style="font-family:arial;font-size:12px;font-weight:bold;color:#ABABAB;cursor:pointer">this</span>
<div style="font-weight:bold;width:250px;border:1px solid #000000;padding:5px" title="header=[A tooltip] body=[Note the select box disappearing] hideselects=[on]">Move over this text to bring up a tooltip. <br>Notice how the select box disappears</div><br>
</body>
</html>
boxover.js옵션설명(영문)
The following table lists settings for BoxOver.
| Parameter | Possible values | Default | Description |
| header | Any character | blank | Specifies the header text of the tooltip |
| body | Any character | blank | Specifies the body text of the tooltip |
| fixedrelx | Any integer | N/A | Forces the X-coordinate of the tooltip to stay fixed (offset is relative to the annotated HTML element) |
| fixedrely | Any integer | N/A | Forces the Y-coordinate of the tooltip to stay fixed (offset is relative to the annotated HTML element) |
| fixedabsx | Any integer | N/A | Forces the X-coordinate of the tooltip to stay fixed (X is an offset relative to the body of the HTML document) |
| fixedabsy | Any integer | N/A | Forces the Y-coordinate of the tooltip to stay fixed (Y is an offset relative to the body of the HTML document) |
| windowlock | on / off | on | Make tooltip stick to side of the window if user moves close to the side of the screen. |
| cssbody | Any defined style class | Built in styles | Specifies CSS class for styles to be used on tooltip body. |
| cssheader | Any defined style class | Built in styles | Specifies CSS class for styles to be used on tooltip header. |
| offsetx | Any integer | 10 | Horizontal offset, in pixels, of the tooltip relative to the mouse cursor. |
| offsety | Any integer | 10 | Vertical offset, in pixels, of the tooltip relative to the mouse cursor. |
| doubleclickstop | on / off | on | Specifies whether to halt the tooltip when the user double clicks on the HTML element with the tooltip. |
| singleclickstop | on / off | off | Specifies whether to halt the tooltip when the user single clicks on the HTML element with the tooltip. - if both singleclickstop and doubleclickstop are set to "on", singleslclickstop takes preference. |
| requireclick | on / off | off | Specifies whether the user must first click the element before a tooltip appears. Intended for use on links so that information appears while the link is followed. |
| hideselects | on / off | off | Specifies whether to hide all SELECT boxes on page when popup is activated. |
| fade | on / off | off | Specifies whether to fade tooltip into visibility. |
| fadespeed | Number between 0 and 1 | 0.04 | Specifies how fast to fade in tooltip. |
| delay | Any integer | 0 | Specifies delay in milliseconds before tooltip displays. |
출처: - www.blueb.co.kr -
