پیشفرض

لینک 
<a href="javascript:void(0);" class="btn btn-primary mb-3 rounded bs-tooltip" title="راهنمای ابزار با استفاده از برچسب لینک">
    لینک
</a>
<button type="button" class="btn btn-success mb-3 rounded bs-tooltip" title="راهنمای ابزار با استفاده از برچسب دکمه">
    دکمه
</button>

تعیین سطح

data-placement="top"

data-placement="right"

data-placement="bottom"

data-placement="left"


<!-- TOP -->                                            
<button type="button" class="btn btn-info mb-2 rounded bs-tooltip" data-placement="top" title="راهنما در سمت بالا">
    راهنما در سمت بالا
</button>

<!-- RIGHT -->                                            
<button type="button" class="btn btn-danger mb-2 rounded bs-tooltip" data-placement="right" title="راهنما در سمت راست">
    راهنما در سمت راست
</button>

<!-- BOTTOM -->                                            
<button type="button" class="btn btn-warning mb-2 rounded bs-tooltip" data-placement="bottom" title="راهنما در سمت پایین">
    راهنما در سمت پایین
</button>

<!-- LEFT -->                                            
<button type="button" class="btn btn-secondary mb-2 rounded bs-tooltip" data-placement="left" title="راهنما در سمت چپ">
    راهنما در سمت چپ
</button>

HTML 

<button type="button" class="btn btn-dark rounded bs-tooltip" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
     نکات راهنمایی با HTML
</button>

گزینه ها

data-trigger="click"

پیشفرض

data-delay="1000"

data-animation="false"

<!-- تک کلیک -->
<button type="button" class="mt-1 btn btn-primary bs-tooltip mb-4 ml-2 mr-2 rounded" data-trigger="click" title="تک کلیک">
    تک کلیک
</button>

<!-- در فوکوس -->
<button type="button" class="mt-1 btn btn-secondary bs-tooltip mb-4 ml-2 mr-2 rounded" title="در فوکوس">
    در فوکوس
</button>

<!-- Delay -->
<button type="button" class="mt-1 btn btn-info bs-tooltip mb-4 ml-2 mr-2 rounded" data-delay="1000" title="Delay 1s">
    Delay
</button>

<!-- انیمیشن رد شده -->
<button type="button" class="mt-1 btn btn-dark bs-tooltip mb-4 ml-2 mr-2 rounded" data-animation="false" title="Disable Animation">
    انیمیشن رد شده
</button>

رنگها

برای افزودن طرح رنگی ، قالب راهنمای ابزار HTML را مطابق شکل زیر تغییر دهید.

<!--اولیه-->
<button type="button" class="mt-1 btn btn-primary primary mb-4 ml-2 mr-2 rounded" data-container="body" data-placement="top" data-html="true">اولیه</button>

$('.primary').tooltip({
    template: '<div class="tooltip tooltip-primary" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
    title: "Primary"
});

© کپی رایت

بومی سازی شده توسط : ایمان پاکروح