bootstrap tips 插件学习笔记

myloveqiqi

2015-08-06

文章参考

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="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="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="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="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="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="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="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">锦绣世纪</div><div class="sqh_pointer width_25 float_left" target="#" onclick="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>

css