JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br> 
<a class="popover-tooltip" title="Test Başlığı" data-content="Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği Test İçeriği ">
    Popover aç 
</a>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br>

JavaScript

$(function () {
  $('.popover-tooltip').popover({
  	placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
  });
});