当前位置:
首页 > Bootstrap > bootstrap组件动态tooltip心得

bootstrap组件动态tooltip心得

bootstrap组件动态tooltip心得

w3c上说tooltip组件使用js控制时需在documnet.ready时初始化,但是初始化后就只能一直显示初始化时候设定的内容了。

摸索了很久终于摸索出来动态改变tooltip内容的方法。

假设应用场景:
html结构:div.tu>img.xiaotu[data-img=****]
希望实现:默认img.xiaotu显示小图片,当鼠标移动到div.tu(也就是小图片img)上时触发tooltip,显示大图
img的src是小图url,data-img是大图url

实现代码:

    $(document).ready(function() {
        $(".tu").mouseover(function() {
            let option = {
                "title": "<img src='" + $(this).find("img").attr("data-img") + "' style='width:180px;height:180px'>",
                "container": "body",
                "html": true
            };
            $(this).tooltip(option).tooltip("show");
        })
    }
ready事件保证整个页面加载完毕后再执行下边代码;
mouseover事件指定鼠标移过时候触发tooltip组件的初始化并实时显示;
动态改变的内容包含在option中;
title中为实时根据鼠标指向对象不同变化的html内容,find+attr用来获取div.tu>img.xiaotu的data-img属性内容;
container为指定tooltip插入位置在body尾部(不影响当前结构) ;
html指定为真表示解析title中的html代码,否则将作为文本直接显示出来;
最后将option传送给tooltip初始化,并在后边再次叠加一层tooltip("show")让其直接显示出来;
好像tooltip中内容太大会撑爆tooltip的边框,所以大图也只设置了180的宽高。

承接航母大修、空间站维护、航天飞机打蜡,专业翻新核弹头,潜艇抛光,回收二手航母,大修核反应堆,航天飞机保养换三滤,高空作业擦洗卫星除尘;长期代写小学生寒暑假作业,替小学生打架,欺负同学,打老师(体育老师除外)

bootstrap组件动态tooltip心得:等您坐沙发呢!

发表评论

表情
还能输入210个字