tcarp said:
I use the title in an anchor href to display a little explanation
when the user hovers over a spot. I keep the title fairly short but
sometimes I would like things to wrap.
How do you do that? Is there something included in the title text or
should I specify a size in CSS for the title?
I encountered this problem also.
I tried various ways
e.g.
<br>
%0d%0a
but I seem to recall they didn't work
In the end I found a script named toolTip. It worked quite well, but I
modified it along the way and then stopped using it
This is the code I have saved (but don't currently use)
Add to external.js which is called in the <head> section
by <script type="text/javascript" src="scripts/external.js"></script>
====================================
// Capture events on mousemove - for use in toolTip()
if (document.captureEvents)
document.captureEvents(Event.mousemove)
// Write toolTip <div>
document.write('<div id="toolTip" style="z-index:1;width:100px;"></div>')
// Find mouse position - for use in toolTip()
Mouse = {} // defines the object 'Mouse'
Mouse.doc = document // adds the property 'doc'
Mouse.MouseMoveHandler = function (e) // adds the method 'MouseMoveHandler'
{
e = e || window.event
Mouse.x = (Mouse.doc.body.scrollLeft ||
Mouse.doc.documentElement.scrollLeft || 0) + e.clientX
Mouse.y = (Mouse.doc.body.scrollTop ||
Mouse.doc.documentElement.scrollTop || 0) + e.clientY
Mouse.currentTarget = e.target || e.srcElement
return true
}
if (Mouse.doc.attachEvent)
Mouse.doc.attachEvent("onmousemove",Mouse.MouseMoveHandler)
else if (Mouse.doc.addEventListener)
Mouse.doc.addEventListener("mousemove",Mouse.MouseMoveHandler,false)
function toolTip(text,me)
{
var theObj = me
var theElemt = document.getElementById('toolTip')
var tipTxt = text.split("|")
var len = tipTxt.length
var i
text = ''
for (i = 0; i < len; i++)
{ text += tipTxt
if (i+1 != len)
text += '<br />' }
theElemt.innerHTML = text
theElemt.style.display = "block"
theObj.onmousemove = updatePos
window.onscroll = updatePos
function updatePos()
{
var diffX = 12 // offset to clear pointer
var posX = Mouse.x + diffX
var posY = Mouse.y
// adjust position when too close to edge
posX -= (posX > screen.width * 0.75) ? (theElemt.clientWidth + diffX*2) :
0
posY -= (posY > screen.height * 0.75) ? (theElemt.clientHeight) : 0
theElemt.style.left = posX + "px"
theElemt.style.top = posY + "px"
theObj.onmouseout = function hideMe()
{ theElemt.style.display = "none" }
}
}
Add to style.css which is linked in the <head> section
by <link rel="stylesheet" type="text/css" href="style.css" />
====================================
#toolTip {
position: absolute;
display: none;
background-color: #ffc ;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 62.5% ;
padding: 1px;
border: black solid 1px;
}
**/
