Ngorei NexaUI

<button class="nx-btn" data-tooltip="Ini adalah tooltip">Tooltip Atas</button>
<button class="nx-btn" data-tooltip="Tooltip Bawah" data-position="bottom">Tooltip Bawah</button>
<button class="nx-btn" data-tooltip="Tooltip Kiri" data-position="left">Tooltip Kiri</button>
<button class="nx-btn" data-tooltip="Tooltip Kanan" data-position="right">Tooltip Kanan</button>
        

<button class="nx-btn" data-tooltip="Tooltip Primary" data-theme="primary">Primary</button>
<button class="nx-btn" data-tooltip="Tooltip Success" data-theme="success">Success</button>
<button class="nx-btn" data-tooltip="Tooltip Warning" data-theme="warning">Warning</button>
<button class="nx-btn" data-tooltip="Tooltip Danger" data-theme="danger">Danger</button>

<button data-tooltip="Tooltip akan muncul di atas" data-position="top">Atas</button>
<button data-tooltip="Tooltip akan muncul di bawah" data-position="bottom">Bawah</button>
<button data-tooltip="Tooltip akan muncul di kiri" data-position="left">Kiri</button>
<button data-tooltip="Tooltip akan muncul di kanan" data-position="right">Kanan</button>
        

<button data-tooltip="Tooltip Kecil" data-size="sm">Kecil</button>
<button data-tooltip="Tooltip Sedang" data-size="md">Sedang</button>
<button data-tooltip="Tooltip Besar" data-size="lg">Besar</button>
        

<button data-tooltip="Fade Animation" data-animation="fade">Fade</button>
<button data-tooltip="Slide Animation" data-animation="slide">Slide</button>
<button data-tooltip="Zoom Animation" data-animation="zoom">Zoom</button>
        

<button class="nx-btn" id="eventTooltip" data-tooltip="Tooltip dengan Event">Hover Saya</button>
<button class="nx-btn" id="toggleTooltip" data-tooltip="Klik untuk toggle tooltip">Toggle</button>

<script>
// Mendapatkan elemen
const tooltip = document.getElementById('eventTooltip');
const toggleBtn = document.getElementById('toggleTooltip');

// Event untuk hover
tooltip.addEventListener('mouseenter', function() {
  this.setAttribute('data-show', 'true');
  console.log('Tooltip ditampilkan');
});

tooltip.addEventListener('mouseleave', function() {
  this.removeAttribute('data-show');
  console.log('Tooltip disembunyikan');
});

// Event untuk toggle manual
toggleBtn.addEventListener('click', function() {
  const isVisible = tooltip.hasAttribute('data-show');
  if (isVisible) {
    tooltip.removeAttribute('data-show');
  } else {
    tooltip.setAttribute('data-show', 'true');
  }
});
</script>
        

<button data-tooltip="<strong>HTML</strong> <em>Content</em>" data-html="true">
  HTML Content
</button>

<button class="custom-tooltip" data-tooltip="Custom Styled Tooltip">
  Custom Style
</button>

<style>
.custom-tooltip[data-tooltip]::before {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>