Tooltip

CTooltip is directive, which display tooltip over element, built on top of tooltip.js (popper.js) library. Tooltip is triggered on hover.

Usage

Example

Hello world! A tooltip example. Hello world! A right-end tooltip example.

Script


  return (
    <>
      <CTooltip content="Tooltip text">
        <a href="#"> Hello world! A tooltip example. </a>
      </CTooltip>
      <CTooltip content="Tooltip text" placement="right-end">
        <a href="#"> Hello world! A right-end tooltip example. </a>
      </CTooltip>
    </>
  )

# Features

Simplified implementation of tooltip
Bootstrap tooltip styling

# Tooltip API

Name	Type	Default Value
children	any
children components
content	(string \| any)
tooltip content
interactive	boolean	false
interactive Tippy.js mode
placement	(top-end \| top \| top-start \| bottom-end \| bottom \| bottom-start \| right-start \| right \| right-end \| left-start \| left \| left-end)	top
the placement of tooltip
trigger	string	mouseenter focus
type of trigger
advancedOptions	object	{}
advanced Tippy.js options