How to insert close button in popover for Bootstrap

Question

JS      function          example   popover       placement   bottom       html   true       title     lt span class  text-info  gt  lt strong gt title lt  strong gt  lt  span gt   lt button type  button  id  close  class  close  gt  amp times  lt  button gt        content    test            html   click function             close   popover  hide                HTML    lt button type  button  id  example  class  btn btn-primary   gt  lt  button gt    i m write your code isn t show your popup   anyone come across this problem

User · Answer

FWIW  here s the generic solution that I m using   I m using Bootstrap 3  but I think the general approach should work with Bootstrap 2 as well     The solution enables popovers and adds a  close  button for all popovers identified by the  rel  popover   tag using a generic block of JS code   Other than the  standard  requirement that there be a rel  popover  tag  you can put an arbitrary number of popovers on the page  and you don t need to know their IDs -- in fact they don t need IDs at all   You do need to use the  data-title  HTML tag format to set the title attribute of your popovers  and have data-html set to  true    The trick that I found necessary was to build an indexed map of references to the popover objects   po map     Then I can add an  onclick  handler via HTML that references the popover object via the index that JQuery gives me for it   p list   index    popover   toggle        That way I don t need to worry about the ids of the popover objects  since I have a map of references to the objects themselves with a JQuery-provided unique index   Here s the javascript   var po map   new Object    function enablePopovers           rel  popover     each function index        var po   this       po map index  po      po attr  data-title  po attr  data-title          lt button id  popovercloseid  title  close  type  button  class  close  onclick  po map   index    popover   toggle     gt  amp times  lt  button gt         po popover                document  ready function     enablePopovers         this solution let me easily put a close button on all the popovers all across my site

User · Answer

I needed to find something that would work for multiple popovers and in Bootstrap 3   Here s what I did   I had multiple elements I wanted to have a popover work for  so I didn t want to use ids   The markup could be    lt button class  btn btn-link foo  type  button  gt Show Popover 1 lt  button gt   lt button class  btn btn-link foo  type  button  gt Show Popover 2 lt  button gt   lt button class  btn btn-link foo  type  button  gt Show Popover 3 lt  button gt    The content for the save and close buttons inside the popover   var contentHtml           lt div gt              lt button class  btn btn-link cancel  gt Cancel lt  button gt              lt button class  btn btn-primary save  gt Save lt  button gt          lt  div gt    join   n      and the javascript for all 3 buttons   This method works when the container is the default not attached to body       foo   popover       title   Bar       html  true      content  contentHtml      trigger   manual     on  shown bs popover   function          var  popup     this         this  next   popover   find  button cancel   click function  e             popup popover  hide                  this  next   popover   find  button save   click function  e             popup popover  hide                  When the container is attached to  body   Then  use the aria-describedby to find the popup and hide it       foo   popover       title   Bar       html  true      content  contentHtml      container   body       trigger   manual     on  shown bs popover   function  eventShown        var  popup             eventShown target  attr  aria-describedby          popup find  button cancel   click function  e             popup popover  hide                 popup find  button save   click function  e             popup popover  hide

User · Answer

I have struggle with this one and this is the simplest way to do it  3 lines of js    Add a cross in the title of the popover use the js snippet to show the popover and to close by clicking the header Use a bit of css to make it nice      x000D   x000D    document  ready function     x000D       This is to overwrite the boostrap default and show it allways x000D        myPopUp   popover  show    x000D       This is to destroy the popover when you click the title x000D        popover-title   click function    x000D          myPopUp   popover  destroy    x000D        x000D      x000D   import  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css   x000D   x000D     Just to align my example    x000D   btn   x000D    margin  90px auto  x000D    margin-left  90px  x000D    x000D   x000D     Styles for header    x000D   popover-title   x000D    border  0  x000D    background  transparent  x000D    cursor  pointer  x000D    display  inline-block  x000D    float  right  x000D    text-align  right   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D       x000D   lt button id  myPopUp  class  btn btn-success  data-toggle  popover  data-placement  top  data-title      data-content  lorem ipsum content  gt My div or button or something with popover lt  button gt    x000D    x000D   x000D   x000D

User · Answer

Sticky on hover  HTML    lt a href  javascript    data-toggle  popover  data-content  Vivamus sagittis lacus vel augue laoreet rutrum faucibus   title  Lorem Ipsum  gt     lt  a gt    Javascript       data-toggle popover    hover function e      if       popover   is   visible             var el   this          el  popover  show              popover  gt  h3   append   lt span class  close icon icon-remove  gt  lt  span gt                             find   close   on  click   function e                                e preventDefault                                  el  popover  hide

