Jishnuraj Jishnuraj - 3 years ago 174
CSS Question

How can I make a CSS only popup or tooltip?

I've made some code for making a paragraph scrollable. I want to make all of the content outside of the popup

<div>
invisible. Can I do it with only HTML and CSS?



<div style="position:relative;">
<div id="popup" style=" overflow: hidden; position: relative; width: 100px; height: 100px;">This must be visible. And everything out of this div, must be hidden</div>

<div style="position:absolute;left:-100px;top:-50px;">the tooltip thing</div>
</div>

<p>These must be hidden.</p>
<p>These must be hidden.</p>
<p> And These too</p>




Here is the pop-up code(noscript):

<style>
div.po
{
display: none;
}
div.p
{
display: block;
}

button:hover + div.p {
display: none;
}
button:hover + div.po {
display:block;
}
</style>
<button>Show</button>

<div class="p">Other contents</div>
<div class="po">Popup</div>


css button: hover is only changing one elements style.
when button is pressed, I want to make both 'div.po - style' into display: block
and 'div.p - style' into display: none.

Answer Source

HTML: Body text.

</div>
<div id="popup">
<a href="index.html">
Close
</a>
This is pop-up text
</div>
</span>
</div>

CSS:

#popup_bg
  {
   display:none;
   height:100vh;
   width:100vh;
   position: fixed;
   left:0;
   right:0;
   }
#popup_bg
  {
   display:none;
   height:10vh;
   width:10vh;
   position: fixed;
   left:45%;
   right:45%;
   }
#box: checked
#popup_bg
  {
   display:block;
   }
#box: checked
#popup
  {
   display:block;
   }

It's been a long time, since I asked this this question. But there was no right answer. But now I know everything I want. Here is the code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download