Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
joyent-portal/packages/ui-toolkit/src/tooltip
History
Sara Vieira c087f0bd9f
feat(my-joy-beta): instance home 
fixes #814
 		2017-11-28 14:50:55 +00:00
..
Readme.md style: lint and format 2017-11-02 13:33:43 +00:00
container.js feat(ui-toolkit): tooltip and popover 2017-10-24 15:21:39 +01:00
index.js feat(my-joy-beta): instance home 2017-11-28 14:50:55 +00:00
style.js feat: new tables and affinity prototype 2017-11-16 10:47:32 +00:00
target.js feat(ui-toolkit): tooltip and popover 2017-10-24 15:21:39 +01:00

Readme.md 

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

<Row center="xs" between="xs">
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="top">
        <code>top</code>
      </Tooltip>
    </Container>
  </Col>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="right">
        <code>right</code>
      </Tooltip>
    </Container>
  </Col>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="bottom">
        <code>bottom</code>
      </Tooltip>
    </Container>
  </Col>
  <Col xs={2}>
    <Container>
      <Target>Hello</Target>
      <Tooltip placement="left">
        <code>left</code>
      </Tooltip>
    </Container>
  </Col>
</Row>;

Tooltip > hover

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

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

Tooltip > click

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

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