coreui-free-react-admin-template

1
import React from 'react'
2
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const Tooltips = () => {
6
  return (
7
    <CRow>
8
      <CCol xs={12}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Tooltip</strong> <small>Basic example</small>
12
          </CCardHeader>
13
          <CCardBody>
14
            <p className="text-body-secondary small">Hover over the links below to see tooltips:</p>
15
            <DocsExample href="components/tooltip">
16
              <p className="text-body-secondary">
17
                Tight pants next level keffiyeh
18
                <CTooltip content="Tooltip text">
19
                  <CLink> you probably </CLink>
20
                </CTooltip>
21
                haven&#39;theard of them. Photo booth beard raw denim letterpress vegan messenger
22
                bag stumptown. Farm-to-table seitan, mcsweeney&#39;s fixie sustainable quinoa 8-bit
23
                american apparel
24
                <CTooltip content="Tooltip text">
25
                  <CLink> have a </CLink>
26
                </CTooltip>
27
                terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
28
                thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney&#39;&#39;s
29
                cleanse vegan chambray. A really ironic artisan
30
                <CTooltip content="Tooltip text">
31
                  <CLink> whatever keytar </CLink>
32
                </CTooltip>
33
                scenester farm-to-table banksy Austin
34
                <CTooltip content="Tooltip text">
35
                  <CLink> twitter handle </CLink>
36
                </CTooltip>
37
                freegan cred raw denim single-origin coffee viral.
38
              </p>
39
            </DocsExample>
40
            <p className="text-body-secondary small">
41
              Hover over the buttons below to see the four tooltips directions: top, right, bottom,
42
              and left. Directions are mirrored when using CoreUI in RTL.
43
            </p>
44
            <DocsExample href="components/tooltip">
45
              <CTooltip
46
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
47
                placement="top"
48
              >
49
                <CButton color="secondary">Tooltip on top</CButton>
50
              </CTooltip>
51
              <CTooltip
52
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
53
                placement="right"
54
              >
55
                <CButton color="secondary">Tooltip on right</CButton>
56
              </CTooltip>
57
              <CTooltip
58
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
59
                placement="bottom"
60
              >
61
                <CButton color="secondary">Tooltip on bottom</CButton>
62
              </CTooltip>
63
              <CTooltip
64
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
65
                placement="left"
66
              >
67
                <CButton color="secondary">Tooltip on left</CButton>
68
              </CTooltip>
69
            </DocsExample>
70
          </CCardBody>
71
        </CCard>
72
      </CCol>
73
    </CRow>
74
  )
75
}
76

77
export default Tooltips
78