Bootstrap 3 popover and tooltip on the same element

后端 未结 3 1539
自闭症患者
自闭症患者 2021-02-07 16:26

it is possible to use a tooltip and popover of Bootstrap 3 on the same element?

I have a table and want to show on each row (tr) a tooltip. Additionally I want to show

相关标签:
3条回答
  • 2021-02-07 17:06

    You dont have to use data-toggle, title and so on. Invoke the bootstrap plugins manually. See this example :

    <table>
      <tr tooltip-title="Tooltip title #1" 
          popover-title="popover title #1" 
          popover-content="popover content #1">
        <td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwerty</td>  
      </tr>
      <tr tooltip-title="Tooltip title #2" 
          popover-title="popover title #2" 
          popover-content="popover content #2">
        <td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwerty</td>               
      </tr>
    </table> 
    

    script :

    $('tr').each(function() {
      $(this).popover({    
        content : $(this).attr("popover-content"),
        title : $(this).attr("popover-title")         
      })     
      $(this).tooltip({    
        placement : 'bottom',  
        title : $(this).attr("tooltip-title")         
      })     
    })
    

    demo fiddle -> http://jsfiddle.net/79fXt/

    0 讨论(0)
  • 2021-02-07 17:20

    I needed both tooltip and popover on the same element. The tooltip is for information when the user hovers, and the popover is for a confirmation box when they click.

    In this case, I need the tooltip to go away when the popover appears. I added a little bit of code to @davidkonrad's solution like this:

      $(this).popover({    
        content : $(this).attr("popover-content"),
        title : $(this).attr("popover-title")         
      }).tooltip({    
        placement : 'bottom',  
        title : $(this).attr("tooltip-title")         
      }).on('show.bs.popover', function() {
        $(this).tooltip('hide')
      })
    
    0 讨论(0)
  • 2021-02-07 17:30

    You can apply the tooltip to the <tr> and the popover to all of the child <td>'s. Define the attributes in javascript and append the attributes to the relevant class (in this example class="my-popover") so that you don't have to write out the popover multiple times.

    For example:

    View:

     <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr data-toggle="tooltip" title="This tooltip is on top!">
          <td class="my-popover">1</td>
          <td class="my-popover">Mark</td>
          <td class="my-popover">Otto</td>
          <td class="my-popover">@mdo</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
    

    Javascript:

    $( document ).ready(function() {
        $(".my-popover").attr({"data-toggle":"popover", "data-container":"body", "data-placement":"bottom", "data-content":"My popover content", "data-original-title":"Popover title"});
        $("[data-toggle=tooltip]").tooltip();
        $("[data-toggle=popover]").popover();
    });
    

    Bootply here

    0 讨论(0)
提交回复
热议问题