Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

تولتیپ (Tooltip)

  2. کیت‌های رابط کاربری
  3. تولتیپ

تولتیپ (Tooltip) پایه

برای تنظیم تولتیپ (Tooltip) از data-bs-toggle="tooltip" استفاده کنید.

محتوای تولتیپ (Tooltip) درون متن

در اینجا، محتوایی درباره ابزارک‌های راهنما وجود دارد که می‌توانید تولتیپ (Tooltip) را درون متن با کمک tooltip قرار دهید و همچنین می‌توانید اضافه کنید. ابزارک‌های راهنما به از شما کمک می‌کنند محتوای بیشتری اضافه کنید. تولتیپ (Tooltip) اغلب برای ارائه اطلاعات اضافی در مورد یک عنصر هنگام حرکت اشاره‌گر موس استفاده می‌شود. 

<div class="card-body">
                <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="تعجب!!! ممنون ...">جادویی است لطفاً موس را روی من ببرید... </button>
                <h5 class="mb-1 py-4 pb-0">محتوای تولتیپ (Tooltip) درون متن</h5>
                <p>در اینجا، محتوایی درباره ابزارک‌های راهنما وجود دارد که می‌توانید <a class="text-primary fw-bold" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="tooltip" data-bs-original-title="popover text">تولتیپ (Tooltip)</a> را درون متن قرار دهید و همچنین می‌توانید
                <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> اضافه کنید. ابزارک‌های راهنما به از شما کمک می‌کنند محتوای بیشتری اضافه کنید. تولتیپ (Tooltip) اغلب برای ارائه اطلاعات اضافی در مورد یک عنصر هنگام حرکت اشاره‌گر موس استفاده می‌شود.
                </p>
                </div>

تولتیپ (Tooltip) رنگی

برای تنظیم ابزارک رنگی کلاس btn- * را اضافه کنید.

<div class="common-flex">
                <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-white" 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>
                </div>

جهت تولتیپ (Tooltip)

برای تنظیم جهت‌های مختلف از data-bs-placement="top/right/bottom/left". استفاده کنید.

<div class="common-flex">
                <button class="btn btn-primary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="تولتیپ در بالا">ابزارک بالا</button>
                <button class="btn btn-secondary mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="تولتیپ در راست">ابزارک راست</button>
                <button class="btn btn-success mb-0 me-0" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تولتیپ در پایین">ابزارک پایین</button>
                <button class="btn btn-warning mb-0 me-0 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="تولتیپ در چپ">ابزارک چپ</button>
                </div>

تولتیپ (Tooltip) با عناصر HTML

از عناصر HTML با کمک data-bs-title="". استفاده کنید.

<div class="common-flex tooltip-effect">
                <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;متشکرم&lt;/em&gt; &lt;u&gt;از شما&lt;/u&gt;">
                اعلان‌های دریافت شده</button>
                <button class="btn bg-warning mb-0 me-0 text-white" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="&lt;b&gt;متشکرم&lt;/b&gt; &lt;em&gt;از شما&lt;/em&gt;">آخرین 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;متشکرم&lt;/em&gt; &lt;u&gt;از شما&lt;/u&gt;">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;متشکرم&lt;/b&gt; &lt;em&gt;از شما&lt;/em&gt;">به زودی</button>
                </div>

تولتیپ (Tooltip) پر شده

با کمک کلاس .btn-outline دکمه را هنگام حرکت موس پر کنید.

<div class="common-flex">
                <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) اطلاعات</button>
                </div>