gif
از دست ندهید! به‌روزرسانی جدید منتشر شده است.
gif
چیزی که دوست دارید اکنون در فروش است!
هم اکنون بخرید!

ابزار نکات

  2. کیت های رابط کاربری
  3. ابزار نکات

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>