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');
}

我尝试用两种不同的方式设置我的popover的“标题”，一种是使用'title'选项的javascript代码，另一种是使用HTML元素的data-title属性。但是，我的弹出窗口标题中实际显示的是按钮元素上“tooltip”属性的内容。

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

是否有一种简单的方法来覆盖我刚刚缺少的标题？

Answer 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'});

Answer 2

这最终为我工作，因为我希望所有可见的popovers具有相同的标题：

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

这是什么

当ToolTip属性存在时，更改Bootstrap popover标题

3 个答案: