در حال بارگزاری...

###### از دست ندهید! به‌روزرسانی جدید منتشر شده است.

###### چیزی که دوست دارید اکنون در فروش است!

هم اکنون بخرید!

#### ابزار نکات

#### Basic tooltip

Use the `data-bs-title` to change tooltip title and `data-bs-toggle` to add tooltip attribute.

##### محتوای راهنمای ابزار درون خطی

در اینجا، محتوایی در مورد نکات ابزار وجود دارد که می توانید راهنمای ابزار داخل محتوا با کمک راهنمای ابزار و همچنین می توانید اضافه کنید
.Tooltips به شما کمک می کند تا محتوای بیشتر و بیشتری اضافه کنید. هنگامی که کاربر نشانگر ماوس را روی یک عنصر حرکت می‌دهد، معمولاً از یک راهنمای ابزار برای مشخص کردن اطلاعات اضافی در مورد چیزی استفاده می‌شود.

    <!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
    <button class="example-popover btn btn-primary mb-0 me-0" type="button" data-container="body" data-bs-toggle="tooltip" data-bs-placement="top" title="Surprise!!! Thank you for hovering...">It's magic please hover me... </button>
    <h5 class="mb-1 py-4 pb-0">Inline Tooltip Content</h5>
    <p>
       Here, is some content about tooltips that you can set the<a class="txt-primary fw-bold" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="tooltip" data-bs-original-title="popover text"> tooltip</a> inside the content with help of tooltip and also you can add
    <button class="btn btn-success text-white border-0 px-3 py-1 me-0 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="button">button </button> .Tooltips helps you to add more and more content. A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element
    </p>

#### Colored tooltip

Use the `btn- *` to change dark background color and `data-bs-placement='*'` to tooltip positions change.

    <!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
    <button class="mb-0 me-0 btn btn-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Primary">Primary</button>
    <button class="mb-0 me-0 btn btn-secondary" type=" button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Secondary">Secondary</button>
    <button class="mb-0 me-0 btn btn-success" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Success">Success</button>
    <button class="mb-0 me-0 btn btn-warning text-black" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Warning">Warning</button>
    <button class="mb-0 me-0 btn btn-danger" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Danger">Danger</button>

#### Tooltip directions

Use the `btn-*` to change dark background color and`data-bs-placement='*'`[top/right/bottom/left] to tooltip direction change.

    <!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
    <button class="btn btn-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
    <button class="btn btn-secondary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
    <button class="btn btn-success mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button class="btn btn-warning mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>

#### HTML elements with hover effect

Use the `bg-*-light` to change light background color and `data-bs-title` to the content under the HTML tag.

    <!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
    <button class="btn bg-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-bs-title="&lt;em&gt;Thank&lt;/em&gt; &lt;u&gt;you&lt;/u&gt;">Notifications Received</button>
    <button class="btn bg-warning mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&lt;b&gt;Thank&lt;/b&gt; &lt;em&gt;you&lt;/em&gt;">Last Warning</button>
    <button class="btn bg-danger mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&lt;em&gt;Thank&lt;/em&gt; &lt;u&gt;you&lt;/u&gt;">It's Danger</button>
    <button class="btn bg-info mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&lt;b&gt;Thank&lt;/b&gt; &lt;em&gt;you&lt;/em&gt;">Coming soon</button>

#### Filled tooltip

Tooltip in hover effect through fill dark color.`[.btn-outline-*]`. and `data-bs-title` to the content under the HTML Tag.

    <!--You can use attribute (data-bs-target='tooltip') to  used tooltips.-->
    <button class="btn btn-outline-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="top" data-bs-title="Tooltip Primary">Tooltip Primary</button>
    <button class="btn btn-outline-secondary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Secondary">Tooltip Secondary</button>
    <button class="btn btn-outline-success mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Success">Tooltip Success</button>
    <button class="btn btn-outline-info mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Tooltip Info">Tooltip Info</button>