TTS. DocsPanel Design System
1.4.0
Components

Tooltips

Contents

The tooltip provides contextual information when hovering over an element, enhancing usability and guidance in the interface.

Introduction

A tooltip provides additional information when hovering over an element. It enhances user experience by offering contextual details without cluttering the interface.

Code structure

A tooltip appearing at the top of an element enhances accessibility by providing additional context when hovered over.

                    
 HTML
                      
                    
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="نسخ">
    <span class="tticon-copy-doc btn-icon"></span>
</button>

Tooltip Positions

Tooltip positions define where the tooltip appears relative to the target element. The .tooltip-top class places the tooltip above the element, .tooltip-bottom positions it below, .tooltip-left aligns it to the left, and .tooltip-right places it to the right.

View Mode 
                          
 HTML
                            
                          
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="للأعلى" data-bs-offset="4,4">
    <span class="tticon-copy-doc btn-icon"></span>
</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="لليمين" data-bs-offset="4,4">
    <span class="tticon-copy-doc btn-icon"></span>
</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="للأسفل" data-bs-offset="4,4">
    <span class="tticon-copy-doc btn-icon"></span>
</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="لليسار" data-bs-offset="4,4">
    <span class="tticon-copy-doc btn-icon"></span>
</button>
<!-- Usage Example -->
<DefaultTooltip message="right" placement="right">right</DefaultTooltip>
<DefaultTooltip message="top" placement="top">top</DefaultTooltip>
<DefaultTooltip message="bottom" placement="bottom">bottom</DefaultTooltip>
<DefaultTooltip message="left" placement="left">left</DefaultTooltip>
<!-- Vue Component Code Block -->
<template>
  <button
    :class="'btn ' + className"
    type="button"
    :data-bs-toggle="'tooltip'"
    :data-bs-title="message"
    ref="tooltipBtn"
    :data-bs-placement="placement"
  >
    <slot />
  </button>
</template>
<script setup>
import { Tooltip } from 'bootstrap'
import { onMounted, ref } from 'vue'
 
defineProps({
  message: String,
  placement: {
    type: String,
    default: 'top',
  },
  className: {
    type: String,
    default: 'btn-secondary',
  },
})
 
const tooltipBtn = ref(null)
 
onMounted(() => {
  if (tooltipBtn.value) {
    new Tooltip(tooltipBtn.value)
  }
})
</script>
Last updated 3 months ago