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
– Hmahwish, Commented Aug 3, 2015 at 8:02
Tried.It is not working , if my link is at the top,then tooltip is not visible . — KAJAL TANEJA
– KAJAL TANEJA, Commented Aug 3, 2015 at 8:09

icfantv · Accepted Answer · 2015-08-31 17:28:15Z

0

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.

answered Aug 31, 2015 at 17:28

icfantv

4,6537 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Auto positioning of tooltip using AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related