User · Answer

I found other answers were either not generic enough  or too complicated  Here is a simple one that should always work  for bootstrap 3        data-toggle  popover     each function          var button     this       button popover   on  shown bs popover   function             button data  bs popover   tip   find   data-dismiss  popover     on  click   function                  button popover  toggle                              Then just add attribute data-dismiss  popover  in your close button  Also make sure not to use popover  hide   elsewhere in your code as it hides the popup but doesn t properly sets its internal state in bootstrap code  which will cause issues next time you use popover  toggle

User · Answer

Put this in your title popover constructor       lt button class  btn btn-danger btn-xs pull-right  onclick    this  parent   parent   parent   hide    gt  lt span class  glyphicon glyphicon-remove  gt  lt  span gt  lt  button gt some text       to get a small red  x  button on top-right corner        data-toggle popover    popover  title that string here

User · Answer

I found the code below very useful  taken from https   www emanueletessore com twitter-bootstrap-popover-add-close-button         data-toggle  popover     popover     title  function        return   this  data  title     lt span class  close  style  margin-top  -5px  gt  amp times  lt  span gt           on  shown bs popover   function e     var popover     this       this  parent   find  div popover  close   on  click   function e       popover popover  hide

User · Answer

You need to make the markup right   lt button type  button  id  example  class  btn btn-primary  gt example lt  button gt    Then  one way is to attach the close-handler inside the element itself  the following works      document  ready function             example   popover           placement   bottom           html   true           title     lt span class  text-info  gt  lt strong gt title lt  strong gt  lt  span gt                      lt button type  button  id  close  class  close  onclick     amp quot  example amp quot   popover  amp quot hide amp quot     gt  amp times  lt  button gt            content    test

User · Answer

function           example   popover       placement   bottom       html   true       title     lt span class  text-info  gt  lt strong gt title   lt  strong gt  lt  span gt   lt button type  button  id  close  class  close  gt  amp times  lt  button gt  lt  span gt        content    test            document  on  click     close   function  evente            example   popover  hide                close   click function event            example   popover  hide                lt button type  button  id  example  class  btn btn-primary   gt click lt  button gt

User · Answer

lt script type  text javascript   src  https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt       lt script type  text javascript  src  jquery popover-1 1 2 js  gt  lt  script gt    lt script type  text javascript  gt    function         example   popover           placement   bottom           html   true           title     lt span class  text-info  gt  lt strong gt title lt  strong gt  lt  span gt   lt button     type  button  id  close  class  close  gt  amp times  lt  button gt  lt  span gt            content    test               close   click function event         example   popover  hide             lt  script gt    lt button type  button  id  example  class  btn btn-primary   gt click lt  button gt

User · Answer

I ve checked many of the mentioned code examples and for me the approach from Chris is working perfectly  I ve added my code here to have a working demo of it   I have tested it with Bootstrap 3 3 1 and I haven t tested it with an older version  But it s definitely not working with 2 x because the shown bs popover event was introduced with 3 x    x000D   x000D    function     x000D     x000D    var createPopover   function  item  title    x000D                          x000D          var  pop     item   x000D           x000D           pop popover   x000D              placement   right   x000D              title    title      amp nbsp          lt a class  close  href     gt  amp times  lt  a gt    x000D              trigger   click   x000D              html  true  x000D              content  function      x000D                  return     popup-content   html    x000D                x000D             on  shown bs popover   function e    x000D                console log  shown triggered    x000D                  aria-describedby  is the id of the current popover x000D              var current popover           e target  attr  aria-describedby    x000D              var  cur pop     current popover   x000D             x000D               cur pop find   close   click function    x000D                    console log  close triggered    x000D                   pop popover  hide    x000D                  x000D             x000D               cur pop find   OK   click function    x000D                    console log  OK triggered    x000D                   pop popover  hide    x000D                  x000D              x000D   x000D          return  pop  x000D         x000D   x000D       create popover x000D    createPopover   showPopover    Demo popover     x000D   x000D     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  http   maxcdn bootstrapcdn com bootstrap 3 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt button class  btn btn-primary edit  data-html  true  data-toggle  popover  id  showPopover  gt Show lt  button gt  x000D   x000D   lt div id  popup-content  class  hide  gt  x000D       lt p gt Simple popover with a close button  lt  p gt  x000D       lt button class  btn btn-primary OK  gt OK lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Previous examples have two main drawbacks    The  close  button needs in some way  to be aware of the ID of the referenced-element  The need of adding on the  shown bs popover  event  a  click  listener to the close button  which is also not a good solution because of  you would then be adding such listener each time the  popover  is shown    Below is a solution which has not such drawbacks   By the default  the  popover  element is inserted immediately after the referenced-element in the DOM  then notice the referenced-element and the popover are immediate sibling elements   Thus  when the  close  button is clicked  you can simply look for its closest  div popover  parent  and then look for the immediately preceding sibling element of such parent   Just add the following code in the  onclick  handler of the  close button     this  closest  div popover   popover  hide      Example   var genericCloseBtnHtml     lt button onclick    this  closest   div popover    popover   hide      type  button  class  close  aria-hidden  true  gt  amp times  lt  button gt      loginForm popover       placement   auto left       trigger   manual       html  true      title   Alert    genericCloseBtnHtml      content   invalid email and or password

