Angular UI tooltip from element

Question

Is it possible to have an Angular UI tooltip from an element, not from an attribute value?

Something like:

<a data-tooltip-id="tooltip1" href="#">Show the tooltip</a>
<p id="tooltip1">Hello, <em>world</em>!</p>

Answer 1

Angular UI tooltips seem pretty simplistic for what you're trying to accomplish.

But it's definitely achievable. If you're willing to override some of the core modules and directives in the Angular UI library like it's been pointed out here. You can do so very well.

But if you're looking for a quick and easy solution - I'd recommend using qTip (http://qtip2.com/). It's a pretty powerful tooltip library.

Worst case, you can just use their JS and have your own style / Angular UI tooltip style on top of it.

You can do something like this -

$('a').qtip({
  content: {
    text: $('#tooltip1').html()
  }
});

<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>

<a data-tooltip-id="tooltip1" href="#" tooltip="test">Show the tooltip</a>
<p id="tooltip1" style="display:none;">Hello, <em>world</em>!</p>