Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
ef61bbce61
joyent-portal/packages/ui-toolkit/src/tooltip
History
Sérgio Ramos 38d162843d fix(my-joy-beta): fix section spacings 
fixes #1096
2018-01-31 15:06:21 +00:00
..
__tests__ fix(ui-toolkit): fix tooltip font-size and padding 2018-01-26 15:57:18 +00:00
container.js fix: update dependencies for ie11 compat 2018-01-23 21:07:08 +00:00
index.js fix(ui-toolkit): fix tooltip font-size and padding 2018-01-26 15:57:18 +00:00
Readme.md fix(my-joy-beta): fix section spacings 2018-01-31 15:06:21 +00:00
style.js fix(ui-toolkit): fix border of popover tip 2017-12-22 14:58:16 +00:00
target.js feat(my-joy-beta): instance list 2017-12-04 18:04:19 +00:00

Readme.md 

const React = require('react');
const { Row, Col } = require('joyent-react-styled-flexboxgrid');
const { default: Tooltip, Container, Target } = require('./');
const { P } = require('../text');

<Row center="xs" between="xs" style={{ marginTop: 60 }}>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="top">
        <P white>top</P>
      </Tooltip>
    </Container>
  </Col>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="right">
        <P white>right</P>
      </Tooltip>
    </Container>
  </Col>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="bottom">
        <P white>bottom</P>
      </Tooltip>
    </Container>
  </Col>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="left">
        <P white>left</P>
      </Tooltip>
    </Container>
  </Col>
</Row>;

Tooltip > hover

const React = require('react');
const { Row, Col } = require('joyent-react-styled-flexboxgrid');
const { default: Tooltip, Container, Target } = require('./');
const { P } = require('../text');

<Row center="xs" between="xs">
  <Col xs={3}>
    <Container hoverable>
      <Target>Hover here</Target>
      <Tooltip placement="top">
        <P white>top</P>
      </Tooltip>
    </Container>
  </Col>
</Row>;

Tooltip > click

const React = require('react');
const { Row, Col } = require('joyent-react-styled-flexboxgrid');
const { default: Tooltip, Container, Target } = require('./');
const { P } = require('../text');

<Row center="xs" between="xs">
  <Col xs={2}>
    <Container clickable>
      <Target>Click here</Target>
      <Tooltip placement="top">
        <P white>top</P>
      </Tooltip>
    </Container>
  </Col>
</Row>;