How to use tether - 10 common examples

_initTether(props) {
    // initialize tether with respective elements
    this._tether = new Tether({
      element: this._node,
      target: props.target,
      ...props.options
    })

    // update DOM
    this._update(props)

    this._tetherInitialized = true
  }

import Tether from 'tether';

// We extend tether to hook into the position function in order to expose
// a `position` event on the tether object. Useful for repositioning arrows
// etc. See http://tether.io/advanced/extending_tether/.
Tether.modules.push({
  position(props) {
    this.trigger('position', props);
  },
});

export default Tether;

*
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import Tether from 'tether';

// We extend tether to hook into the position function in order to expose
// a `position` event on the tether object. Useful for repositioning arrows
// etc. See http://tether.io/advanced/extending_tether/.
Tether.modules.push({
  position(props) {
    this.trigger('position', props);
  },
});

export default Tether;

onOpen = (portalNode) => {
    const { align, offset } = this.props
    const [ay,ax,ty,tx] = align.split('').map(a => a && POS[a]).filter(a => a)
    const [oy,ox] = offset.split(' ').map(o => parseInt(o, 10))

    portalNode.classList.add('Dropdown')

    this._tether = new Tether({
      element: portalNode,
      target: this.ref,
      attachment: `${ay} ${ax}`,
      targetAttachment: `${ty} ${tx}`,
      offset: `${oy} ${ox}`,
      constraints: [{
        to: 'window',
        pin: true,
      }],
    })

    portalNode.style.opacity = 1
  }

if (!target) {
    return;
  }

  const rect = target.getBoundingClientRect();
  const overlayReference = getOverlay();

  overlayReference.innerHTML = '';
  overlayReference.style.display = '';
  overlayReference.style.height = `${rect.height}px`;
  overlayReference.style.width = `${rect.width}px`;

  overlayReference.appendChild(getTargetLabel(target, rect));

  tether = new Tether({
    element: overlayReference,
    target,
    attachment: 'top left',
    targetAttachment: 'top left',
  });
};

if (position === 'top') {
            attachment = 'bottom center';
            targetAttachment = "top center";
        } else if (position === 'bottom') {
            attachment = 'top center';
            targetAttachment = "bottom center";
        } else if (position === 'left') {
            attachment = 'center right';
            targetAttachment = "center left";
        } else {
            attachment = 'center left';
            targetAttachment = "center right";
        }

        return new Tether({
            element: element,
            target: target,
            attachment: attachment,
            targetAttachment: targetAttachment
        });
    }

createTether() {
		if (this.tether) {
			this.tether.destroy();
		}

		const target = this.step ? document.getElementById(this.step.props.target) : undefined;

		if (this.step && this.step.props.target && target) {
			this.tether = new Tether({
				target,
				element: this.refs.onboarding,
				attachment: this.step.props.elementAlign || 'middle left',
				targetAttachment: this.step.props.targetAlign || 'middle right',
				offset: this.step.props.offset || '-10px -50px',
			});
		}
		else if (this.tether) {
			this.setState({
				reset: (new Date()).getTime(),
			});
			this.tether = undefined;
		}
	}
	componentDidMount() {

if (id) {
      this._elementParentNode.id = id;
    }

    if (className) {
      this._elementParentNode.className = className;
    }

    if (style) {
      Object.keys(style).forEach(key => {
        this._elementParentNode.style[key] = style[key];
      });
    }

    if (!this._tether) {
      this._tether = new Tether(tetherOptions);
      this._registerEventListeners();
    } else {
      this._tether.setOptions(tetherOptions);
    }

    this._tether.position();
  }

displayTooltip(position, content) {
        if (content) {
            this._tooltipContent = content;
            this._scope.$apply();
            if ($(this._tooltipElement).hasClass('hidden')) {
                $(this._tooltipElement).removeClass('hidden');
            }
            this._tooltipTarget.style.left = `${position.x}px`;
            this._tooltipTarget.style.top = `${position.y}px`;
            if (!this._tetherElement) {
                this._tetherElement = new Tether({
                    target: this._tooltipTarget,
                    element: this._tooltipElement,
                    attachment: 'top left',
                    targetAttachment: 'middle middle',
                    offset: '-25 0'
                });
            }
            this._tetherElement.position();
        }
        else {
            this._tooltipContent = [];
            if (!$(this._tooltipElement).hasClass('hidden')) {
                $(this._tooltipElement).addClass('hidden');
            }
            if (this._tetherElement) {
                this._tetherElement.destroy();

_layerDidMount = (element: HTMLElement) => {
    const target = ReactDOM.findDOMNode(this._search);
    invariant(target instanceof HTMLElement, 'Invalid DOM state');
    const size = target.getBoundingClientRect();
    element.style.width = `${size.width}px`;
    this._tether = new Tether({element, target, ...TETHER_CONFIG});
  };