Bootstrap Tooltip Options Example

Keywords : tooltip, bootstrap, bootstrap tooltip, bootstrap tooltip examples, bootstrap tooltip css, bootstrap tooltip html, bootstrap tooltip options, bootstrap change tooltip direction, tooltip placement

Example

<!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>

Bootstrap Tooltip Options Example

Example

Result