存在ToolTip属性时更改Bootstrap弹出窗口标题

Question

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

<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代码中使用“标题”选项，另一种是在HTML元素上使用data-title属性。 但是，我的弹出窗口标题中实际显示的是button元素上“ tooltip”属性的内容。

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

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

Answer 1

是否有以下想法？ jsbin中的此示例使用引导程序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>

Java脚本

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

Answer 2

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

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

Answer 3

JS

$(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

这是什么