文章参考
http://v3.bootcss.com/javascript/#tooltips
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap v3.3.4 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/sqh_style_v2.0.css">
<script src="../js/sqh_js_v2.0.js"></script>
<title>我的卡包</title>
<style>
.tooltip-inner {
background-color: #ffffff;
border-radius: 4px;
color: #565656;
max-width: none;
padding: 3px 8px;
text-align: center;
text-decoration: none;
}
.tooltip.in {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #d8d8d8;
border-width: 0 5px 5px;
left: 50%;
margin-left: -5px;
top: 0;
}
</style>
</head>
<body class="sqh_tmp_bj_f3">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on left">Tooltip on left</button>
<br>
<br>
<br>
<br>
<br>
<br>
<span data-toggle="tooltip" data-placement="right" title="黄彪测试内容">Tooltip on left</span>
<br>
<br>
<br>
<br>
<br>
<span id="huangbiao">Tooltip on left</span>
</body>
</html>
<script>
$(function () {
//初始化tooltips
$('[data-toggle="tooltip"]').tooltip();
showTips('#huangbiao');
});
function showTips(jquerySelector){
var target = '<div class="margin_top_20 border_bottom_eee_solid padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心区:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div></div></div><div class="margin_top_20 border_bottom_eee_solid padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心区:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div></div></div><div class="margin_top_20 border_bottom_eee_solid padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心区:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div></div></div><div class="margin_top_20 padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心区:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" οnclick="jumpTo(this)">上海城</div></div></div>';
$(jquerySelector).tooltip({
//自定义弹出控件显示的内容
template : '<div class="tooltip sqh_border_d8d8d8 sqh_tmp_bj_ff sqh_line_height_20" role="tooltip" style="width: 510px;"><div class="tooltip-arrow sqh_position_top_30" style="top:-5px;"></div><div class="tooltip-inner"></div></div>',
//提示标签在控件显示的位置 —— top | bottom | left | right | auto
placement : "bottom",
//在template模板<div class="tooltip-inner"></div>控件内展示的内容
title:"<span>"+target+"</span>",
//触发事件click | hover | focus | manual.
trigger:"click",
//是否将html代码做转换，false是不转换，true表示转换
html:true
}).on('shown.bs.tooltip', function () {
$(".tooltip.bottom .tooltip-arrow").css("top","-5px");
});
//绑定事件
// $(jquerySelector).on('shown.bs.tooltip', function () {
// $(".tooltip.bottom .tooltip-arrow").css("top","-5px");
// })
}
</script>