Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Placement

Trigger

Arrow

Offset

Delay

import { createTooltip } from '@devix-labs/popover';
import '@devix-labs/popover/styles.css';

createTooltip(document.querySelector('#target'), {
  content: 'Removes this row for good',
  placement: 'bottom',
  trigger: 'hover',
  arrow: true,
  offset: 8,
  delay: 120
});

import { Tooltip } from '@devix-labs/popover/react';
import '@devix-labs/popover/styles.css';

<Tooltip
  content="Removes this row for good"
  placement="bottom"
  trigger="hover"
  arrow
  offset={8}
  delay={120}
/>

<script setup>
import { Tooltip } from '@devix-labs/popover/vue';
import '@devix-labs/popover/styles.css';
</script>

<template>
  <Tooltip
  content="Removes this row for good"
  placement="bottom"
  trigger="hover"
  arrow
  :offset="8"
  :delay="120"
/>
</template>

<script>
  import { popover } from '@devix-labs/popover/svelte';
  import '@devix-labs/popover/styles.css';
</script>

<div use:popover={{
  content: 'Removes this row for good',
  placement: 'bottom',
  trigger: 'hover',
  arrow: true,
  offset: 8,
  delay: 120
}} />

Every option here is in the documentation, along with the ones that are not worth a control.