React Tooltip Component

import React from 'react'
import { CLink, CTooltip } from '@coreui/react'

export const TooltipOnLinksExample = () => {
  return (
    <p className="fg-2">
      Tight pants next level keffiyeh
      <CTooltip content="Tooltip text">
        <CLink> you probably </CLink>
      </CTooltip>
      haven&#39;t heard of them. Photo booth beard raw denim letterpress vegan messenger bag
      stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit american
      apparel
      <CTooltip content="Tooltip text">
        <CLink> have a </CLink>
      </CTooltip>
      terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu
      biodiesel williamsburg marfa, four loko mcsweeney&#39;s cleanse vegan chambray. A really
      ironic artisan
      <CTooltip content="Tooltip text">
        <CLink> whatever keytar </CLink>
      </CTooltip>
      scenester farm-to-table banksy Austin
      <CTooltip content="Tooltip text">
        <CLink> twitter handle </CLink>
      </CTooltip>
      freegan cred raw denim single-origin coffee viral.
    </p>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipCustomExample = () => {
  const customTooltipStyle = {
    '--cui-tooltip-bg': 'var(--cui-primary-base)',
  } as React.CSSProperties

  return (
    <CTooltip
      content="This top tooltip is themed via CSS variables."
      placement="top"
      style={customTooltipStyle}
    >
      <CButton theme="secondary">Custom tooltip</CButton>
    </CTooltip>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipThemeVariantsExample = () => {
  return (
    <>
      <CTooltip className="theme-primary" content="Primary tooltip">
        <CButton variant="outline">Primary</CButton>
      </CTooltip>
      <CTooltip className="theme-secondary" content="Secondary tooltip">
        <CButton variant="outline">Secondary</CButton>
      </CTooltip>
      <CTooltip className="theme-success" content="Success tooltip">
        <CButton variant="outline">Success</CButton>
      </CTooltip>
      <CTooltip className="theme-danger" content="Danger tooltip">
        <CButton variant="outline">Danger</CButton>
      </CTooltip>
    </>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDirectionsExample = () => {
  return (
    <>
      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
        <CButton theme="secondary">Tooltip on top</CButton>
      </CTooltip>
      <CTooltip content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="end">
        <CButton theme="secondary">Tooltip at the end</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="bottom"
      >
        <CButton theme="secondary">Tooltip on bottom</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="start"
      >
        <CButton theme="secondary">Tooltip at the start</CButton>
      </CTooltip>
    </>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDeprecatedDirectionsExample = () => {
  return (
    <>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="right"
      >
        <CButton theme="secondary">Tooltip on right</CButton>
      </CTooltip>
      <CTooltip
        content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
        placement="left"
      >
        <CButton theme="secondary">Tooltip on left</CButton>
      </CTooltip>
    </>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipResponsivePlacementExample = () => {
  return (
    <CTooltip content="Top below md, right from md up." placement="top md:right">
      <CButton theme="secondary">Responsive placement</CButton>
    </CTooltip>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipHtmlExample = () => {
  return (
    <CTooltip
      content={
        <>
          <em>Tooltip</em> <u>with</u> <b>HTML</b>
        </>
      }
    >
      <CButton theme="secondary">Tooltip with HTML</CButton>
    </CTooltip>
  )
}

import React from 'react'
import { CButton, CTooltip } from '@coreui/react'

export const TooltipDisabledElementsExample = () => {
  return (
    <CTooltip content="Disabled tooltip" trigger={['hover', 'focus']}>
      <span className="d-inline-block" tabIndex={0}>
        <CButton theme="primary" disabled>
          Disabled button
        </CButton>
      </span>
    </CTooltip>
  )
}

import React, { useState } from 'react'
import { CButton, CCheckbox, CFormField, CTooltip } from '@coreui/react'

export const TooltipControlledExample = () => {
  const [pinned, setPinned] = useState(true)
  const [hovered, setHovered] = useState(false)

  return (
    <>
      <CFormField className="mb-4">
        <CCheckbox
          checked={pinned}
          id="tooltipPinned"
          label="Pin the tooltip"
          onChange={(event) => setPinned(event.target.checked)}
        />
      </CFormField>
      <CTooltip
        content="Pinned tooltips stay put."
        show={pinned || hovered}
        onShowChange={setHovered}
      >
        <CButton theme="secondary">Hover me</CButton>
      </CTooltip>
    </>
  )
}