<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltip Options Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.bcontent { margin-top: 10px;
}
</style>
<script>
$(function() { $('#toptltp').tooltip({ title: 'Sample Tooltip'
});
$('#lftltp').tooltip({ title: 'Left Tooltip',
placement: 'left'
});
$('#rttltp').tooltip({ title: '<b>Right</b> Tooltip',
html: true,
placement: 'top'
});
$('#bttltp').tooltip({ title: 'Bottom Tooltip',
placement: 'bottom',
delay: { show: 0,
hide: 300
}
});
});
</script>
</head>
<body>
<div class="container bcontent">
<h2>Bootstrap Tooltip Options</h2>
<hr />
<a href="#" class="btn btn-primary" data-toggle="tooltip" id="toptltp">Top Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" id="lftltp">Left Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" id="rttltp">Right Tooltip</a>
<a href="#" class="btn btn-primary" data-toggle="tooltip" id="bttltp">Bottom Tooltip</a>
</div>
</body>
</html>
