Is it possible to use a div as content for Twitter s Popover

Question

I am using twitter s bootstrap s popover here   Right now  when i scroll over the popover text a popover appears with just text from the  lt a gt  s data-content attribute   I was wondering if there was anyway to put a  lt div gt  inside the popover   Potentially  I would like to use php and mysql in there  but if i could get a div to work i think i can figure out the rest  I tried setting data-content to a div ID  but it didnt work   HTML    lt a class  danger      data-placement  above      rel  popover      data-content   PopupDiv      href     gt Click lt  a gt

User · Answer

In addition to other replies  If you allow html in options you can pass jQuery object to content  and it will be appended to popover s content with all events and bindings  Here is the logic from source code    if you pass a function it will be called to unwrap content data  if html is not allowed content data will be applied as text if html allowed and content data is string it will be applied as html otherwise content data will be appended to popover s content container       popover-button   popover       content      popover-content        html  true      title   Popover title

User · Answer

Late to the party   Building off the other solutions   I needed a way to pass the target DIV as a variable   Here is what I did   HTML for Popover source  added a data attribute data-pop that will hold value for destination DIV id or class     lt div data-html  true  data-toggle  popover  data-pop  popper-content  class  popper  gt       HTML for Popover content  I am using bootstrap hide class     lt div id  popper-content  class  hide  gt Content goes here lt  div gt    Script       popper   popover   placement  popover placement  container   div page-content   html  true  trigger   hover   content  function          var pop dest     this  attr  data-pop          console log plant       return       pop dest  html

User · Answer

here is an another example   lt a   data-container    body  data-toggle    popover  data-placement    left       data-content     amp lt img src   lt  php echo baseImgUrl    row1 2    gt   width  250  height  100   amp gt  amp lt div amp gt  amp lt h3 amp gt   lt  php echo  row1  1     gt  amp lt h3 amp gt   amp lt p amp gt   amp lt span amp gt  lt  php echo  countsss   gt videos  amp lt  span amp gt   amp lt span amp gt  lt  php echo  countsss1   gt  followers amp lt  span amp gt   amp lt  p amp gt  amp lt  div amp gt   lt  php echo  row1  4     gt     amp lt hr amp gt  amp lt div amp gt   amp lt span amp gt   amp lt button type  button  class  btn btn-default pull-left green  amp gt Follow   amp lt  button amp gt    amp lt  span amp gt   amp lt span amp gt   amp lt button type  button  class  btn btn-default pull-left green  amp gt  Go to channel page amp lt  button amp gt     amp lt  span amp gt  amp lt span amp gt   amp lt button type  button  class  btn btn-default pull-left green  amp gt Close   amp lt  button amp gt    amp lt  span amp gt     amp lt  div amp gt   gt    lt  php echo  row1  1     gt     lt  a gt

User · Answer

Another alternate method if you wish to just have look and feel of pop over  Following is the method  Offcourse this is a manual thing  but nicely workable     HTML - button   lt button class  btn btn-info btn-small  style  margin-right 5px   id  bg  data-placement  bottom  rel  tooltip  title  Background Image  gt  lt i class  icon-picture icon-white  gt  lt  i gt  lt  button gt    HTML - popover   lt div class  bgform popover fade bottom in  gt               lt div class  arrow  gt  lt  div gt                     your code here          lt  div gt    JS      bg   click function                bgform   slideToggle

User · Answer

First of all  if you want to use HTML inside the content you need to set the HTML option to true       danger   popover   html   true      Then you have two options to set the content for a Popover   Use the data-content attribute  This is the default option  Use a custom JS function which returns the HTML content    Using data-content  You need to escape the HTML content  something like this    lt a class  danger  data-placement  above      data-content   amp lt div amp gt This is your div content amp lt  div amp gt       title  Title  href     gt Click lt  a gt    You can either escape the HTML manually or use a function  I don t know about PHP but in Rails we use  html safe    Using a JS function  If you do this  you have several options  The easiest I think is to put your div content hidden wherever you want and then write a function to pass its content to popover  Something like this     document  ready function          danger   popover        html   true      content  function           return     popover content wrapper   html                      And then your HTML looks like this    lt a class  danger  data-placement  above  title  Popover Title  href     gt Click lt  a 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    Hope it helps   PS  I ve had some troubles when using popover and not setting the title attribute    so  remember to always set the title

User · Answer

Why so complicated  just put this    data-html  true

User · Answer

All of these answers miss a very important aspect     By using  html or innerHtml or outerHtml you are not actually using the referenced element   You are using a copy of the element s html   This has some serious draw backs    You can t use any ids because the ids will be duplicated  If you load the contents every time that the popover is shown you will lose all of the user s input    What you want to do is load the object itself into the popover   https   jsfiddle net shrewmouse ex6tuzm2 4   HTML    lt h1 gt  Test  lt  h1 gt    lt div gt  lt button id  target  gt click me lt  button gt  lt  div gt    lt  -- This will be the contents of our popover -- gt   lt div class   content  id  blah  gt   lt h1 gt Extra Stuff lt  h1 gt   lt input type  number  placeholder  number   gt   lt  div gt    JQuery     document  ready function             We don t want to see the popover contents until the user clicks the target         If you don t hide  blah  first it will be visible outside of the popover                 blah   hide            Initialize our popover                target   popover           content      blah       set the content to be the  blah  div         placement   bottom           html  true                The popover contents will not be set until the popover is shown   Since we don t         want to see the popover when the page loads  we will show it then hide it                 target   popover  show            target   popover  hide            Now that the popover s content is the  blah  dive we can make it visisble again                 blah   show

User · Answer

Building on j  vi s answer  this can be done without IDs or additional button attributes like this   http   jsfiddle net isherwood E5Ly5    lt button class  popper  data-toggle  popover  gt Pop me lt  button gt   lt div class  popper-content hide  gt My first popover content goes here  lt  div gt    lt button class  popper  data-toggle  popover  gt Pop me lt  button gt   lt div class  popper-content hide  gt My second popover content goes here  lt  div gt    lt button class  popper  data-toggle  popover  gt Pop me lt  button gt   lt div class  popper-content hide  gt My third popover content goes here  lt  div gt       popper   popover       container   body       html  true      content  function              return   this  next   popper-content   html

[twitter-bootstrap] Is it possible to use a div as content for Twitter's Popover

Examples related to twitter-bootstrap

Examples related to popover