import { OverlayTrigger, Tooltip } from 'react-bootstrap';

const MyTooltip = () => (
  <Tooltip>
    This is a tooltip!
  </Tooltip>
);

const MyComponent = () => (
  <OverlayTrigger placement="top" overlay={MyTooltip}>
    <button>Hover me for a tooltip</button>
  </OverlayTrigger>
);

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

react.tar.gz

How to display Tooltip in React Bootstrap

Use OverlayTrigger and Tooltip components from React Bootstrap to easily integrate tooltips in React applications.

How to display Tooltip in React Bootstrap

Implementation

Install React Bootstrap

Import required components

Define the tooltip content

Wrap target element with OverlayTrigger

Output

Conclusion