Umpan Balik & Dialog
Tooltip (Petunjuk Melayang)
Petunjuk singkat murni CSS yang muncul saat kursor melayang atau elemen menerima fokus keyboard.
Tooltip menyajikan penjelasan ringkas tentang fungsi suatu tombol atau ikon tanpa memakan ruang visual permanen.
Pratinjau Komponen
<span style="font-size: 14px; text-decoration: underline dotted; cursor: help;" data-mjl-tooltip="Nomor Induk Kependudukan 16 digit">
Apa itu NIK?
</span>
Penggunaan CSS Murni
Cukup sematkan atribut data-mjl-tooltip:
<button class="mjl-btn mjl-btn--secondary mjl-btn--md" data-mjl-tooltip="Cetak tanda terima bukti lapor">
Cetak Bukti
</button>
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<span data-mjl-tooltip="Nomor Induk Kependudukan, 16 digit">
<button type="button" class="mjl-icon-btn mjl-icon-btn--sm" aria-label="Apa itu NIK?" aria-describedby="tip-nik">?</button>
<span id="tip-nik" role="tooltip" class="sr-only">Nomor Induk Kependudukan, 16 digit</span>
</span>
<script setup lang="ts">
import { MjlTooltip, MjlIconButton } from '@majalengka/vue';
</script>
<template>
<MjlTooltip text="Nomor Induk Kependudukan, 16 digit" v-slot="{ describedby }">
<MjlIconButton label="Apa itu NIK?" size="sm" :aria-describedby="describedby">?</MjlIconButton>
</MjlTooltip>
</template>
import { useId, type ReactElement } from 'react';
export function MjlTooltip({ text, children }: { text: string; children: (describedBy: string) => ReactElement }) {
const id = useId();
return (
<span data-mjl-tooltip={text}>
{children(id)}
<span id={id} role="tooltip" className="sr-only">{text}</span>
</span>
);
}
// Pemakaian
// <MjlTooltip text="Nomor Induk Kependudukan, 16 digit">
// {(id) => <button type="button" className="mjl-icon-btn mjl-icon-btn--sm" aria-label="Apa itu NIK?" aria-describedby={id}>?</button>}
// </MjlTooltip>
import { Component, input } from '@angular/core';
let nextId = 0;
@Component({
selector: 'mjl-tooltip',
standalone: true,
template: `
<span [attr.data-mjl-tooltip]="text()">
<ng-content />
<span [id]="tipId" role="tooltip" class="sr-only">{{ text() }}</span>
</span>
`,
})
export class MjlTooltip {
text = input.required<string>();
tipId = `mjl-tip-${nextId++}`;
}
// Pemakaian (beri pemicu aria-describedby = tipId lewat template reference):
// <mjl-tooltip #tip text="Nomor Induk Kependudukan, 16 digit">
// <button class="mjl-icon-btn mjl-icon-btn--sm" aria-label="Apa itu NIK?" [attr.aria-describedby]="tip.tipId">?</button>
// </mjl-tooltip>
{{-- resources/views/components/mjl/tooltip.blade.php --}}
@props(['text', 'id' => 'tip-' . \Illuminate\Support\Str::random(6)])
<span data-mjl-tooltip="{{ $text }}">
{{ $slot }}
<span id="{{ $id }}" role="tooltip" class="sr-only">{{ $text }}</span>
</span>
{{-- Pemakaian --}}
<x-mjl.tooltip text="Nomor Induk Kependudukan, 16 digit" id="tip-nik">
<button type="button" class="mjl-icon-btn mjl-icon-btn--sm" aria-label="Apa itu NIK?" aria-describedby="tip-nik">?</button>
</x-mjl.tooltip>
<?php $teks = 'Nomor Induk Kependudukan, 16 digit'; ?>
<span data-mjl-tooltip="<?= htmlspecialchars($teks, ENT_QUOTES, 'UTF-8') ?>">
<button type="button" class="mjl-icon-btn mjl-icon-btn--sm" aria-label="Apa itu NIK?" aria-describedby="tip-nik">?</button>
<span id="tip-nik" role="tooltip" class="sr-only"><?= htmlspecialchars($teks, ENT_QUOTES, 'UTF-8') ?></span>
</span>
Tooltip CSS (::after) tidak terbaca pembaca layar, jadi komponen ini juga menaruh teksnya di elemen role="tooltip" tersembunyi. Ikat ke pemicu lewat slot prop describedby.