<section class="ds-example example-tooltips">
    <div class="html">
        <div class="tooltip fade bs-tooltip-top show" role="tooltip" style="position: relative; display: inline-block;" x-placement="top">
            <div class="arrow" style="left: 50%; transform: translateX(-50%);"></div>
            <div class="tooltip-inner">
                <p class="title-label">Lorem ipsum</p>
                Sit lorem ipsum dolor Consec tetur adipisi Eiusmod tempor
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;div class="tooltip fade bs-tooltip-top show" role="tooltip" style="position: relative; display: inline-block;" x-placement="top">
    &lt;div class="arrow" style="left: 50%; transform: translateX(-50%);">&lt;/div>
    &lt;div class="tooltip-inner">
        &lt;p class="title-label">...&lt;/p>
        ...
    &lt;/div>
&lt;/div></code>
    </pre>
</section>

<section class="ds-example example-tooltips">
    <div class="html">
        <button type="button" class="btn btn-primary btn-help" data-toggle="tooltip" title="<p class='title-label'>Titre popover</p>Sit lorem ipsum dolor Consec tetur adipisi Eiusmod tempor">?</button>
    </div>
    <pre>
        <code>&lt;button type="button" class="btn btn-primary btn-help" data-toggle="tooltip" title="&lt;p class='title-label'>Titre popover&lt;/p>Sit lorem ipsum dolor Consec tetur adipisi Eiusmod tempor">?&lt;/button></code>
    </pre>
</section>
<section class="ds-example example-tooltips">
    <div class="html">
        <div class="row">
            <div class="col-md">
                <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
                    Tooltip on top
                </button><br>
                <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
                    Tooltip on bottom
                </button>

            </div>
            <div class="col-md">
                <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
                    Tooltip on right
                </button><br>
                <button type="button" class="btn btn-primary mb-2" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
                    Tooltip on left
                </button>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="...">
    ...
&lt;/button>

&lt;button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="...">
    ...
&lt;/button>

&lt;button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="...">
    ...
&lt;/button>

&lt;button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="...">
    ...
&lt;/button></code>
    </pre>
</section>
