Bootstrap Code
Output
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Example of bootstrap tooltip on top</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.tooltip-demo').tooltip({
        selector: "a[rel=tooltip]",
        placement: "bottom"
})
 });
</script>

<style>
.tooltip{
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:13px;
    opacity:0;
    filter:alpha(opacity=0)
}
.tooltip.in{
    opacity:.8;
    filter:alpha(opacity=80)
}


.tooltip-inner{

    padding:3px 8px;
    color:#314A5B;
    text-align:center;
    font-weight:900;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #A2BBCC), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #A2BBCC 1px, #FFFFFF 25px); 
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:15px;
    border: 1px solid #314A5B;
}


.tooltip-arrow{
    position:absolute;
    width:0;
    height:0
}
</style>



</head>
<body>
<div class="container">
<h1>Bootstrap Tooltip Demo</h1><br /><br /><br />
<div class="tooltip-demo">
 
<a title="<h3>You may use headings</h3> <a href='https://www.jquery-az.com/'>Links</a> images as well <img src='https://www.jquery-az.com/wp-content/uploads/2015/10/logo.jpg' width='175'>" data-html="true" rel="tooltip" href="#">Bring mouse over this text!</a>.
 
</div>
 
   
 
</div>
</div>
</body>
</html>