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

Issue

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>

Solution

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"

Forked demo

Answered By – svarog

Answer Checked By – Clifford M. (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published