Responsive Website Design: Mouse hover pop up div or you can use as tooltip

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pop-up div on hover</title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
       
        color: #dddddd;
      }
      
      h1, h3 {
        margin: 0;
        padding: 0;
        font-weight: normal;
      }
      
      a {
        color: #EB067B;
      }
      
      div#container {
        width: 580px;
        margin: 100px auto 0 auto;
        padding: 20px;
        background: #000;
        border: 1px solid #1a1a1a;
      }
      
      /* HOVER STYLES */
      div#pop-up {
        display: none;
        position: absolute;
        width: 280px;
        padding: 10px;
        background: #fff;
        color: #000000;
        border: 1px solid #ccc;
        font-size: 90%;
      }
   
   
   .popover > .arrow, .popover > .arrow::after {
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
.popover > .arrow {
    border-width: 11px;
}
.popover > .arrow::after {
    border-width: 10px;
    content: "";
}
.popover.top > .arrow {
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, 0.25);
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
}
.popover.top > .arrow::after {
    border-bottom-width: 0;
    border-top-color: #fff;
    bottom: 1px;
    content: " ";
    margin-left: -10px;
}
.popover.right > .arrow {
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, 0.25);
    left: -11px;
    margin-top: -11px;
    top: 50%;
}
.popover.right > .arrow::after {
    border-left-width: 0;
    border-right-color: #fff;
    /*bottom: -10px;*/
    content: " ";
    /*left: 1px;*/
 bottom: 88px;left: -9px;
}
.popover.bottom > .arrow {
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-top-width: 0;
    left: 50%;
    margin-left: -11px;
    top: -11px;
}
.popover.bottom > .arrow::after {
    border-bottom-color: #fff;
    border-top-width: 0;
    content: " ";
    margin-left: -10px;
    top: 1px;
}
.popover.left > .arrow {
    border-left-color: rgba(0, 0, 0, 0.25);
    border-right-width: 0;
    margin-top: -11px;
    right: -11px;
    top: 50%;
}
.popover.left > .arrow::after {
    border-left-color: #fff;
    border-right-width: 0;
   /* bottom: -10px;*/
    content: " ";
    right: 1px;
 top:0px;
}
   
   
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var moveLeft = 20;
        var moveDown = 10;
        
        $('a#trigger').hover(function(e) {
          $('div#pop-up').show();
          //.css('top', e.pageY + moveDown)
          //.css('left', e.pageX + moveLeft)
          //.appendTo('body');
        }, function() {
          $('div#pop-up').hide();
        });
        
        $('a#trigger').mousemove(function(e) {
          $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });
        
      });
    </script>
  </head>
  <body>
    <div id="container">
      <h1>
Pop-up div on hover</h1>
<p>
Mouse Hover To The Link
        <a href="#" id="trigger">Hover link</a>.
      </p>

      <div id="pop-up" class="popover right">
      <div class="arrow">
</div>
<h3>
This is work as mouse hover pop up div or you can use as tooltip also.</h3>
<p>
you can use this ui as tooltip or mouse hover div box or message box. 
        </p>
</div>
</div>
</body>
</html>

Monday, 23 February 2015

Mouse hover pop up div or you can use as tooltip

1 comment: