Untitled

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
        div {
            position: relative;
            width: 50%; margin: auto; background: silver;
        }
        p {
            width: 300px; display: block; height: 150px; background: black; color: white;
        }
        .tooltip {
            width: 150px; height:auto;
            display: none;
            position: absolute;
            z-index: 99;
            background: gray;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div>
      <p>This is the first paragraph</p>
      <p>This is the second paragraph</p>
      <p>This is the third paragraph</p>
      <p>This is the fourth paragraph</p>
      <p>This is the fifth paragraph</p>
    </div>
    <script>
        $(document).ready(function() {
            var $p = $("p"), This = $("this"),
                Target = {"src":""},
                tooltipSrc = Target.src,
                tooltip = $(document.createElement('p')),
                leftSub;


            $p.mouseenter(function(e, Target) {
                Target = e.target;
                tooltip
                    .attr({ class:"tooltip"})
                    .text("this is a paragraph")
                    .appendTo($("body"))
                    .css({"display": "block"})
                $p.mousemove(function(e2) {

                    tooltip.css({
                            "top": e2.pageY +15 , "left":  e2.pageX + 15
                        });

                });
                $p.mouseleave(function() {
                    tooltip.remove();
                });
            });

        });
    </script>
</body>
</html>