@mekari/mekari-ui-vue/src/components/Tooltip/stories/config/index.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import '@/.storybook/story-config';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-icons.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-button.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-tooltip.css';

export const argTypesDefault = {
  // Props
  trigger: {
    control: {
      type: 'select',
      options: ['click', 'hover'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'click | hover',
      },
    },
    description: 'Set the trigger event that will toggle tooltip\'s visibiliity.',
  },
  placement: {
    control: {
      type: 'select',
      options: ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end',
      },
    },
    defaultValue: 'top',
    description: 'Set the placement of tooltip, relatively to the activator element of tooltip.',
  },
  content: {
    control: {
      type: 'text',
    },
    description: 'Set the content inside the tooltip. This props can be blank, and use slot `tooltip-content` instead. If slot `tooltip-content` is not blank, the props `content` will be ignored.',
  },
  target: {
    control: {
      type: 'text',
    },
    description: 'Set id of activator element of tooltip.',
  },
  // Slot
  default: {
    table: {
      type: {
        summary: 'string',
      },
      defaultValue: {
        summary: '',
      },
    },
    description: 'Set the content inside the tooltip. This slot can be blank, and use props `content` instead. If this slot is not blank, the props `content` will be ignored.',
  },
};

const codeDefault = `
<m-tooltip
  :trigger="trigger"
  :placement="placement"
  :content="content"
  :target="target"
>
</m-tooltip>
<button class="btn btn-primary" :id="target">Tooltip Activator</button>
`;

export const parametersDefault = {
  docs: { source: { code: codeDefault } },
};