HTML inside Twitter Bootstrap popover

Question

I am trying to display HTML inside a bootstrap popover  but somehow it s not working  I found some answers here but it won t work for me  Please let me know if I m doing something wrong    lt script gt      function            rel popover    popover          html   true         content  function             return     popover content wrapper   html                           lt  script gt    lt li href     id  example  rel  popover  data-content    data-original-title  A Title  gt       popover  lt  li gt    lt div id  popover content wrapper  style  display  none  gt       lt div gt This is your div content lt  div gt   lt  div gt

User · Answer

You can use the popover event  and control the width by attribute  data-width    x000D   x000D      data-toggle  popover-huongdan     popover   html  true     x000D      data-toggle  popover-huongdan     on  shown bs popover   function      x000D      var width     this  attr  data-width      undefined   276   parseInt   this  attr  data-width     x000D         div id  popover    css  max-width   width   x000D      x000D    lt a class  position-absolute  href  javascript void 0    data-toggle  popover-huongdan  data-trigger  hover  data-width  500  title  title-popover  data-content  html-content-code  gt  x000D    lt i class  far fa-question-circle  gt  lt  i gt  x000D    lt  a gt  x000D   x000D   x000D

User · Answer

This is a slight modification on Jack s excellent answer   The following makes sure simple popovers  without HTML content  remain unaffected   JavaScript     function            data-toggle popover  not  data-popover-content     popover            data-toggle popover  data-popover-content    popover           html   true          content  function               var content     this  attr  data-popover-content              return   content  children   popover-body   html                       title  function               var title     this  attr  data-popover-content              return   title  children   popover-heading   html

User · Answer

I really hate to put long HTML inside of the attribute  here is my solution  clear and simple  replace   with whatever you want     lt a class  btn-lg popover-dismiss  data-placement  bottom  data-toggle  popover  title  Help  gt       lt h2 gt Some title lt  h2 gt      Some text  lt  a gt    then  var help       popover-dismiss    help attr  data-content   help html    text        popover  trigger   hover   html  true

User · Answer

Add this to the bottom of your popper js file   Popper Defaults modifiers computeStyle gpuAcceleration     window devicePixelRatio  lt  1 5  amp  amp   Win  test navigator platform      Source  https   github com twbs bootstrap issues 23590

User · Answer

You only need put data-html  true  in the link popover  Is gonna work

User · Answer

You need to create a popover instance that has the html option enabled  place this in your javascript file after the popover JS code        popover-with-html   popover   html   true

User · Answer

This is an old question  but this is another way  using jQuery to reuse the popover and to keep using the original bootstrap data attributes to make it more semantic  The link  lt a href  quot   quot  rel  quot popover quot  data-trigger  quot focus quot  data-popover-content  quot  popover quot  gt     Show it   lt  a gt   Custom content to show  lt  -- Let s show the Bootstrap nav on the popover-- gt   lt div id  quot list-popover quot  class  quot hide quot  gt       lt ul class  quot nav nav-pills nav-stacked quot  gt           lt li gt  lt a href  quot   quot  gt Action lt  a gt  lt  li gt           lt li gt  lt a href  quot   quot  gt Another action lt  a gt  lt  li gt           lt li gt  lt a href  quot   quot  gt Something else here lt  a gt  lt  li gt           lt li gt  lt a href  quot   quot  gt Separated link lt  a gt  lt  li gt       lt  ul gt   lt  div gt   Javascript     rel  quot popover quot     popover       container   body       html  true      content  function              var clone       this  data  popover-content    clone true  removeClass  hide            return clone             Fiddle with complete example  http   jsfiddle net tomsarduy 262w45L5

User · Answer

Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-content and use it like this   HTML    lt  -- Popover  1 -- gt   lt a class  btn btn-primary  data-placement  top  data-popover-content   a1  data-toggle  popover  data-trigger  focus  href     tabindex  0  gt Popover Example lt  a gt    lt  -- Content for Popover  1 -- gt   lt div class  hidden  id  a1  gt     lt div class  popover-heading  gt      This is the heading for  1    lt  div gt      lt div class  popover-body  gt      This is the body for  1    lt  div gt   lt  div gt    JS     function            data-toggle popover    popover           html   true          content  function               var content     this  attr  data-popover-content              return   content  children   popover-body   html                       title  function               var title     this  attr  data-popover-content              return   title  children   popover-heading   html                            This can be useful when you have a lot of html to place into your popovers   Here is an example fiddle  http   jsfiddle net z824fn6b

User · Answer

you can use attribute data-html  true      lt a href     id  example   rel  popover       data-content   lt div gt This  lt b gt is lt  b gt  your div content lt  div gt        data-html  true  data-original-title  A Title  gt popover lt  a gt

User · Answer

You cannot use  lt li href  quot   quot  since it belongs to  lt a href  quot   quot  that s why it wasn t working  change it and it s all good  Here is working JSFiddle which shows you how to create bootstrap popover  Relevant parts of the code is below  HTML   lt  --  Note  Popover content is read from  quot data-content quot  and  quot title quot  tags  -- gt   lt a tabindex  quot 0 quot     class  quot btn btn-lg btn-primary quot      role  quot button quot      data-html  quot true quot      data-toggle  quot popover quot      data-trigger  quot focus quot      title  quot  lt b gt Example popover lt  b gt  - title quot      data-content  quot  lt div gt  lt b gt Example popover lt  b gt  - content lt  div gt  quot  gt Example popover lt  a gt   JavaScript    function           Enables popover        quot  data-toggle popover  quot   popover         And by the way  you always need at least    quot  data-toggle popover  quot   popover    to enable the popover  But in place of data-toggle  quot popover quot  you can also use id  quot my-popover quot  or class  quot my-popover quot   Just remember to enable them using e g     quot  my-popover quot   popover    in those cases  Here is the link to the complete spec  Bootstrap Popover Bonus  If for some reason you don t like or cannot read content of a popup from the data-content and title tags  You can also use e g  hidden divs and a bit more JavaScript  Here is an example about that

User · Answer

I used a pop over inside a list  Im giving an example via HTML   lt a type  button  data-container  body  data-toggle  popover  data-html  true  data-placement  right  data-content   lt ul class  nav  gt  lt li gt  lt a href     gt hola lt  li gt  lt li gt  lt a href     gt hola2 lt  li gt  lt  ul gt   gt

User · Answer

You can change the  template popover popover html  in file  ui-bootstrap-tpls-0 11 0 js  Write   bind-html-unsafe  instead of  ng-bind   It will show all popover with html   its unsafe html  Use only if you trust the html

[html] HTML inside Twitter Bootstrap popover

Examples related to html

Examples related to twitter-bootstrap

Examples related to popover