Sunday 15 August 2010

angularjs - Angular UI tooltip from element -


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

Something like this:

  & lt; A data-tooltip-id = "tooltip 1" href = "#" & gt; Show tooltips & lt; / A & gt; & Lt; P id = "tooltip1" & gt; Hello, & lt; Em> World & lt; / Em>! & Lt; / P & gt;  

Angular UI tooltips are very much what you are trying to accomplish Seems simple.

But this is definitely worth achieving. If you are ready to override core modules and some of the instructions in the Collier UI Library as if it is indicated you can do very well.

But if you are looking for a quick and easy solution - I recommend using the qTip (). This is a very powerful tooltip library.

In the worst case scenario, you can use your JS and put your own style / angle UI tooltip style above it.

You can do something like this -

  $ ('a'). Qtip ({content: {text: $ ('# tooltip1'). Html ()}});  
  & lt; Link href = "http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel = "stylesheet" /> & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js" & gt; & Lt; / Script & gt; & Lt; Data-tooltip-id = "tooltip 1" href = "#" tooltip = "test" & gt; Show tooltips & lt; / A & gt; & Lt; P id = "tooltip1" style = "display: none;" & Gt; Hello, & lt; Em> World & lt; / Em>! & Lt; / P & gt;  


No comments:

Post a Comment