How to make a rich tooltip with a HTML form in it

Question

I have a paragraph of text with a link in it. I want to make a rich tool tip with a title on the top and a field to collect email addresses appear on hovering the link. What approach should I take?

I have looked into tool tip libraries but none seem to have form support. Please find the code below

The content in which the link is present:

<p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus  
tristique senectus et netus et malesuada pellentesque habitant senectus 
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies  
eget,  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.  
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Tool tip content:

<div class="tooltip">
  <h3>Tooltip title</h3>
  <p>Vestibulum tortor quam, feugiat vitae, ultricies  
  eget,  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.  
  Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <form>
    <input type="email" placeholder="[email protected]" />
    <input type="submit" value="subscribe" />
  </form>
  <span class="branding">This is our branding message</span>
</div>

Now the effect I want to achieve is when I hover the link in the content the tooltip content should appear in a styled div. How should I do it?

Answer 1

Check this snippet

Updated

$("a").bind("mousemove", function(event) {
    $("div.tooltip").css({
        top: event.pageY + 10 + "px",
        left: event.pageX + 10 + "px"
    }).show();
})
$('.close').bind('click', function(){
  $("div.tooltip").fadeOut();
});

body{
    font-family:arial;
    font-size:12px;
}
.tooltip {
    width:350px;
    position:absolute;
    display:none;
    z-index:1000;
    background-color:#CB5757;
    color:white;
    border: 1px solid #AB4141;
    padding:15px 20px;
    box-shadow: 0px 3px 2px #8D8D8D;
    border-radius: 6px;
}
.close{
  right: 15px;
  position: absolute;
  background: #fff;
  color: #555;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 10px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<p>Pellentesque habitant <a href="#">Link to show tooltip</a> morbi senectus  
    tristique senectus et netus et malesuada pellentesque habitant senectus 
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies  
    eget,  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.  
    Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<div class="tooltip">
    <span class="close">X</span>
    <h3>Tooltip title</h3>
    <p>Vestibulum tortor quam, feugiat vitae, ultricies  
        eget,  tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.  
        Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>
    <form>
        <input type="email" placeholder="[email protected]" />
        <input type="submit" value="subscribe" />
    </form>
    <span class="branding">This is our branding message</span>
</div>