How to use rc-tooltip - 4 common examples

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Tooltip from 'rc-tooltip';
import InfoIcon from '../../assets/images/Info.svg';
import styles from './styles.scss';
import i18n from './i18n';
import BackHeader from '../BackHeader';
import Panel from '../Panel';
import InputField from '../InputField';
import Select from '../DropdownSelect';
import Button from '../Button';
import SaveButton from '../SaveButton';
import IconLine from '../IconLine';

const TooltipCom = typeof Tooltip === 'function' ? Tooltip : Tooltip.default;

export default class AudioSettingsPanel extends Component {
  _isFirefox = false;

  constructor(props) {
    super(props);
    this.state = {
      dialButtonVolume: props.dialButtonVolume,
      dialButtonMuted: props.dialButtonMuted,
      ringtoneVolume: props.ringtoneVolume,
      ringtoneMuted: props.ringtoneMuted,
      callVolume: props.callVolume,
      inputDeviceId: props.inputDeviceId,
      outputDeviceId: props.outputDeviceId,
    };

import ForwardForm from '../ForwardForm';
import ReplyWithMessage from '../ReplyWithMessage';
import ActiveCallButton from '../ActiveCallButton';
import MultiCallAnswerButton from '../MultiCallAnswerButton';

import MessageIcon from '../../assets/images/MessageFill.svg';
import ForwardIcon from '../../assets/images/Forward.svg';
import IgnoreIcon from '../../assets/images/Ignore.svg';
import VoicemailIcon from '../../assets/images/Voicemail.svg';
import AnswerIcon from '../../assets/images/Answer.svg';
import styles from './styles.scss';

import i18n from './i18n';

const TooltipCom = typeof Tooltip === 'function' ? Tooltip : Tooltip.default;

export default class IncomingCallPad extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showForward: false,
      replyMessage: null,
      showReplyWithMessage: false,
      toVoiceMailEnabled: true,
      replyMessageEnabled: true,
    };
    this.onShowForwardChange = (visible) => {
      this.setState({
        showForward: visible,
      });
    };

import InfoIcon from '../../assets/images/Info.svg';

import styles from './styles.scss';
import i18n from './i18n';

import SpinnerOverlay from '../SpinnerOverlay';
import BackHeader from '../BackHeader';
import Panel from '../Panel';
import Switch from '../Switch';
import IconField from '../IconField';
import InputField from '../InputField';
import TextInput from '../TextInput';
import DropdownSelect from '../DropdownSelect';
import SaveButton from '../SaveButton';

const TooltipCom = typeof Tooltip === 'function' ? Tooltip : Tooltip.default;
class CallingSettingsContent extends Component {
  constructor(props) {
    super(props);
    this.defaultRingoutPrompt = props.defaultRingoutPrompt;
    this.state = {
      callWith: props.callWith,
      ringoutPrompt: props.ringoutPrompt,
      myLocation: props.myLocation,
    };
  }

  componentWillReceiveProps(newProps) {
    if (newProps.callWith !== this.props.callWith) {
      this.setState({
        callWith: newProps.callWith,
      });

Object.keys(placementMap).forEach(function (key) {
    placementMap[key] = config.arrowPointAtCenter ? _extends(_extends({}, placementMap[key]), {
      overflow: getOverflowOptions(autoAdjustOverflow),
      targetOffset: targetOffset
    }) : _extends(_extends({}, _placements.placements[key]), {
      overflow: getOverflowOptions(autoAdjustOverflow)
    });
    placementMap[key].ignoreShake = true;
  });
  return placementMap;