Popover simple

by halirgb

HTML

<h1 class="lol">Some title
<div class="question-popover">
    <div class="question-icon"></div>
    <div class="question-text">frgdfgdfg</div>
</div>
</h1>

Some awesome text here
<div class="question-popover">
    <div class="question-icon"></div>
    <div class="question-text">frgdfgdfg</div>
</div>
and hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand hereand herev

CSS

.question-popover{
    display:inline-block;
}
.question-icon{
    background-color:red;
    height:24px;
    width:24px;
    display:inline-block;
    margin:0 5px;
}
.question-text{
    display:none;
    background-color:green;
    padding:10px;
    float: left!important;
    position:absolute;
    z-index: 999999;
}

JavaScript

$(document).ready(function(e){
      $(".question-icon").click(function(){
         $(this).next('.question-text').toggle(100);
          return false;
      });
    
      $('body').click(function() {
          $('.question-text').hide(100);
        });
});