JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div style="background: black; width: 100%; height: 100%">
  <div style="background:white" ;>
    <p>
      This is a big random text with that contains a link that spans over multiple lines and <a id="tooltip-link3" href="#" data-toggle="tooltip" title="Some tooltip text!">the tooltip has an incorrect position on the right</a>
    </p>
    <p>
      This is a big random text with that contains a link that spans over multiple lines and <a id="tooltip-link4" href="#" data-toggle="tooltip" title="Some tooltip text!">the tooltip has an incorrect position on the left</a>
    </p>

    <p>
      This is a big random text with that contains a link that spans over multiple lines <a id="tooltip-link1" href="#" data-toggle="tooltip" title="Some tooltip text!">however the position is correctly on the left of the text</a>
    </p>

    <p>
      This is a big random text with that contains a link that spans over multiple lines <a id="tooltip-link2" href="#" data-toggle="tooltip" title="Some tooltip text!">however the position is correctly on the right of the text</a>
    </p>
  </div>
</div>

CSS

.tooltip.textright {
  padding: 0 5px;
  margin-left: 3px;
}

.tooltip.textleft {
  padding: 0 5px;
  margin-left: -3px;
}

.tooltip.textleft .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}

.tooltip.textright .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}

JavaScript

$.fn.tooltip.Constructor.prototype.enter = function(obj) {
  var self = obj instanceof this.constructor ?
    obj : $(obj.currentTarget).data('bs.' + this.type)

  if (!self) {
    self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
    $(obj.currentTarget).data('bs.' + this.type, self)
  }

  if (obj instanceof $.Event) {
    self.inState[obj.type == 'focusin' ? 'focus' : 'hover'] = true
    var mousePos = {
      x: -1,
      y: -1
    };
    mousePos.x = obj.pageX;
    mousePos.y = obj.pageY;
    window.mousePos = mousePos;
  }

  if (self.tip().hasClass('in') || self.hoverState == 'in') {
    self.hoverState = 'in'
    return
  }

  clearTimeout(self.timeout)

  self.hoverState = 'in'

  if (!self.options.delay || !self.options.delay.show) return self.show()

  self.timeout = setTimeout(function() {
    if (self.hoverState == 'in') self.show()
  }, self.options.delay.show)
}


$.fn.tooltip.Constructor.prototype.show = function() {
  var e = $.Event('show.bs.' + this.type)

  if (this.hasContent() && this.enabled) {
    this.$element.trigger(e)

    var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
    if (e.isDefaultPrevented() || !inDom) return
    var that = this

    var $tip = this.tip()

    var tipId = this.getUID(this.type)

    this.setContent()
    $tip.attr('id', tipId)
    this.$element.attr('aria-describedby', tipId)

    if (this.options.animation) $tip.addClass('fade')

    var placement = typeof this.options.placement == 'function' ?
      this.options.placement.call(this, $tip[0], this.$element[0]) :
      this.options.placement

    var isTextPlacement = /textleft|textright/.test(placement)
    if (isTextPlacement) {
      $tip.removeClass("textright");
      $tip.removeClass("textleft");
    }

    //390 is hardcoded value which is the max size of the tooltip, you may adjust to your case
    if (placement == 'textleft' && window.mousePos.x < 390) {
     ...