File size: 3,319 Bytes
60db1d1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | import React from 'react'
import { CButton, CCard, CCardBody, CCardHeader, CLink, CTooltip, CRow, CCol } from '@coreui/react'
import { DocsComponents, DocsExample } from 'src/components'
const Tooltips = () => {
return (
<CRow>
<CCol xs={12}>
<DocsComponents href="components/tooltip/" />
<CCard className="mb-4">
<CCardHeader>
<strong>React Tooltip</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p className="text-body-secondary small">Hover over the links below to see tooltips:</p>
<DocsExample href="components/tooltip">
<p className="text-body-secondary">
Tight pants next level keffiyeh
<CTooltip content="Tooltip text">
<CLink> you probably </CLink>
</CTooltip>
haven'theard of them. Photo booth beard raw denim letterpress vegan messenger
bag stumptown. Farm-to-table seitan, mcsweeney'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''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>
</DocsExample>
<p className="text-body-secondary small">
Hover over the buttons below to see the four tooltips directions: top, right, bottom,
and left. Directions are mirrored when using CoreUI in RTL.
</p>
<DocsExample href="components/tooltip">
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="top"
>
<CButton color="secondary">Tooltip on top</CButton>
</CTooltip>
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="right"
>
<CButton color="secondary">Tooltip on right</CButton>
</CTooltip>
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="bottom"
>
<CButton color="secondary">Tooltip on bottom</CButton>
</CTooltip>
<CTooltip
content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
placement="left"
>
<CButton color="secondary">Tooltip on left</CButton>
</CTooltip>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
)
}
export default Tooltips
|