如何将全宽度引导工具提示居中

Question

我的网页上有多个工具提示很长，所以我将工具提示宽度设为80％，而不是默认的200px。这样工作正常，但工具提示不在左边，右边有很大的间隙。我试着在工具提示div的左边添加边距而没有运气，我还试图用一个容器包装工具提示div（在jquery中） HTML：

 <a href="#" style="color:#6D6E71;" data-toggle="tooltip" title="tooltip text">hover over me</a>

js：

 <script>
    $(document).ready(function(){  
        $('div.tooltip').wrap('<div class="container"></div>');
    });
    </script>

的CSS：

.tooltip-inner {
    max-width: 100%!important;
    /* If max-width does not work, try using width instead */
    width: 80%!important; 
    font-size: 14px;
    line-height: 24px;
    padding: 10px;
    left: 15%!important;
    display: inline-block!important;
}

.tooltip.top {
  padding: 5px 0;
  margin-top: -15px;
}

但这也行不通。有没有人有运气让工具提示居中而不是被冲到屏幕的左侧？