Search code examples
user-interfacetooltipangular-ui-bootstrap

Move the bottom tip of a tooltip

I have this particular case of an uib-tooltip:

enter image description here

As it can be seen here, the icon that shows the tooltip is much more on the right while the black triangle under the tooltip is on the middle of it.

I was wondering if it is a way to move that triangle to be right above the icon. Is this possible?

Solution

  • Have you tried tooltip-placement option?

    For your example, I would guess that tooltip-placement="top-right" should do what you'd like.

    var test = angular.module('test', ['ui.bootstrap']);

angular.bootstrap(document.documentElement, [test.name]);
    div.wrapper {
  margin-top: 50px;
}
span {
  margin-left: 50px;
  cursor: default;
}
.adjusted {
  background-color: lightblue;
}
.default {
  background-color: lightgrey;
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://origin2.jsdelivr.net/angularjs/1.5.0/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap-tpls.js"></script>
  <link rel="stylesheet" href="https://origin2.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.css" />
</head>


<body>
 <div id="chart"></div>
  <div class="wrapper">
  <span uib-tooltip="Default placement"
        class="default">TOP default tooltip
  </span>
  <span uib-tooltip="Placement adjusted."
        tooltip-placement="top-right"
        class="adjusted">
        TOP-RIGHT tooltip
  </span>
</div>
</body>

</html>