Sha256: 5b71ba933cde4dce8602eeb98a4b2de48f002444312bc3b313cf76077d3396fa

Contents?: true

Size: 903 Bytes

Versions: 944

Compression:

Stored size: 903 Bytes

Contents

import React, { useState } from 'react'
import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'

const TooltipShowTooltipReact = (props) => {
  const [showTooltip, setShowTooltip] = useState(true);

  return (
   <Flex 
       flexDirection='column'
       gap='md'
       wrap
   >
    <FlexItem>
      <Button 
          onClick={()=> setShowTooltip(!showTooltip)}
          text="Toggle state"
      />
    </FlexItem>
    <FlexItem>
      <Body >
        <p>
          {'Tooltip is: '}
          <code>{showTooltip ? "enabled" : "disabled"}</code>
        </p>
      </Body>
    </FlexItem>
    <FlexItem>
      <Tooltip 
          placement='right'
          showTooltip={showTooltip}
          text='Tooltip is enabled'
          zIndex={10}
          {...props}
      >
        {'Hover me.'}
      </Tooltip>
    </FlexItem>

   </Flex>
  )
}

export default TooltipShowTooltipReact

Version data entries

944 entries across 944 versions & 2 rubygems

Version Path
playbook_ui_docs-14.0.0.pre.alpha.PLAY14733479 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-14.0.0.pre.alpha.PLAY14733479 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-14.0.0.pre.alpha.dependabotnpmandyarnreactjoyride2823478 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-14.0.0.pre.alpha.dependabotnpmandyarnreactjoyride2823478 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-14.0.0.pre.alpha.PLAY14113475 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-14.0.0.pre.alpha.PLAY14113475 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-14.0.0.pre.alpha.play1447alphatest3462 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-14.0.0.pre.alpha.play1447alphatest3462 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-14.1.0 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-14.1.0 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-13.34.1.pre.alpha.play1447addrequiredicons3455 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-13.34.1.pre.alpha.play1447addrequiredicons3455 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-13.34.1.pre.alpha.play1447addrequiredicons3451 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-13.34.1.pre.alpha.play1447addrequiredicons3451 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-13.34.1.pre.alpha.PLAY14043436 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-13.34.1.pre.alpha.PLAY14043436 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-13.34.1.pre.alpha.pbntr258paginationkitforreact3413 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3413 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui_docs-13.34.1.pre.alpha.pbntr258paginationkitforreact3411 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3411 app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx