2

我的页面上有一个按钮，如下所示：

<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 属性，因为我希望在用户将鼠标悬停在元素上时显示它。

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

4

3 回答 3

0

您想到的是以下内容吗？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'});
于 2013-10-28T03:42:16.403 回答
0

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

function showHelp() {
    $("#overlay").show();
    $('[rel=popover]').popover({ 'trigger': 'manual', 'title': function () { return 'Help'; } });
    $('[rel=popover]').popover('show');
    $('.popover-title').text('Help');
}
于 2013-10-28T13:05:18.497 回答
0

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

这是什么

于 2014-10-20T11:36:23.270 回答