Demo

npm i ab-ctrl --save

import React, { Component } from 'react';

import ABCtrl from 'ab-ctrl';
import TooltipSingleton from 'ab-ctrl/tooltip/singleton';
import Tooltip from 'ab-ctrl/tooltip';
import Dropdown from 'ab-ctrl/dropdown';
import Popup from 'ab-ctrl/popup';

class Demo extends Component {
  constructor(props, context) {
    super(props, context);
  }
  render() {
    const { value } = this.state;
    return (
      <ABCtrl>
        <ABCtrl.Trigger></ABCtrl.Trigger>
        <ABCtrl.Content></ABCtrl.Content>
      </ABCtrl>
    );
  }
}

<ABCtrl triggerType // string, 'hover|click' interactive // boolean, onActive // function onDeactive // function ignoreBlur // boolean toggleable // boolean

<ABCtrl.Trigger component // react component or tag, default is 'div'

<ABCtrl.Content align // string, 'tl|tc|tr|rt|rc|rb|br|bc|bl|lb|lc|lt' onClick // function => should close on content click or not

</ABCtrl.Content> </ABCtrl.Trigger>

// special usage for singleton tooltip import TooltipSingleton from 'ab-ctrl/tooltip/singleton';

// only once in the whole app

// bottom center