Demo here.
The tooltip is not showing completely,because I think there is no place for it to show,But is there any other way we can make it happen?I cannot change the position to relative and the overflow have to be hidden.
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container-fluid">
<div style="margin-left:40px;border:1px solid;overflow:hidden;position:absolute;width:150px">
<div class="row" style="margin-top:80px;margin-left:50px">
<button class="btn btn-default" tooltip="This tooltip is clipped" tooltip-placement="left">#1</button>
</div>
</div>
</body>
</html>
You can append the tooltip element to the document's body instead of the containing element.
tooltip-append-to-body $ C (Default: false, Config: appendToBody) - Should the tooltip be appended to '$body' instead of the parent element?
Add this to your button
tooltip-append-to-body="true"