<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);">bootstrap tooltip在javascript中的使用技巧</span>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);">bootstrap tooltip在javascript中的使用技巧</span>
tooltip需要使用
$("[data-toggle='tooltip']").tooltip();
来进行触发,如果在javascript中循环生成对应的html代码,这样tooltip就会不起作用,因此我们需要使用$("[data-toggle='tooltip']").tooltip();在js中进行触发,即就是每次生成使用tooltip时,都要进行触发,请查看如下的demo来进行查看,从而解决问题。
$.ajax({
url: WebSite.hostUrl+"/fpagination/getPaginationData",
method: "post",
dataType: "json",
data:{currentPage : num,pageSize: 10},
cache: false,
success: function(result){
if(result.status == "200"){
var resultdata = result.data;
console.log(resultdata.list);
//总信息条数
var pageCount = resultdata.count;
//每一页显示的数据
var publishjobvolist = resultdata.list;
$("#PageCount").val(pageCount);
$("#productList").html("");
//循环publishjobvolist进行显示
var rowContent = "";
for(var i = 0, len = publishjobvolist.length; i < len;i++){
var resultdata = publishjobvolist[i];
var remark = resultdata.remark;
if(remark != ""){
remark = cutstr(remark,22);
}else{
remark = "";
}
rowContent += '<tr>'
+' <td class="tooltipstyle yongrendanwei">'
+' <span data-toggle="tooltip" data-placement="bottom" title="'+ resultdata.pk_rmorg +'"> '
+' '+ resultdata.pk_rmorg +''
+' </span> '
+' </td> '
+' <td class="tooltipstyle yongrenbumen"> '
<span style="color:#ff0000;">+' <span data-toggle="tooltip" data-placement="bottom" title="'+resultdata.pk_rmdept+'"> '
+' '+resultdata.pk_rmdept+''
+' </span> '</span>
+' </td> '
+' <td class="zhaopinzhiwei"><a href="#">'+resultdata.pk_job+'</a></td> '
+' <td class="zhuanyeleibie">'+resultdata.professional+'</td> '
+' <td class="zhuanye">'+resultdata.educational+' </td> '
+' <td class="gongzuochengshi">'+resultdata.workplace+'</td> '
+' <td class="beizhu"> '
+' <span data-toggle="tooltip" data-placement="bottom" title="'+resultdata.remark+'"> '
+' '+remark+' '
+' </span> '
+' </td> '
+' <td class="caozuo"><a href="#">申请职位</a></td> '
+' </tr> ';
}
var spacehtml = '<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr> ';
$("#productList").append(rowContent+spacehtml);
/*提示框显示所需*/
<span style="color:#ff0000;">$("[data-toggle='tooltip']").tooltip();</span>
if(num == "1"){
loadpage();
}
}
},
error: function(){
alert("请求失败");
}
});
如此便能使用从而看到tooltip的效果了。如下图