如何为jquery-bootgrid设置工具提示

Question

This is the first time I am implementing jquery-bootgrid. I have implemented it successfully with following code. But the problem is that,

(1) I cannot assign tooltip for the table heads.

(2) How to assign width for each columns?

Thanks for the suggestions.

<table id="grid-basic" class="table table-striped table-bordered table-hover">
<thead>
    <tr>
        <th id="umrn" data-column-id="umrn" data-sortable="true" title="UMRN Number" data-toggle="tooltip" data-placement="top" title="Tooltip on top">UMRN</th>
        <th data-column-id="mandate_status" data-sortable="true" title="Mandate Status">Status</th>
        <th data-column-id="mandate_date" data-sortable="true">Date</th>
        <th data-column-id="payment_type"  data-sortable="true">Payment type</th>
        <!-- <th data-column-id="currency" data-sortable="true"> Currency</th> -->
        <th data-column-id="fixed_amount" data-sortable="true"> Fixed amount</th>
        <th data-column-id="max_amount" data-sortable="true"> Max amount</th>
        <!-- <th data-column-id="debtor_bank" data-sortable="true"> Debtor bank</th> -->
        <th data-column-id="creditor_bank" data-sortable="true"> Creditor bank</th>
        <th data-column-id="commands" data-formatter="commands" data-sortable="false">Options</th>
    </tr>
</thead> 
</table>
<script type="text/javascript">
  var _globalObj = {{ json_encode(array('_token'=> csrf_token())) }}
</script>

<script type="text/javascript">
  $(function () {
     $('[data-toggle="tooltip"]').tooltip();
     $('#example').tooltip(options)
  })
var token = _globalObj._token;
var grid = $("#grid-basic").bootgrid({
caseSensitive:false,
ajax: true,
post: function ()
{
    return {
        id: "b0df282a-0d67-40e5-8558-c9e93b7befed",_token:token
    };
},
url: 'getAllMandates',
formatters: {
    "commands": function(column, row)
    {
        return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " ;
    }
}
}).on("loaded.rs.jquery.bootgrid", function()
{   

/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function(e)
{
    //alert("You pressed edit on row: " + $(this).data("row-id"));
    location.assign("mandate/"+$(this).data("row-id"));
}).end().find(".command-delete").on("click", function(e)
{
  //  alert("You pressed delete on row: " + $(this).data("row-id"));
  /*
  var recID = $(this).data("row-id");
            $.ajax({
              url: "delete_user",
              data : {'rec_id' : recID},
            }).done(function( msg ) 
            {
                loginDeleteSuccess(msg);
            }) */
});
});

Answer 1

You hava to add tooltip init command in

).on("loaded.rs.jquery.bootgrid", function()
{   
    $('[data-toggle="tooltip"]').tooltip();
}

it works for me.

Answer 2

对于您的问题2：要设置列宽，请在<th>标记中使用data-width="10" （其中10是您希望的以像素为单位的宽度，我认为它也可以与％一起使用）

Answer 3

As you are using Bootstrap (and assuming you are not using jQuery UI, as their tooltips keep conflicting).

You can use the "selector" option for initializing the tooltip dynamically whenever the "desired" element will become available, as it might not be available when the DOM was created / initialized.

so you can write the code like

$(function() {
    $("table").tooltip({
        selector: "[data-toggle='tooltip']"
    });
});