Bootstrap control with multiple data-toggle

Question

Is there a way to assign more than one event to a bootstrap control via  data-toggle   For example  lets say I want a button that has a  tooltip  and a  button  toggle assigned  to it  Tried data-toggle  tooltip button   but only the tooltip worked   EDIT   This is easily  workaroundable  with       newbtn   toggleClass  active   toggleClass  btn-warning   toggleClass  btn-success

User · Answer

I use href to load the modal and leave data-toggle for the tooltip    lt a      data-toggle  tooltip      data-placement  top      title  My Tooltip text       href  javascript     id   modal  show      gt     lt  a gt

User · Answer

Since Bootstrap forces you to initialize tooltips only through Javascript  I changed data-toggle  tooltip   since it s useless then  to class  bootstrap-tooltip  and used this Javascript to initialize my tooltips       bootstrap-tooltip   tooltip      And so I was free to use the data-toggle attribute for something else  e g  data-toggle  button

User · Answer

HTML  ejs dianmic web page   this is a table list of all users and from nodejs generate the table  NodeJS provide dinamic  quot  lt    user id   gt  quot   simply change for any value like  quot 54 quot   lt span type  quot button quot  data-href   admin user del  lt    user id   gt   class  quot item quot    data-toggle  quot modal quot  data-target  quot  confirm delete quot  gt       lt div data-toggle  quot tooltip quot  data-placement  quot top quot  title  quot Delete quot  data-       toggle  quot modal quot  gt          lt i class  quot zmdi zmdi-delete quot  gt  lt  i gt        lt  div gt   lt  span gt     lt div class  quot modal fade quot  id  quot confirm delete quot  tabindex  quot -1 quot  role  quot dialog quot  aria-labelledby  quot staticModalLabel quot  aria-hidden  quot true quot           data-backdrop  quot static quot  gt     lt div class  quot modal-dialog modal-sm quot  role  quot document quot  gt       lt div class  quot modal-content quot  gt         lt div class  quot modal-header quot  gt           lt h5 class  quot modal-title quot  id  quot staticModalLabel quot  gt Static Modal lt  h5 gt           lt button type  quot button quot  class  quot close quot  data-dismiss  quot modal quot  aria-label  quot Close quot  gt   lt span aria-hidden  quot true quot  gt  amp times  lt  span gt   lt  button gt         lt  div gt         lt div class  quot modal-body quot  gt           lt p gt  This is a static modal  backdrop click will not close it   lt  p gt         lt  div gt         lt div class  quot modal-footer quot  gt           lt button type  quot button quot  class  quot btn btn-secondary quot  data-dismiss  quot modal quot  gt Cancel lt  button gt             lt form method  quot POST quot  class  quot btn-ok quot  gt               lt input  type  quot submit quot  class  quot btn btn-danger quot  value  quot Confirm quot  gt  lt  input gt           lt  form gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt   lt  -- end modal static -- gt    JS        document  ready function                confirm delete   on  show bs modal   function e                  this  find   btn-ok   attr  action     e relatedTarget  data  href

User · Answer

This is the best solution that I just implemented   HTML   lt a data-toggle  tooltip  rel  tooltip  data-placement  top  title  My Tooltip text   gt Hover over me lt  a gt    JAVASCRIPT that you anyway need to include regardless of what method you use       rel  tooltip     tooltip

User · Answer

Since tooltip is not initialized automatically  you can make changes in your initialization of the tooltip  I did mine like this     document  ready function            body   tooltip           selector    data-tooltip tooltip            container   body                with this markup    lt button type  button  data-target   myModal  data-toggle  modal  data-tooltip  tooltip  class  btn btn-info  title  Your tooltip  gt Text here lt  button gt    Notice the data-tooltip   Update  Or simply       data-tooltip  tooltip     tooltip

User · Answer

I ve also tried to use  x000D   x000D   lt span gt  lt  span gt  x000D   x000D   x000D   but  lt a gt  lt  a gt     worked great for me  Here you are   x000D   x000D   lt button type  button  class  btn btn-danger  data-bs-container  body  data-bs-toggle  popover  data-bs-placement  bottom  data-bs-content  Some word here  gt   lt a data-bs-toggle  tooltip  title  Example  gt Some info here lt  a gt   lt  button gt  x000D   x000D   x000D   Even better  try to wrap the entire button  that uses popover  with a div   x000D   x000D   lt div data-bs-toggle  tooltip  title  Something  gt   lt button type  button  class  btn btn-danger  data-bs-container  body  data-bs-toggle  popover  data-bs-placement  bottom  data-bs-content  Some word here  gt  Button label  lt  button gt   lt  div gt  x000D   x000D   x000D

