javascript - How do I make create a (more than one) popup text box that appears on mouse-over AND if user clicks on "+" sign -

javascript - How do I make create a (more than one) popup text box that appears on mouse-over AND if user clicks on "+" sign -

what simplest/standard way create popup text box appears in html page both if user mouseover , stays visible if user clicks on "+" sign , off 1 time again if user clicks "-" sign.

i need:

to able have more 1 visually separate popup boxes (containing different text) on same html page.

it of import user not set scrolled or moved anywhere on page during mouse-over or click-to-expand.

i want possible in of popups can code them open when user first loads page.

i working on big old website , need able over-write css styling in place links.

i need toggle between "more (+)" , "more (-)" depending on whether or not popup box open. (perhaps improve done using graphics rather text don't know...!)

i using html, css , javascript (although dont know if need javascript nor issues between using , not using javascript)

so far have:

html:

<p> main text say, rugby. blah blah... <a href="javascript:void(0);" onclick="toggleview('contentfees', this)" ><span class="reveallink">more (+)</span></a> </p> <div id="contentrugby" class="revealinfo" style="display:none;"> rugby unsafe game played loonatics etc etc... </div>

css:

.revealinfo { background-color:#f4f4f4; padding:10px 25px 15px 25px; margin: 0px 20px 0px 0px; } .reveallink{ font-weight:bold; color:#ccc; } .revealinfo:hover{display:"";}

javascript:

<script type="text/javascript"> function toggleview(id, link) { var e = document.getelementbyid(id); if (e.style.display == '') { e.style.display = 'none'; link.innerhtml = 'more (+)'; } else { e.style.display = ''; link.innerhtml = 'more (-)'; } } </script>

it sort-of works "more ()" text beingness able toggle between "(+)" , "(-)", cant mouse-over work @ tall.

what doing wrong?

many thanks

j

why don't download latest bootstrap http://getbootstrap.com , check out popover instructions. don't invent wheel checkout what's available.

javascript html css popup