Question

我正在使用boostrap popover来替换工具提示。而现在我得到了这个

JS

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


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

});

和HTML

 <p title="THIS IS STEP 1">STEP 1</p>
 <p title="THIS IS STEP 2">STEP 2</p>
 <p title="THIS IS STEP 3">STEP 3</p>
 <p title="THIS IS STEP 4">STEP 4</p>

这个工作正常，但问题现在每个元素都有相同的标题？

这是工作小提琴 http://www.bootply.com/IUhlrnoHG5

Answer 1

目前，您只指定了第一个h1的标题。您可以使用.attr( attributeName, function )

使用

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

而不是

var titlePopover = $("[data-rel='tooltip']").attr("title");
$("[data-rel='tooltip']").removeAttr('title').attr("data-placement", "top").attr("data-content", titlePopover);

DEMO

获取元素属性并替换

1 个答案: