🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

mgr-tooltip-react

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mgr-tooltip-react

Simple react component for tooltips.

0.0.2
latest
Source
npm
Version published
Weekly downloads
0
-100%
Maintainers
1
Weekly downloads
 
Created
Source

mgr-tooltip-react

Simple react component for tooltips. A tooltip content can be any React component and is styled by yourself.

How to install

npm install mgr-tooltip-react --save

How to use

Since it is a React module, I suppose you have the webpack and bable configured.

import React from 'react';
import Tooltip from 'mgr-tooltip-react';

const ExampleComponent = () => {
  const TooltipContent = (<div id="exampleTooltip" className="my-tooltip-style">
    <p>Here is your tooltip content component</p>
  </div>);

  return (<div>
    <Tooltip
      tooltip={TooltipComponent}
      placement="left"
      tooltipId="exampleTooltip"
      parentId="exampleParent">
      <div id="exampleParent" className="my-parent-element-style">
          <p>Here is the content which should be hovered to show the tooltip</p>
      </div>
    </Tooltip>
  </div>);
}

Note the presence of id inside the tooltip body component as well as in the tooltip parent component - this is mandatory for the tooltip positionnment.

Documentation

Usage

Tooltip works as a wrapper for your component and shows the tooltip on mouse hover on its child element. Child element should be wrapper by a div with a unique id field, named parentId. The tooltip content is passed as a propery to the Tooltip component. The tooltip wrapper component should also have an id named tooltipId.

Tooltip component takes following properties:

  • tooltip: React element, required. The component that will be rendered as a tooltip. The high order component of this property should have an id name tooltipId. Also, you can pass the onShow and onHide callbacks that would be called when the tooltip will be shown or hidden. Each of this callbacks will tak an rerender frunction that, when called, will rerender the whole tooltip component.
  • parentId: String, required. The id that will be used to query the tooltip parent DOM element.
  • tooltipId: String, required. The id that will be used to query the tooltip content DOM element.
  • placement: String. Can be "top", "bottom", "left", "right".

FAQs

Package last updated on 15 Nov 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts