带有手动触发和选择器选项的引导工具提示

Posted 2023-05-08

【中文标题】带有手动触发和选择器选项的引导工具提示

【英文标题】：Bootstrap Tooltip with manual trigger and selector option

【发布时间】：2014-09-18 08:15:46

【问题描述】：

我有一个动态表，加载了 ajax。当我将鼠标悬停在 row 上时，我想显示一个工具提示，但我希望工具提示出现在某个 cell（类 .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>

初始化：

$('#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;
    
);

尝试一：Demo in jsFiddle

$('#myTable')
    .on('mouseenter focusin', 'tbody > tr', function() 
        $(this).find('td.name').tooltip('show');
    )
    .on('mouseleave focusout', 'tbody > tr', function() 
        $(this).find('td.name').tooltip('hide');
    );

尝试二：Demo in jsFiddle

var tip;
$('#myTable')
    .on('mouseenter focusin', 'tbody > tr', function() 
        tip = $(this).find('.offer-name');
        tip.tooltip(hereAllTooltipOptions);
        tip.tooltip('show');
    )
    .on('mouseleave focusout', 'tbody > tr', function() 
        tip.tooltip('hide');
    );

但我非常想知道这种解决方案的性能。那么，问题是如何做到并做得更好？

【参考方案1】：

这里的问题是当trigger 设置为manual 时，您不能使用selector 选项。 selector is used for delegation when bootstrap is handling the trigger events，但你已经明确表示你将是处理委托的人，所以它是ignores the selector setting。

这意味着我们从使用如下代码进行预初始化获得任何东西：

$('.parent').tooltip(
    selector: '.child',
    trigger: 'manual'
)

它只是说我想在 .child 元素上设置工具提示，但不要对此做任何事情，因为我稍后会处理它。

这很好，这就是我们在使用manual 时想要做的。我们将决定何时显示或隐藏工具提示。

让我们看看一个简单的例子：

$('#myTable').on(
    'mouseenter': function() 
        $(this).find('td.name').tooltip('show');
    ,
    'mouseleave': function() 
        $(this).find('td.name').tooltip('hide');
    
,'tbody > tr');

Demo in js Fiddle

但是，这在这种情况下不起作用，因为我们想要动态生成工具提示。当我们在特定元素上调用.tooltip('show') 时，bootstrap 会查看该元素以查看它是否已被初始化或具有标题。上面的例子是可行的，因为我已经硬编码了一个标题，但是如果我们想先初始化这个工具提示，我们将如何使用它呢？

在显示工具提示之前即时初始化，如下所示：

$('#myTable').on(
    'mouseenter': function() 
        $(this).find('td.name')
            .tooltip(
                container: 'body',
                html: true,
                trigger: 'manual',
                title: function() 
                    return this.parentNode.id;
                
            ).tooltip('show');
    ,
    'mouseleave': function() 
        $(this).find('td.name').tooltip('hide');
    
,'tbody > tr');

因此您不会在每次悬停时产生初始化成本，您可以将初始化包装在一个 if 语句中，以 check if it has already been initialized 如下所示：

var $cell = $(this).find('td.name');
if (!$cell.data("bs.tooltip")) 
    $cell.tooltip( /* options */ );

$cell.tooltip('show');

Demo in jsFiddle

【讨论】：

谢谢！！这正是我需要的:)。另外，刚刚发现我可以使用$cell.data('bs.tooltip')检查工具提示是否已初始化。

“选择器”上的引导文档非常模糊。我完全忽略了使用 tooltip() 函数和选项本身可以简单地动态生成动态工具提示的可能性。谢谢！

感谢这段代码，我也可以将它用于弹出窗口。另外提醒一下：我打算在不注明出处的情况下使用此代码，因为您似乎是免费提供的。

@KyleMit 感谢您的周到回复。对我来说，归因并跟上它们只是一件麻烦事。实际上，我通常会在我的源代码中保留一个指向问题的链接，但通常就是这样。如果我自己理解代码，我可能不会这样做。我曾经问过这个问题（meta.***.com/questions/253618/…）。无论如何，我相信您合法地保留版权，并且如果您愿意，可以允许其他人在不注明出处的情况下使用。目前，我假设您不希望这样做，这是完全可以接受的。

非常感谢@KyleMit。哈，我想我可以看出你一定觉得它很有趣，因为这个数字从 95 上升到了 96 :)。是的，请随意删除。保重