message: tidy up tooltip examples
diff: @@ -9,23 +9,25 @@ const TooltipExample = {
  <Box p={3}>
  <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>
  </Box>
  - <Block p={2}>
  + <Block p={2} my={2}>
  <ExampleHeading mt={3}>Directions</ExampleHeading>
  - {Tooltip.directions.map(d => (
  - <Box p={3} key={d}>
  - <Tooltip text="Hello, Tooltip!" direction={d}>
  - Tooltip direction={d}
  + {Tooltip.directions.map(dir => (
  + <Box p={3} my={2} key={dir}>
  + <Tooltip text="Hello, Tooltip!" direction={dir}>
  + Tooltip direction={dir}
  </Tooltip>
  </Box>
  ))}
  <ExampleHeading mt={3}>Alignment</ExampleHeading>
  - <Box p={3}>
  - <Tooltip text="Hello, Tooltip!" direction="ne" align="left">
  - Tooltip align left
  + {Tooltip.alignments.map(align => (
  + <Box p={3} my={2} key={align}>
  + <Tooltip text="Hello, Tooltip!" direction="ne" align={align}>
  + Tooltip align={align}
  </Tooltip>
  </Box>
  + ))}
  <ExampleHeading mt={3}>Word wrap</ExampleHeading>
  - <Box p={3}>
  + <Box p={3} my={2}>
  <Tooltip
  text="Hello, Tooltip! This tooltip has a sentence that will wrap to a newline."
  wrap
  @@ -36,7 +38,7 @@ const TooltipExample = {
  </Tooltip>
  </Box>
  <ExampleHeading mt={3}>No Delay</ExampleHeading>
  - <Box p={3}>
  + <Box p={3} my={2}>
  <Tooltip noDelay text="Hello, Tooltip!">
  Text with a tooltip
  </Tooltip>
  