User · Answer

Just for complement  Roman Holzner answer     In my case  I have a button that shows the tooltip and it should remain disabled until furthermore actions  Using his approach  the modal works even if the button is disabled  because its call is outside the button - I m in a Laravel blade file  just to be clear      lt span data-toggle  modal  data-target   confirm-delete  data-href      e- gt id     gt       lt button name  delete  class  btn btn-default  data-toggle  tooltip  data-placement  bottom  title  Excluir Entrada  disabled gt           lt i class  fa fa-trash fa-fw  gt  lt  i gt       lt  button gt   lt  span gt    So if you want to show the modal only when the button is active  you should change the order of the tags    lt span data-toggle  tooltip  data-placement  bottom  title  Excluir Entrada  disabled gt       lt button name  delete  class  btn btn-default  data-href      e- gt id     data-toggle  modal  data-target   confirm-delete  disabled gt           lt i class  fa fa-trash fa-fw  gt  lt  i gt       lt  button gt   lt  span gt    If you want to test it out  change the attribute with a JQuery code      button name delete    attr  disabled   false

User · Answer

There is a nice solution using class  stretched-link  Button must have a class  position-relative  Here is a full working example   Tooltip must be added to the button otherwise its position will be incorrect    x000D   x000D      data-toggle  tooltip     tooltip    x000D    DEMO   btn margin-left 5rem margin-top 5rem  x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt  x000D   x000D   lt  --BUTTON-- gt  x000D   lt button class  btn btn-primary position-relative  data-toggle  tooltip  data-trigger  hover  data-placement  left  title  Tooltip text  gt  x000D       lt span class  stretched-link  data-toggle  modal  data-target   exampleModal  gt  lt  span gt  x000D      Click Me  x000D   lt  button gt  x000D   x000D   lt  --DEMO MODAL-- gt  x000D   lt div class  modal fade  id  exampleModal  tabindex  -1  role  dialog  aria-labelledby  exampleModalLabel  aria-hidden  true  gt  lt div class  modal-dialog  role  document  gt  lt div class  modal-content  gt  lt div class  modal-header  gt  lt h5 class  modal-title  id  exampleModalLabel  gt Modal title lt  h5 gt  lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  lt  div gt  lt div class  modal-body  gt Modal body lt  div gt  lt  div gt  lt  div gt  lt  div gt  x000D   x000D   lt script src  https   code jquery com jquery-3 3 1 slim min js  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 3 1 js bootstrap bundle min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

If you want to add a modal and a tooltip without adding javascript or altering the tooltip function  you could also simply wrap an element around it    lt span data-toggle  modal  data-target  modal  gt       lt a data-toggle  tooltip  data-placement  top  title  Tooltip  gt        Hover Me                 lt  a gt   lt  span gt

User · Answer

When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag  like this    I will suggest that use div outside a tag and use  display  inline-block     lt div data-toggle  tooltip  title    data-original-title  Add  style   display inline-block   gt       lt a class  btn btn-primary  data-toggle  modal  data-target   myModal  onclick  setSelectedRoleId 6   gt        lt span class  fa fa-plus  gt  lt  span gt       lt  a gt   lt  div gt

User · Answer

I managed to solve this issue without the need to change any markup with the following piece of jQuery  I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal  All you will need to do here is add the title to the button       data-toggle  modal   title    tooltip

User · Answer

Not yet  However  it has been suggested that someone add this feature one day   The following bootstrap Github issue shows a perfect example of what you are wishing for  It is possible- but not without writing your own workaround code at this stage though   Check it out     -   https   github com twitter bootstrap issues 7011

User · Answer

One more solution        lt a data-toggle  modal  data-target   exampleModalCenter  gt         lt span         class  tags          data-toggle  tooltip          data-placement  right          title  Tooltip text         gt          Text       lt  span gt      lt  a gt

User · Answer

lt a data-toggle  tooltip  data-placement  top  title  My Tooltip text   gt   lt  a gt

[button] Bootstrap control with multiple "data-toggle"

Examples related to button

Examples related to twitter-bootstrap

Examples related to binding