Auto positioning of tooltip using AngularJS

Question

I want to position my tooltip automatically, like if I am at the top of the browser scrollbar, and there is a link with the tooltip in the first line then the tooltip must be displayed at the bottommid.

Is there any way to do so using angularjs only?

I am using angular-ui-bootstrap

<a href="#" tooltip-template="'tool.html'" tooltip-class="customclass">My template</a>
<style>
    .tooltip.customclass .tooltip-inner {
        color: #414141;
        background-color: #f1f1f1;
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }
    .tooltip.customclass .tooltip-arrow {
        display: none;}
</style>
<script type="text/ng-template" id="tool.html">
    <span>Special Tooltip with <strong>markup</strong></span>
</script>`

you may try tooltip-placement="top" tooltip-append-to-body="true" — Hmahwish, Aug 03 '15 at 08:02
Tried.It is not working , if my link is at the top,then tooltip is not visible . — KAJAL TANEJA, Aug 03 '15 at 08:09

score 0 · Answer 1 · answered Aug 31 '15 at 17:28

We are tracking this via https://github.com/angular-ui/bootstrap/issues/375 and do not have a coded solution at the moment. However, please feel free to subscribe to that issue for updates and also see this link from the above issue for a workaround.

Things may get a little more tricky with Bootstrap 4 as they've added a dependency on the Tether library. We have some more research to do to figure out how this affects our library size if we support it.

Auto positioning of tooltip using AngularJS

1 Answers1