Tooltip | سیستم طراحی سپانو

Tooltip

در سیستم طراحی سپانو دیتا انواع tooltip عبارتند از :

Lightmode, Darkmode

مشخصات کلی

تمامی Tooltipها برای دو حالت تاریک و روشن صفحه طراحی شده اند.

استفاده از هر نوع از Tooltip ها بنا به اهمیت آن‌ها است.

منابع

فایل فیگما سیستم طراحی سپانو دسترسی کامل به تمامی کامپوننت‌ها و شیوه‌نامه‌های سیستم طراحی سپانوwest

فایل لوگو سپانو دیتا دریافت لوگو رسمی و سازمانی سپانو دیتاwest

Tooltip

رنگ

Hex	Element
#3ECF8A	1. Cotainer
#0B1C28	2. icon
#9E9E9E	3. Container Outline
#207E51	4. icon
#207E51	5. icon

Hex	Element
#3ECF8A	1. Cotainer
#0B1C28	2. icon
#9E9E9E	3. Container Outline
#207E51	4. icon
#207E51	5. icon

حالت‌ها

چیدمان

Tooltip

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="عنوان">
    top
</button>

<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="عنوان">
    left
</button>

<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="custom-tooltip" data-bs-title="عنوان">
    right
</button>

<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip" data-bs-title="عنوان">
    bottom
</button>


                                                            
.sdp-btn {
    padding: 12px 24px;
    border-radius: 0.313rem;
    border: 0;
    min-width: 6rem;
    text-decoration: none;
    text-align: center;
    margin: 4px;
    font-family: 'poppins';
}

.sdp-btn-filled {
    border-radius: 5px;
    border: 0;
}

.sdp-btn-filled-primary {
    background: #0A592B;
    color: #FFFFFF;
}

.sdp-btn-filled-primary:hover {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #C0FFDA;
    color: #0A592B;
}

.sdp-btn-filled-primary:active {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.sdp-btn-filled-primary:focus {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1);
    background: #8DFFBD;
    color: #0A592B;
}

.custom-tooltip {
    --bs-tooltip-bg: #0A592B;
    opacity: 1 !important;
    font-family: 'YekanBakhFaNum', Roboto, sans-serif;
}


                                                            
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Tooltip (Dark)

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

                                                        
<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip dark" data-bs-title="عنوان">
    top
</button>

<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="custom-tooltip dark" data-bs-title="عنوان">
    left
</button>

<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="custom-tooltip dark" data-bs-title="عنوان">
    right
</button>

<button type="button" class="sdp-btn sdp-btn-filled-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-custom-class="custom-tooltip dark" data-bs-title="عنوان">
    bottom
</button>


                                                            
.custom-tooltip.dark .tooltip-inner {
    --bs-tooltip-bg: #DAFFE9 !important;
    color: #0A592B !important;
    opacity: 1 !important;
    font-family: 'YekanBakhFaNum', Roboto, sans-serif;
}

.custom-tooltip.dark .tooltip-arrow {
    --bs-tooltip-bg: #DAFFE9 !important;
}


                                                            
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

موارد استفاده

کامپوننت Tooltip هنگامی استفاده می‌شود که قرار است اطلاعات کوتاه و اضافی با نگه داشتن نشانگر روی Button یا سایر المان‌ها به کاربر نمایش داده شود.
اطلاعات نمایش داده شده توسط کامپوننت Tooltip، شامل مواردی می‌شوند که ضروری نبوده اما توضیح بیشتری در اختیار کاربر قرار می‌دهند.
این کامپوننت به صورت شناور نمایش داده می‌شود و قابلیت کلیک ندارد.

نکات کلی

از کامپوننت Tooltip برای نمایش اطلاعات مهم استفاده نکنید. این کامپوننت‌ها به دلیل شناور بودن، ممکن است به خوبی کشف و دیده نشوند.
متن نمایش داده شده، نباید به سرعت ناپدید شود. در واقع این متن تا هنگامی که نشانگر کاربر روی عنصر مورد نظر قرار دارد، باید قابل دیدن باشد.
هرگز کامپوننت Tooltip را برای یک عنصر غیرفعال قرار ندهید زیرا برخلاف اصول دسترسی‌پذیری بوده و پشتیبانی نمی‌شود.

سیستم طراحی شرکت سپانو دیتا پارس

موارد استفاده

نکات کلی