User · Answer

Just wanted to update the answer  As per Swashata Ghosh  the following is a simpler way that worked for moi   HTML    lt button type  button  class  btn btn-primary example  gt Example lt  button gt    JS       example   popover      title  function           return  Popup title                   lt button class  close  gt  amp times lt  button gt             content   Popup content      trigger   hover      html  true          popover button close   click function          this  popover  toggle

User · Answer

I was running into the problem of the tooltip doing some funky stuff when the close button became clicked  To work around this I used a span instead of using a button  Also  when the close button was clicked I would have to click the tooltip twice after it closed in order to get it to open again  To work around this I simply used the  click   method  as seen below    lt span tabindex  0  class  tooltip-close close  gt    lt  span gt       myTooltip   tooltip       html  true      title   Hello From Tooltip       trigger   click              body   on  click     tooltip-close   function  e        else               tooltip   remove                postal-premium-tooltip   click

User · Answer

For anyone who is still a little confused   Here is how it works to toggle the popover after you have gotten it to show  select the same button you used to trigger it and call  popover  toggle   on it    In this case  for closing the popover the code would be       example   popover  toggle

User · Answer

Try this     function          example          popover         title    tile         content    test              on  shown   function e         var popover      this  data  popover             tip   popover tip           var close       lt button type  button  class  close  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt             click function              popover hide                          popover-title    tip  append close                 Rather than adding the button as a string of markup  it s much easier if you have a jQuery wrapped button because then you can bind much more neatly  This is indeed sadly missing from the Bootstrap code  but this workaround works for me  and actually could be expanded to apply to all popovers if desired

User · Answer

This works with multiple popovers and I also added a little big of extra JS to handle the z-index issues that happen with overlapping popovers   http   jsfiddle net erik1337 fvE22   JavaScript   var  elements       my-popover     elements each function          var  element     this         element popover           html  true          placement   top           container     body       This is just so the btn-group doesn t get messed up    also makes sorting the z-index issue easier         content      content   html                 element on  shown bs popover   function  e            var popover    element data  bs popover            if  typeof popover      undefined                 var  tip   popover tip                zindex    tip css  z-index                  tip find   close   bind  click   function                      popover hide                                  tip mouseover function  e                     tip css  z-index   function                          return zindex   1                                                      mouseout function                       tip css  z-index   function                          return zindex                                                              HTML    lt div class  container-fluid  gt       lt div class  well popover-demo col-md-12  gt           lt div class  page-header  gt                lt h3 class  page-title  gt Bootstrap 3 1 1 Popovers with a close button lt  h3 gt            lt  div gt           lt div class  btn-group  gt               lt button type  button  data-title  Popover One  class  btn btn-primary my-popover  gt Click me  lt  button gt               lt button type  button  data-title  Popover Two  class  btn btn-primary my-popover  gt Click me  lt  button gt               lt button type  button  data-title  Popover Three  and the last one gets a really long title    class  btn btn-primary my-popover  gt Click me  lt  button gt           lt  div gt       lt  div gt   lt  div gt   lt div id  content  class  hidden  gt       lt button type  button  class  close  gt  amp times  lt  button gt       lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  lt  p gt   lt  div gt    CSS      Make the well behave for the demo      popover-demo       margin-top  5em      Popover styles      popover  close       position absolute      top  8px      right  10px     popover-title       padding-right  30px

