1

Is it possible to put html content into a popover? this is the string that i need to put into the popover

HTML

$scope.info="sentence " +
    "<ul>"+
    "<li>first list member</li>"+
        "<ul>"+
        "<li>element of the first list</li>"+
        "</ul>"+
    "</li>"+
    "<li>second element</li>"+
    "<ul>"+
        "<li id=\"infoLi\">element of the second</li>"+
    "</ul>"+
    "<li>third element</li>"+
    "<ul>"+
        "<li id=\"infoLi\">first element of the third</li>"+
        "<li id=\"infoLi\">second element of the third</li>"+
    "</ul>"+       
"</ul></div>"

I have seen in the documentation of angular-ui-popover, that it is possible to set the option of the popover, and seeing around the web I find someone says that it is possible, in this option, to set a parameter HTML to true and get this result.
I have found no sample of that, and i don't know if it is true, my first problem to attempt this is that i didn't understand how to set the options.
A possible solution for me is even to leave a string in the popover but i need to use the new line tag, that i see it doesn't work in the popup content.

EDIT

maybe i wasn't so clear, i'm trying to do that with angular ui and ui bootstrap.

mautrok
  • 961
  • 1
  • 17
  • 41
  • The Bootstrap Docs tell you how to do it: http://getbootstrap.com/javascript/#popovers – Billy Moat Mar 26 '14 at 11:13
  • possible duplicate of [Is it possible to use a div as content for Twitter's Popover](http://stackoverflow.com/questions/8875376/is-it-possible-to-use-a-div-as-content-for-twitters-popover) – Kabb5 Mar 26 '14 at 11:32
  • Billy the question still have no answer, i didn't precise that i want to find a solution in angular UI, not in jquery or something else. – mautrok Mar 26 '14 at 13:07

1 Answers1

1

ok i have found a solution, that as i saw, for the moment it doesn't work for the popover ,while for the tooltip yes.

HTML

<button id="infobtn" tooltip-html-unsafe="<div>first list member
                                         <li>element of the first list</li>
                                         second element
                                         <li id='infoLi'>element of the second</li>
                                         third element
                                         <li id=\"infoLi\">first element of the third</li>
                                         <li id=\"infoLi\">second element of the third</li>
                                         </div>
    "tooltip-trigger="mouseenter">
    <img src="images/info.png"></button>

The tag tooltip-html-unsafe make possible to insert a DIV or anything else is html, in the tooltip content, i have try to use it in the popover too but for some reason it doesn't work. I don't know if the cause was something that i was doing wrong or else, so i decided to use ui.tooltip module and i have resolved the problem.

mautrok
  • 961
  • 1
  • 17
  • 41