1

I am currently using Draftjs to decorate some key words, this turns them into spans. Within my span i'd like to use the Bootstrap 4 popover functionality. I have added a simple line and it did not work, the libraries etc are all added.

handleClick = (e) => {
  e.preventDefault();
    alert(e.target);
};

ColorComponent = (props) => {
  return (
    <span onClick={this.handleClick} style={this.styles.word}>{props.children}</span>
  );
};

On click i want to be able to see a popover appear like shown here on the bootstrap 4 page. I've included the links below. I dont want to use independent libraries, i want to code this directly and avoid having to use a plugin

https://v4-alpha.getbootstrap.com/components/popovers/

NewScientists
  • 1,192
  • 4
  • 13
  • 28
  • There are react libraries that help you with this. One of them is [react-bootstrap](https://react-bootstrap.github.io/) and there are many topics here on SO for the [tag:react-bootstrap] tag. – Chris Jun 12 '17 at 11:38
  • I think you missed up the data-toggle attribute. Also the click handler must contain $('#element').popover('show') – zied hajsalah Jun 12 '17 at 12:02
  • React-bootstrap uses bootstrap 3 if i'm not mistaken – Nevosis Jun 12 '17 at 12:13

1 Answers1

0

First you need to add the data-toggle, title and data-content attributes, then initialize the popover by calling the popover() method on the element.

See this answer for explanation and example code for a React, Typescript, Webpack stack: https://stackoverflow.com/a/46801561/924597

Shorn
  • 19,077
  • 15
  • 90
  • 168