移动工具提示的底部提示

Question

我有一个 uib-tooltip 的特殊情况：

从这里可以看出，显示工具提示的图标在右侧更多，而工具提示下方的黑色三角形在中间。

我想知道是否可以将三角形移动到图标正上方。这可能吗？

Answer 1

您尝试过 tooltip-placement 选项吗？

对于你的例子，我猜 tooltip-placement="top-right" 应该做你想做的事。

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>

移动工具提示的底部提示

Move the bottom tip of a tooltip

user-interface

tooltip

angular-ui-bootstrap