存在 ToolTip 属性时更改 Bootstrap 弹出框标题答案

【问题标题】：Change Bootstrap popover title when ToolTip attribute exists存在 ToolTip 属性时更改 Bootstrap 弹出框标题
【发布时间】：2013-10-26 14:53:41
【问题描述】：

我的页面上有一个这样的按钮：

<button class="btn btn-small btn-success help-target" rel="popover" data-content="This is the help contnet" data-placement="left" tooltip="Click to submit this form">Submit Review to AMR<button>

我的页面上也有一些 JavaScript，如下所示：

function showHelp() {
    $("#overlay").show();
    $('[rel=popover]').popover({ 'trigger': 'manual', 'title': function () { return 'Help'; } });
    $('[rel=popover]').popover('show');
}

我尝试以两种不同的方式设置弹出框的“标题”，一种是在 javascript 代码中使用 'title' 选项，另一种是在 HTML 元素上使用 data-title 属性。然而，我的弹出框标题中实际显示的是按钮元素上“工具提示”属性的内容。

无论我做什么，我似乎都无法覆盖它。我需要元素上的 tooltip 属性，因为我希望在用户将鼠标悬停在元素上时显示它。

有没有一种简单的方法可以覆盖我刚刚丢失的标题？

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

您是否想到了以下内容？ jsbin 中的这个示例使用 bootstrap 2.3.2。

http://jsbin.com/EMiXiv/2

HTML

<button class="btn btn-small btn-success help-target" 
data-toggle="tooltip" 
data-toggle="popover" 
data-content="This is the help content" 
data-placement="left">Submit Review to AMR</button>

Javascript

$('.help-target').popover({ 'title': 'Popover Title'});  
$('.help-target').tooltip({ 'title': 'tooltip message', 'placement': 'top'});

【讨论】：

试过这个，但没有效果。
@Scott - jsbin 有效，因此了解有关您的特定页面的更多详细信息可能会很有用。
是的，但它不能准确反映我的问题。该按钮还有一个“工具提示”属性，其中包含一些文本，因此当用户浏览它时，他们会看到标准的 HTML 工具提示（它没有使用 Bootstrap 工具提示插件）。无论我尝试什么，“title”属性中的文本总是用于弹出框的标题。

【解决方案2】：

这最终对我有用，因为我希望所有可见的弹出框都具有相同的标题：

function showHelp() {
    $("#overlay").show();
    $('[rel=popover]').popover({ 'trigger': 'manual', 'title': function () { return 'Help'; } });
    $('[rel=popover]').popover('show');
    $('.popover-title').text('Help');
}

【讨论】：

【解决方案3】：

$(function() {
    $('[title]').attr("data-rel", "tooltip");
    $("[data-rel='tooltip']")
        .attr("data-placement", "top")
        .attr("data-content", function() {
            return $(this).attr("title")
        })
        .removeAttr('title');


    var showPopover = function() {
        $(this).popover('show');
    };
    var hidePopover = function() {
        $(this).popover('hide');
    };
    $("[data-rel='tooltip']").popover({
        trigger: 'manual'
    }).click(showPopover).hover(showPopover, hidePopover);

});

和简单的HTML

这是什么

【讨论】：