前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端实现tooltip

前端实现tooltip

原创
作者头像
code-x
发布2022-11-17 20:23:16
1K0
发布2022-11-17 20:23:16
举报
文章被收录于专栏:code-x

鼠标悬浮在问号图标上, 下方展示提示文本.

代码语言:javascript
复制
.tooltip {
    margin: 8px;
    padding: 8px;
    border: 1px solid #CCCCCC;
    background-color: #F6DBB3;
    position: absolute;
    z-index: 2;
}

.arrow-div {
    position: absolute;
    z-index: 3;
    display: inline-block;
    border-top: 1px solid;
    border-right: 1px solid;
    width: 8px;
    height: 8px;
    border-color: #CCCCCC;
    transform: rotate(-45deg);
    margin: 50px auto auto 100px;
    background-color: #F6DBB3;
}
代码语言:javascript
复制
<i class="fa fa-question-circle-o" id="helpIcon" style="font-size: 24px; color: #D0CFCF; margin-left: 13px;"></i>
代码语言:javascript
复制
let changeTooltipPosition = function (event) {
    let xy = $('#helpIcon').offset();
    let tooltipX = xy.left - 180;
    let tooltipY = xy.top + 35;
    $('div.tooltip').css({top: tooltipY, left: tooltipX});
    $('div.arrow-div').css({top: tooltipY - 47, left: tooltipX + 87});
};

let showTooltip = function(event) {
    let div = `<div class="arrow-div"></div><div class="tooltip">提示文本</div>`

    $('div.tooltip').remove();
    $('div.arrow-div').remove();
    $(div).appendTo('body');
    changeTooltipPosition(event);
};

let hideTooltip = function() {
    $('div.tooltip').remove();
    $('div.arrow-div').remove();
};


$("#helpIcon").bind({
    mousemove : changeTooltipPosition,
    mouseenter : showTooltip,
    mouseleave: hideTooltip
});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档