Bootstrap 4 ToolTip Example

Bootstrap 4 ToolTip Example

by Alan Lins

HTML

<script src="https://github.com/twbs/bootstrap/blob/master/js/tooltip.js"></script>
<br>
<br>
<br>
<div class="container-fluid">
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
    <div class="col-lg-10 col-md-10 ">

        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which should not wrap">Tooltip top</button>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
            <button type="button" class="btn btn-default" data-toggle="tooltip-nowrap" data-placement="top" data-original-title="This is a longer tooltip which should not wrap">Tooltip top 2</button>
        </div>
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>

CSS

.nowrap {
    max-width: 950px;
    width: 350px; 
}

TypeScript

$(function () {
    $('[data-toggle="tooltip"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})
})

$(function () {
    $('[data-toggle="tooltip-nowrap"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner nowrap"></div></div>'})
})