/    Sign up×
Community /Pin to ProfileBookmark

DOM insertion of spans

I’m trying to make a firefox extension that will pop up a tooltip upon hovering over any text in a page. My first idea was to split the text on the page and wrap each word in a span tag and add an onMouseOver event handler to the spans. This doesn’t seem to be working: the onMouseOver property gets set, but the event handler isn’t fired. I inserted a normal span tag into the page and that fires the lookup function. Any help?

function lookup()
{
alert(“test”);
}

function addHover(node)
{
if(node.nodeType == 3 &&
node.nodeValue.length > 0)
{
var txt = node.nodeValue;
var words = txt.split(” “);
var j = 0;
var parent = node.parentNode;
var curChild = node;
for(j = words.length – 1; j >= 0; j–)
{
if(words[j].length > 0)
{
var span = document.createElement(“span”);
span.onMouseOver = “lookup()”
var newtxt = document.createTextNode(words[j]);
var newspc = document.createTextNode(” “);
span.appendChild(newtxt);
parent.insertBefore(newspc, curChild);
parent.insertBefore(span, newspc);
curChild = span;
}
}
parent.removeChild(node);
return;
}

var i = 0;
for(i = 0; i < node.childNodes.length; i++)
{
addHover(node.childNodes[i]);
}
}

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@MjhLkwdOct 10.2005 — [CODE]<HTML>
<Head>
<Script type="text/javascript">

var midScreen = screen.width/2;
var tipContainer1 = "";

function stayHome(m){

if (document.all)
{
var currX = event.clientX;
var currY = event.clientY;
}
else {
var currX = m.pageX;
var currY = m.pageY;
}
if (!document.body.scrollTop)
{
var iL = document.documentElement.scrollLeft;
var iV = document.documentElement.scrollTop;
}
else {
var iL = document.body.scrollLeft;
var iV = document.body.scrollTop;
}
if (currX > midScreen-30)
{
var msgWidth = tipContainer1.clientWidth;
if (document.all){tipContainer1.style.left = (currX-msgWidth-10+iL)+'px'}
else {tipContainer1.style.left = (currX-msgWidth-10)+'px'}
}
else {
if (document.all){tipContainer1.style.left = (currX+10+iL)+'px'}
else {tipContainer1.style.left = (currX+10)+'px'}
}
if (document.all){tipContainer1.style.top = (currY+iV)+'px'}
else {tipContainer1.style.top = currY+'px'}
}

document.onmousemove = stayHome;

function insertFloatMsg(){

styleStr = "<Style>.msgFloat {Position:Absolute;Top:0;Left:0;Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:3px;Padding-Bottom:3px;Font-family:Tahoma;Font-Size:13pt;Line-Height:102%;}</Style>";
divStr = "<DIV class='msgFloat' id='isFloat1'>&nbsp</DIV>"
document.write(styleStr);
document.write(divStr);
tipContainer1 = document.getElementById('isFloat1');
}

function hideMessage(){

tipContainer1.style.display = 'none';
while (tipContainer1.lastChild)
{tipContainer1.removeChild(tipContainer1.lastChild)}
}

function showMessage(toolTip,currItem){

tipTxt = toolTip.split("|");
tipContainer1.style.display = 'inline';
for (i=0; i<tipTxt.length; i++)
{
tipContainer1.appendChild(document.createTextNode(tipTxt[i]))
tipContainer1.appendChild(document.createElement('br'))
}
currItem.onmouseout=hideMessage;
}

function initToolTip(){

insertFloatMsg();
hideMessage();
if (!document.all){document.captureEvents(Event.mousemove)}
}

</Script>
</Head>
<BODY>
<center>
<span onmouseover="showMessage('This is a message for the first link',this)" style='cursor:default'>This is some text</span>
<br><br>
<span onmouseover="showMessage('This is a message|for the second link|consisting of 3 lines',this)" style='cursor:default'>This is some more text</span>
</center>
<!-- Keep the following line immediately preceding the closing Body tag -->
<Script type="text/javascript"> initToolTip() </Script>
</Body>
</HTML>[/CODE]
Copy linkTweet thisAlerts:
@hielscherauthorOct 10.2005 — I'm not sure this really helps my problem. What I want is to parse any random page that is loaded and insert tooltips around every word dynamically.
Copy linkTweet thisAlerts:
@CharlesOct 10.2005 — Since this is exclusively for Firefox and as Firefox recognizes HTML Element.innerHTML, you might want to embrace the Dark Side just a bit.
Copy linkTweet thisAlerts:
@Stephen_PhilbinOct 10.2005 — Sorry, I misunderstood the problem. I thought you wanted tooltip code.[/QUOTE]

So why not leave an example of a tooltip script as a handy side piece of info for anyone that happened to stumble across this thread, rather than leaving yet another post that's been edited into pointlessness?
Copy linkTweet thisAlerts:
@MjhLkwdOct 10.2005 — S. Philbin:

I reposted the code. It's not on topic, but fine, you want it posted. It's posted.
Copy linkTweet thisAlerts:
@herodote92Oct 10.2005 — The problem looks interesting, but I can't get exactly what is a tooltip and what you finally want to happen when you place the mouse over one particular word. Surely you want something different to be displayed, depending on the word being hovered ?
×

Success!

Help @hielscher spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...