javascript - Popup in HTML/JS pops up only with two clicks -

javascript - Popup in HTML/JS pops up only with two clicks -

i writing simple html/js code "pop" dictionary entries, basic "wikipedia's references" lookalike. problems, otherwise wouldn't bother :) btw, not skilled in html/css/js, might stupid i'm doing!

the first , foremost problem: popups works, after clicking twice. don't know why. first click nothing, sec correctly makes popup box appear.

the sec problem optional, really. here is: boxes appear on left of screen. possible place them under link i'm clicking? of course, independently of link position.

note: using spans, using link nil different.

thanks & cheers!

html:

<p class="text"> text contain dictionary entries, example, <span class="dict" onclick="showhide('thekey')">following entry</span>. <span class="entry" id="thekey"> lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. lorem ipsum dolorem sit down amet. </span> </p>

css:

.dict { display: inline; padding-left: 4px; padding-right: 4px; background-color: #f69292; color: white; font-family: arial, helvetica, sans-serif; } .entry { position: absolute; display: none; padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 10px; margin-left: 100px; color: white; min-height: 128px; width: 400px; background-color: #ff8080; border: 1px solid red; line-height: 1.2em; font-family: arial, helvetica, sans-serif; }

javascript:

// show or hide dictionary function showhide(id) { var e = document.getelementbyid(id); if (e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; }

the reason not working on single click because of next code:

if (e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none';

what check value of inline styling element. since, have made utilize of class, doesn't quite give value, instead ending blank. can alter this:

if (e.style.display == 'none' || e.style.display == '') { e.style.display = 'block'; } else { e.style.display = 'none'; }

you can see here->http://jsfiddle.net/w9fqb/1/

with respect sec part of question, if want place them in next line position:relative can help out. however, since looking place them under link (like tooltip) can create utilize of third-party tools save much time & effort (example tooltipster).

update :

just show how tooltipster can used accomplish desired output: http://jsfiddle.net/w9fqb/2/

note: works on hover @ moment, if see docs, able acheive on mouse-click, way want.

hope helps!!!

javascript html css