Menu
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>
502
How to position the tooltip - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second.
To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.
Here is how to do it with position: absolute and relative . On the container, set position: relative , and display: table (shrink to fit). For the position: absolute tooltip, set top: 0 , and left: 100% (moves to the right edge of the relative container).
Tooltips are just cosmetic though. Not css style but just a bit of JS to change how a title attribute is presented. The "rel" attribute is meant to be used to tell a bot (such as google) about the nature of a link.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
