相关疑难解决方法(0)

带有手动触发和选择器选项的Bootstrap Tooltip

我有一个动态表,加载了ajax.当我将鼠标悬停在一行上时,我想显示工具提示,但我希望工具提示显示在某个单元格(带有类.name)上而不是整个行上方.

此外,使用title函数,我需要能够获得最接近的行ID并返回自定义模板.

这是我的代码:

<table class="table" id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Country</th>
            <th>Statistics</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td >1</td>
            <td class="name">Name #1</td>
            <td>United States of America</td>
            <td>100%</td>
        </tr>
        <tr id="2">
            <td >2</td>
            <td class="name">Name #2</td>
            <td>United States of America</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>
Run Code Online (Sandbox Code Playgroud)

初始化:

$('#myTable').tooltip({
    container: 'body',
    html: true,
    selector: 'td.name',
    trigger: 'manual',
    title: function() {
        // here will be custom template
        var id = $(this).parent().atrr('id');
        return id;
    }
});
Run Code Online (Sandbox Code Playgroud)

尝试一:在jsFiddle演示 …

jquery twitter-bootstrap twitter-bootstrap-3

14
推荐指数
1
解决办法
3万
查看次数