t-tooltip

This component renders a tooltip on element hover. You can provide a modal controller or let the component generate one for you.

Basic Usage

import { TButton, TCard, TFlex, TTooltip } from "@dija/tohama-components";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <TTooltip label="This will remove your post.">
        <TButton color="danger" design="flat" icon="mdi:trash-can" onClick={() => {}}>
          Remove
        </TButton>
      </TTooltip>
    );
  },
});

Position

import { TButton, TCard, TFlex, TTooltip } from "@dija/tohama-components";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <TTooltip label="This will remove your post." vertical-align="end" offset-y="5">
        <TButton color="danger" design="flat" icon="mdi:trash-can" onClick={() => {}}>
          Remove
        </TButton>
      </TTooltip>
    );
  },
});

Transitions and Label Slot

import { TButton, TCard, TFlex, TTooltip } from "@dija/tohama-components";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <TTooltip
        transition="scale"
        offset-y="50"
        label={() => (
          <TFlex align="center">
            <TIcon icon="mdi:account-circle" color="primary" size="16" me="sm" />
            <TText>This is a tooltip!</TText>
          </TFlex>
        )}
      >
        <TCard class="overflow-hidden" design="flat" size="xl" ratio={9 / 16}>
          <TImage src="https://source.unsplash.com/840x400/?newyork" />
        </TCard>
      </TTooltip>
    );
  },
});

API

No options available

Popups

t-snackbar

Forms

t-form

Table of Contents