title: How to display popup on mouse over in html using JS and CSS?
body: <p>I have tried to display a pop-up text on mouseover, based on elements and attributes. But, I want to display the content of <code>id</code> in the pop-up box on mouseover <code>&lt;a&gt;</code> on the text.</p>
  
  <h3><code>html-1.xhtml</code></h3>
  
  <pre><code>&lt;section id="sec1"&gt;
  &lt;div id="div1"&gt;
  &lt;p id="p1"&gt;&lt;a class="keyword" id="k1" href="glossary.xhtml#g1"&gt;Lorem Ipsum&lt;/a&gt; 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.&lt;/p&gt;
  &lt;p id="p2"&gt;&lt;a class="keyword" id="k2" href="glossary.xhtml#g2"&gt;Aldus PageMaker&lt;/a&gt; was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like &lt;a class="keyword" id="k2" href="glossary.xhtml#g2"&gt;Aldus PageMaker&lt;/a&gt; including versions of Lorem Ipsum.&lt;/p&gt;
  &lt;/div&gt;
  &lt;section&gt;
  </code></pre>
  
  <h3><code>html-2.xhtml</code></h3>
  
  <pre><code>&lt;section id="sec2"&gt;
  &lt;div id="div2"&gt;
  &lt;p id="p3"&gt;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.&lt;/p&gt;
  &lt;p id="p4"&gt;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.&lt;/p&gt;
  &lt;/div&gt;
  &lt;section&gt;
  </code></pre>
  
  <h3><code>Gloss.xhtml</code></h3>
  
  <pre><code>&lt;section class="glossary"&gt;&lt;header&gt;&lt;h1 class="title"&gt;Glossary&lt;/h1&gt;&lt;/header&gt;
  &lt;dl class="glossentrylist" id="g1"&gt;&lt;dt class="glossterm" id="t1"&gt;&lt;dfn&gt;Lorem Ipsum&lt;/dfn&gt;&lt;/dt&gt;&lt;dd class="glossdef" id="d1"&gt;&lt;p id="gtd1"&gt;Lorem Ipsum.&lt;/p&gt;&lt;/dd&gt;&lt;/dl&gt;
  &lt;dl class="glossentrylist" id="g2"&gt;&lt;dt class="glossterm" id="t2"&gt;&lt;dfn&gt;Aldus PageMaker&lt;/dfn&gt;&lt;/dt&gt;&lt;dd class="glossdef" id="d2"&gt;&lt;p id="gtd1"&gt;Aldus PageMaker.&lt;/p&gt;&lt;/dd&gt;&lt;/dl&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>It will be really very helpful, if someone help me to solve this.</p>