bootstrap tooltip being cut off

Question

I'm trying to add bootstrap tooltips to some icons on a list, but the tooltip is partially hidden by the row height:

What style do I need to add to my code below to have the tooltip hover on top?

<div ng-repeat="item in c.data.list track by $index" class="list-group-item">
      <div class="flex">
        <div style="margin-right:auto;">
          <span class="h4">{{item.short_description}}</span>
          <div>
            <small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">Last Updated: {{item.last_updated}}</span></small>
          </div>
        </div>
        <div class="h4">
          <a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Preview"><i class="fa fa-eye"></i></a>   
          <a class="link" ng-click="" data-toggle="tooltip" data-placement="top" title="Download"><i class="fa fa-download"></i></a>   
        </div>
      </div>
    </div>

Sigurd

https://mcmap.net/q/890406/-twitter-bootstrap-tooltip-directions-not-working. Try initializing the tooltips first? – Unman

can use share some css – Gono

Possible duplicate of Twitter bootstrap tooltip directions not working? – Unman

Can you post a fiddle? – Sabo

Answer 1

I had an issue with tooltips being cut off as well and what worked for me was to set the data-container to 'body'. For example:

<span data-toggle="tooltip" data-placement="bottom" data-html="true" data-container="body" title="bla">

Futures

This works, should be accepted answer. See bootstrap documentation: getbootstrap.com/docs/4.0/components/popovers/… – Reword

THANK YOU SO MUCH!! ^_^ – Profligate