JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<span class="container">
    <a class="tt" title="IamalongtooltipandIdoyyyyntbreakcorrectlyyyyyyyy">Hover me!</a>
</span>

CSS

body { background-color: #ccc; }
.tooltip-inner {
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

$(function() {
    $('.tt').tooltip({ placement: 'auto top' ,
                      container: 'body'
                     });
});