feat(Tooltip): enable target element option (#356)

* Ignore intellij and log files.

* Add object type to tooltip target.

Changed the tooltip target property to also allow for DOM elements.

* Fix indents.

* Change tether config to use target retrieved for event listeners.

* Pass getTarget function instead of this._target

Pass getTarget function instead of the target retrieved in
componentDidMount as it is not always available at render.

.gitignore

@@ -3,3 +3,5 @@ node_modules
 /dist
 /build
 /lib
+.idea
+npm-debug.log

docs/lib/Components/TooltipsPage.js

@@ -34,8 +34,11 @@ export default class TooltipsPage extends React.Component {
   // boolean to control the state of the tooltip
   toggle:  PropTypes.func,
   // callback for toggling isOpen in the controlling component
-  target:  PropTypes.string.isRequired,
-  // target div ID, popover is attached to this element
+  target:  PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]).isRequired,
+  // target element or element ID, popover is attached to this element
   tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   // optionally overide tether config http://tether.io/#options
   tetherRef: PropType.function,

src/Tooltip.js

@@ -7,7 +7,10 @@ import { getTetherAttachments, tetherAttachements, mapToCssModules } from './uti
 const { PropTypes } = React;
 const propTypes = {
   placement: React.PropTypes.oneOf(tetherAttachements),
-  target: PropTypes.string.isRequired,
+  target: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]).isRequired,
   isOpen: PropTypes.bool,
   disabled: PropTypes.bool,
   tether: PropTypes.object,
@@ -52,6 +55,7 @@ class Tooltip extends React.Component {
     super(props);
 
     this.addTargetEvents = this.addTargetEvents.bind(this);
+    this.getTarget = this.getTarget.bind(this);
     this.getTetherConfig = this.getTetherConfig.bind(this);
     this.handleDocumentClick = this.handleDocumentClick.bind(this);
     this.removeTargetEvents = this.removeTargetEvents.bind(this);
@@ -65,7 +69,7 @@ class Tooltip extends React.Component {
   }
 
   componentDidMount() {
-    this._target = document.getElementById(this.props.target);
+    this._target = this.getTarget();
     this.addTargetEvents();
   }
 
@@ -114,12 +118,20 @@ class Tooltip extends React.Component {
     return delay;
   }
 
+  getTarget() {
+    const { target } = this.props;
+    if (typeof target === 'object') {
+      return target;
+    }
+    return document.getElementById(target);
+  }
+
   getTetherConfig() {
     const attachments = getTetherAttachments(this.props.placement);
     return {
       ...defaultTetherConfig,
       ...attachments,
-      target: '#' + this.props.target,
+      target: this.getTarget,
       ...this.props.tether
     };
   }

src/__tests__/Tooltip.spec.js

@@ -72,6 +72,25 @@ describe('Tooltip', () => {
     wrapper.detach();
   });
 
+  it('should render with target object', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Tooltip target={document.getElementById('target')} isOpen={isOpen} toggle={toggle}>
+        Tooltip Content
+      </Tooltip>,
+      { attachTo: container }
+    );
+    const instance = wrapper.instance();
+    const tooltips = document.getElementsByClassName('tooltip');
+
+    expect(ReactDOM.findDOMNode(instance)).toBe(null);
+    expect(document.body.querySelectorAll('.tooltip.show').length).toBe(1);
+    expect(target.className.indexOf('bs-tether-target') > -1).toBe(true);
+    expect(tooltips.length).toBe(1);
+    expect(tooltips[0].textContent).toBe('Tooltip Content');
+    wrapper.detach();
+  });
+
   it('should toggle isOpen', () => {
     const wrapper = mount(
       <Tooltip target="target" isOpen={isOpen} toggle={toggle}>