uib-tooltip 没地方显示时显示不全？

Question

演示 here.

tooltip显示不全，因为我觉得没有地方可以显示，但是有什么其他办法可以实现吗？我无法将位置更改为相对位置，必须隐藏溢出.

<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>

Answer 1

您可以将 tooltip element 附加到文档正文而不是包含元素。

tooltip-append-to-body $ C (Default: false, Config: appendToBody) - Should the tooltip be appended to '$body' instead of the parent element?

将此添加到您的按钮

tooltip-append-to-body="true"

Forked demo

uib-tooltip 没地方显示时显示不全？

uib-tooltip is not showing completely when it has no place to display?

html

css

tooltip

angular-ui-bootstrap