Hi all,
I'm new to javascript, so please be gentle. :-) I have a "tooltip"
script that I found somewhere, and I want to add html tags, links, etc.
to the tooltip window. I already use a couple of tooltip.js type files
in other sites, but I'm trying to learn. I'm assuming that it involves
innerHTML? Here's the html with the script, and thanks for any
info/advice.
PlainDave
<html>
<head>
<title>
Bible Fellowship Events Calendar - printable version
</title>
<style type="text/css">
<!--
BODY {
color: #000;
background-color: #fff;
font-family: Tahoma, Helvetica, Sans Serif;
text-align: left;
margin-left: 2px;
margin-right: 2px;
}
li {
background-color: #fff;
color: #000;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:13px;
font-weight:normal;
text-align:left;
margin-bottom:9px;
margin-left:-14px;
line-height:109%;
list-style-position: inside;
list-style-type: disc;
}
..nonmonth {
background-color: #fff;
height=100px;
width:14%;
text-align:right;
vertical-align:top;
color: #ddd;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:17px;
font-weight:bold;
}
..datenumber {
background-color: #fff;
color: #000;
height=100px;
width:14%;
text-align:right;
vertical-align:top;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:17px;
font-weight:bold;
}
..events {
background-color: #fff;
color: #000;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:13px;
font-weight:normal;
text-align:left;
}
div.events {
float:left;
margin-left:-23px;
width:155;
height:2;
}
table.cal {
width:100%;
cellpadding:3;
cellspacing:0;
border:1px solid black;
border-collapse: collapse;
background-color: #fff;
}
td {
border:1px solid black;
background-color: #fff;
}
td.weekday {
background-color: #fff;
color: #000;
font:17px Tahoma, Helvetica, Sans Serif;
width:14%;
text-align:center;
vertical-align:middle;
font-weight:normal;
padding: 2px 0 2px
}
/*
tr {
height=100px;
}
*/
li.youth {
background-color: #fff;
color: #000;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:13px;
font-weight:normal;
text-align:left;
}
..menu {
font: 9px Tahoma, Helvetica, Sans Serif;
color: #000;
background-color: #fff;
padding:2px;
vertical-align: middle;
text-align:left;
text-decoration:none ;
height:1px;
width:10px;
cursor:help;
border: 1px solid #c30;
}
..tip {
color: #000;
background-color: #fff;
height=1px;
text-decoration:unde rline;
}
..toolTip {
color:#000;
background-color: #dff1ff;
border-top: 1px solid #ddd;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 1px solid #ddd;
text-align: left;
font-weight:normal;
position: absolute;
padding: 6px;
font-family:Georgia, Verdana,Arial,H elvetica,sans serif;
font-size:80%;
font-variant:normal;
width: 250px;
text-decoration : none;
}
..more {
cursor:hand;
color:blue;
}
div.questions {
color:#03f;
background-color:white;
float:left;
margin: -21, 5px;
font: normal normal normal 10px Tahoma;
text-align: right;
font-face:Tahoma, Arial, Helvetica;
letter-spacing:0.2em;
text-decoration:none ;
}
a, a:link {
text-decoration:none ;
}
a:hover {
text-decoration:unde rline;
}
-->
</style>
<!-- START OF TOOLTIP JAVASCRIPT -->
<script type="text/javascript">
// The tool tip is created and referenced as a global object.
var tipDiv;
function genToolTip()
{
if (document.creat eElement) {
tipDiv = document.create Element('div');
document.body.a ppendChild(tipD iv);
tipDiv.appendCh ild(document.cr eateTextNode('i nitial text'));
tipDiv.classNam e = 'toolTip';
tipDiv.style.di splay = 'none';
}
}
window.onload = genToolTip;
function showTip(e, txt)
{
if ( tipDiv ) {
var e = e || window.event;
var xy = cursorPos(e);
tipDiv.firstChi ld.data = txt;
tipDiv.style.le ft = (xy[0] + 15) + 'px';
tipDiv.style.to p = (xy[1] + 3) + 'px';
tipDiv.style.di splay = '';
}
}
function hideTip()
{
if ( tipDiv ) {
tipDiv.style.di splay = 'none';
}
}
// Based on quirskmode 'get cursor position' script
function cursorPos(e){
if (e.pageX || e.pageY) {
return [ e.pageX, e.pageY ];
} else if (e.clientX || e.clientY) {
return [
e.clientX + document.body.s crollLeft,
e.clientY + document.body.s crollTop
];
}
}
</script>
<!-- END OF TOOLTIP JAVASCRIPT -->
</head>
<body>
<div class="events">
<ul>
<li>Thursday night Men's Bible Study has been cancelled until sometime
in January. We'll keep you posted.
<a onmouseover="sh owTip(event,'Th ursday night Men\'s Bible Study has
been cancelled temporarily and will resume sometime in January. We\'ll
keep you posted. If you have any questions, feel free to email Dave
(Dave\'s email address can be found at the bottom of this page).')"
onmouseout="set Timeout('hideTi p()', 100);"><span
class="more"><u >More...</u></span></a>
</li>
</ul>
</div>
</body>
</html>
I'm new to javascript, so please be gentle. :-) I have a "tooltip"
script that I found somewhere, and I want to add html tags, links, etc.
to the tooltip window. I already use a couple of tooltip.js type files
in other sites, but I'm trying to learn. I'm assuming that it involves
innerHTML? Here's the html with the script, and thanks for any
info/advice.
PlainDave
<html>
<head>
<title>
Bible Fellowship Events Calendar - printable version
</title>
<style type="text/css">
<!--
BODY {
color: #000;
background-color: #fff;
font-family: Tahoma, Helvetica, Sans Serif;
text-align: left;
margin-left: 2px;
margin-right: 2px;
}
li {
background-color: #fff;
color: #000;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:13px;
font-weight:normal;
text-align:left;
margin-bottom:9px;
margin-left:-14px;
line-height:109%;
list-style-position: inside;
list-style-type: disc;
}
..nonmonth {
background-color: #fff;
height=100px;
width:14%;
text-align:right;
vertical-align:top;
color: #ddd;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:17px;
font-weight:bold;
}
..datenumber {
background-color: #fff;
color: #000;
height=100px;
width:14%;
text-align:right;
vertical-align:top;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:17px;
font-weight:bold;
}
..events {
background-color: #fff;
color: #000;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:13px;
font-weight:normal;
text-align:left;
}
div.events {
float:left;
margin-left:-23px;
width:155;
height:2;
}
table.cal {
width:100%;
cellpadding:3;
cellspacing:0;
border:1px solid black;
border-collapse: collapse;
background-color: #fff;
}
td {
border:1px solid black;
background-color: #fff;
}
td.weekday {
background-color: #fff;
color: #000;
font:17px Tahoma, Helvetica, Sans Serif;
width:14%;
text-align:center;
vertical-align:middle;
font-weight:normal;
padding: 2px 0 2px
}
/*
tr {
height=100px;
}
*/
li.youth {
background-color: #fff;
color: #000;
font-family: Tahoma, Helvetica, Sans Serif;
font-size:13px;
font-weight:normal;
text-align:left;
}
..menu {
font: 9px Tahoma, Helvetica, Sans Serif;
color: #000;
background-color: #fff;
padding:2px;
vertical-align: middle;
text-align:left;
text-decoration:none ;
height:1px;
width:10px;
cursor:help;
border: 1px solid #c30;
}
..tip {
color: #000;
background-color: #fff;
height=1px;
text-decoration:unde rline;
}
..toolTip {
color:#000;
background-color: #dff1ff;
border-top: 1px solid #ddd;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 1px solid #ddd;
text-align: left;
font-weight:normal;
position: absolute;
padding: 6px;
font-family:Georgia, Verdana,Arial,H elvetica,sans serif;
font-size:80%;
font-variant:normal;
width: 250px;
text-decoration : none;
}
..more {
cursor:hand;
color:blue;
}
div.questions {
color:#03f;
background-color:white;
float:left;
margin: -21, 5px;
font: normal normal normal 10px Tahoma;
text-align: right;
font-face:Tahoma, Arial, Helvetica;
letter-spacing:0.2em;
text-decoration:none ;
}
a, a:link {
text-decoration:none ;
}
a:hover {
text-decoration:unde rline;
}
-->
</style>
<!-- START OF TOOLTIP JAVASCRIPT -->
<script type="text/javascript">
// The tool tip is created and referenced as a global object.
var tipDiv;
function genToolTip()
{
if (document.creat eElement) {
tipDiv = document.create Element('div');
document.body.a ppendChild(tipD iv);
tipDiv.appendCh ild(document.cr eateTextNode('i nitial text'));
tipDiv.classNam e = 'toolTip';
tipDiv.style.di splay = 'none';
}
}
window.onload = genToolTip;
function showTip(e, txt)
{
if ( tipDiv ) {
var e = e || window.event;
var xy = cursorPos(e);
tipDiv.firstChi ld.data = txt;
tipDiv.style.le ft = (xy[0] + 15) + 'px';
tipDiv.style.to p = (xy[1] + 3) + 'px';
tipDiv.style.di splay = '';
}
}
function hideTip()
{
if ( tipDiv ) {
tipDiv.style.di splay = 'none';
}
}
// Based on quirskmode 'get cursor position' script
function cursorPos(e){
if (e.pageX || e.pageY) {
return [ e.pageX, e.pageY ];
} else if (e.clientX || e.clientY) {
return [
e.clientX + document.body.s crollLeft,
e.clientY + document.body.s crollTop
];
}
}
</script>
<!-- END OF TOOLTIP JAVASCRIPT -->
</head>
<body>
<div class="events">
<ul>
<li>Thursday night Men's Bible Study has been cancelled until sometime
in January. We'll keep you posted.
<a onmouseover="sh owTip(event,'Th ursday night Men\'s Bible Study has
been cancelled temporarily and will resume sometime in January. We\'ll
keep you posted. If you have any questions, feel free to email Dave
(Dave\'s email address can be found at the bottom of this page).')"
onmouseout="set Timeout('hideTi p()', 100);"><span
class="more"><u >More...</u></span></a>
</li>
</ul>
</div>
</body>
</html>
Comment