User · Answer

tree span   each function              var  popOverThis     this            popOverThis popover               trigger   click               container   body               placement   right               title   popOverThis html       lt button type  button  id  close  class  close    gt  amp times  lt  button gt                html  true              content   popOverThis parent   children  div chmurka   eq 0  html              on  shown bs popover   function  e                var  element     this                   close   click function                       element trigger  click                                          When you click element and show your popup  next you can raise event shown bs popover where in this you get element in which trigger click to close your popover

User · Answer

As a very simple solution to this  I did the following   1  Add the following CSS    sub step info  popover  after       content url   images cross png        position absolute      display inline-block      top 15px      right 5px      width 15px      text-align center      cursor pointer      2  Set data-trigger  manual  on the popover trigger element   3  Then based on https   github com twbs bootstrap issues 16802       data-trigger  manual     click function           this  popover  toggle       blur function           this  popover  hide           This uses the basis that anywhere on the popover is clickable but by focusing on the cross you ll encourage the behaviour you re after

User · Answer

Here s a  cheat  solution   Follow the usual directions for a dismissable popup   Then slap an  X  in the box with CSS   CSS    popover-header  after       content   X       position  absolute      top  1ex      right  1ex      JQUERY       popover-dismiss   popover       trigger   focus        HTML    lt a data-toggle  popover  data-trigger  focus  tabindex  0   title  Native Hawaiian or Other Pacific Islander  data-content  A person having origins in any of the original peoples of Hawaii  Guam  Samoa  or other Pacific Islands   gt   lt  a gt    Technically speaking that makes it dismissable if someone clicks something other than the  X  but that s not a problem in my scenario at least

User · Answer

This is a working solution based on  Chris answer above  but fixed so that upon subsequence clicks of the trigger element  you don t have to click the element twice    Using  popover  hide  manually messes up bootstraps internal state  as noted in the comments   var closePopover   function eventShown          Set the reference to the calling element    var  caller           this id          Set the reference to the popover    var  popover             eventShown target  attr  aria-describedby                Unbind any pre-existing event handlers to prevent duplicate clicks         popover find   popover-close   off  click               Bind event handler to close button         popover find   popover-close   on  click   function e                  Trigger a click on the calling element  to maintain bootstrap s internal state            caller trigger  click                        popoverTriggerElement   popover      trigger   click      on  shown bs popover   closePopover    Now  you can use the close button without duplicating the click events  and keeping bootstraps internal state in check so it works as expected

User · Answer

The following is what i just used in my project  And hope it can help you    lt a id  manualinputlabel  href     data-toggle  popover  title  weclome to use the sql quer  data-html true  data-original-title  weclome to use the sql query  data-content  content  gt example lt  a gt        manualinputlabel   click function e                      popover-title   append   lt button id  popovercloseid  type  button  class  close  gt  amp times  lt  button gt                     this  popover                            document  click function e             if e target id   popovercloseid                                 manualinputlabel   popover  hide

User · Answer

popover    el popover     html  true   placement   left    content   Do you want to a  lt b gt review lt  b gt    lt a href     onclick    gt Yes lt  a gt   lt a href     gt No lt  a gt     trigger   manual    container   container    to contain the popup code       popover on  shown   function        container find   popover-content a   click  function          popover popover  destroy               popover popover  show

User · Answer

For me this is the simplest solution to add a close button in a popover   HTML        lt button type  button  id  popover  class  btn btn-primary  data-toggle  popover  title  POpover  data-html  true  gt                      Show popover      lt  button gt        lt div id  popover-content  style  display none  gt           lt  --Your content-- gt          lt button type  submit  class  btn btn-outline-primary  id  create btn  gt Create lt  button gt          lt button type  button  class  btn btn-outline-primary  id  close popover  gt Cancel lt  button gt         lt  div gt    Javascript       document addEventListener  click  function e              Close the popover          if  e target id     close popover                        data-toggle popover    popover  hide

User · Answer

The trick is to get the current Popover with  data  bs popover   tip         my trigger   popover   on  shown bs popover   function            Define elements     var current trigger   this       var current popover current trigger data  bs popover   tip            Activate close button     current popover find  button close   click function             current trigger popover  hide

[jquery] How to insert close button in popover for Bootstrap

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to popover