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(){
        $("#tooltipex").tooltip({
            placement:"auto"
        });              
    });
</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{
    width:350px;
    height:30px;
    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>Tooltip Demo</h1><br /><br />
<div>

<button type="button" id="tooltipex" class="btn btn-info"  title="Custom Tooltip ">Custom Tooltip demo</button>
</div>
 
</div>
</body>
</html>