获取元素属性并替换

Question

我正在使用boostrap弹出窗口来替换工具提示。而现在我得到这个

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称号。您可以使用使用

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

DEMO

.attr(attributeName, function)

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

代替