"Copied" tooltip

[LennyLip]

Hi, thanks for the application! How can I show tooltip after copy value?

[QuadDamn]

@nihey 2nd. How do we do this?

[LennyLip]

Hi, @1RM , my version

import { OverlayTrigger, Tooltip } from 'react-bootstrap'
/// component :
hideCopiedToolTip () {
   { this.refs.overlay.hide() }
}
// render func :
var copiedTooltip = (
      <Tooltip id='copiedTooltip'>
        Copied!
      </Tooltip>
    )
 <OverlayTrigger
                            delayShow={300}
                            ref='overlay'
                            trigger='click'
                            placement='top'
                            overlay={copiedTooltip}>
<Clipboard component='i' data-clipboard-text={}>
     <span onClick={() => { setTimeout(this.hideCopiedToolTip, 3000) }}>copy</span>
</Clipboard>
</OverlayTrigger>

[devinhalladay]

For anyone that doesn't want to use react-bootstrap, here's my roll-your-own solution:

constructor() {
    this.state = { tooltip: false }
}

handleClipboardCopy() {
    this.setState({ tooltip: true })
    setTimeout(() => {
        this.setState({ tooltip: false })
    }, 1000)
}

render() {
    const tooltipStyle = { display: this.state.tooltip ? 'block' : 'none'  }
    return (
        <p style={tooltipStyle}>Copied!</p>
        <Clipboard data-clipboard-text={'text'} onClick={this.handleClipboardCopy.bind(this)}>Copy</Clipboard>
    )
}

[alyssa1995]

is there any way to do this for a list of texts to copy? I can't depend on state because when I click copy, the tooltip showed up for every single item in the list, instead of just the one i copied

[jonrandahl]

@alyssa1995, If you're referencing @devinhalladay's option then I would add the paragraph tag outside of the list to keep it as a single instance - then, while clicking on each item of your list you would only have one message to show?

Otherwise, like @LennyLip's example, you will need to look at implementing something like the reactstrap unmanaged Popover or unmanaged Tooltip per list item - which could get ugly depending on the length of your list?

Or, you could get creative and if you're using the latest version of reactstrap you could always go with a Toast message instead of tooltip style?

Please note, I am not saying you have to use reactstrap, I do not work with them, only utilise that package and this one for the projects I build! 🙏😀🙌

[ArtieReus]

Hi @LennyLip this is how I managed to get it working:

const clipboard = <Clipboard ref={cb => {setTarget(cb)}} className="btn btn-link" data-clipboard-text={text} onSuccess={onCopySuccess}>
     <i className="fa fa-copy fa-fw"></i>
   </Clipboard>

 const tooltip = <Overlay
     show={showTooltip}
     placement="top"
     container={this}
     target={target}>
     <Tooltip id={uniqueId("copy-paste-tooltip-")}>Copied!</Tooltip>
   </Overlay>

return (
   <span>
     {clipboard}
     {tooltip}
   </span>
)

You can find the whole file here: https://github.com/sapcc/elektra/blob/master/plugins/lbaas2/app/javascript/app/components/shared/CopyPastePopover.js