CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dari
Dari

Reputation: 3

How to display popup on mouse over in html using JS and CSS?

I have tried to display a pop-up text on mouseover, based on elements and attributes. But, I want to display the content of id in the pop-up box on mouseover <a> on the text.

html-1.xhtml

<section id="sec1">
<div id="div1">
<p id="p1"><a class="keyword" id="k1" href="glossary.xhtml#g1">Lorem Ipsum</a> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p id="p2"><a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a> including versions of Lorem Ipsum.</p>
</div>
<section>

html-2.xhtml

<section id="sec2">
<div id="div2">
<p id="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<p id="p4">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<section>

Gloss.xhtml

<section class="glossary"><header><h1 class="title">Glossary</h1></header>
<dl class="glossentrylist" id="g1"><dt class="glossterm" id="t1"><dfn>Lorem Ipsum</dfn></dt><dd class="glossdef" id="d1"><p id="gtd1">Lorem Ipsum.</p></dd></dl>
<dl class="glossentrylist" id="g2"><dt class="glossterm" id="t2"><dfn>Aldus PageMaker</dfn></dt><dd class="glossdef" id="d2"><p id="gtd1">Aldus PageMaker.</p></dd></dl>
</section>

It will be really very helpful, if someone help me to solve this.

Upvotes: 0

Views: 3216

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28553

If i understand correctly, you can do this purely with css. Here is a fiddle

p.ppup {border-bottom: thin dotted; background: #ffeedd;}
p.ppup:hover {text-decoration: none; background: #ffffff; z-index: 6; }
p.ppup span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
p.ppup:hover span {left: 2%; background: #ffffff;} 
p.ppup span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
p.ppup:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;} 
<section id="sec1">
<div id="div1">
<p id="p1" class="ppup"><a class="keyword" id="k1" href="glossary.xhtml#g1">Lorem Ipsum</a><span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></p>
<p id="p2" class="ppup"><a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a><span> was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <a class="keyword" id="k2" href="glossary.xhtml#g2">Aldus PageMaker</a> including versions of Lorem Ipsum.</span></p>
</div>
<section>

Upvotes: 2

Related Questions