一个JS小组件: 实现给HTML添加悬浮提示

Jerry__Zheng

已于 2025-01-15 15:31:57 修改

阅读量231

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript html 开发语言

于 2025-01-15 15:30:06 首次发布

本文链接：https://blog.csdn.net/qq_18155259/article/details/145161408

JS代码:

setTipPop();
function setTipPop(){
    let $tips = $(".tip-pop");
    for (let i = 0; i < $tips.length; i++) {
        let $tip = $($tips[i])
        $tip.css("display", "inline-block");
        $tip.css("color", "#5bbcff");
        $tip.css("position", "relative");
        let htmlText = $tip.html()
        let id = "tip-pop-"+i;
        $tip.html(`<div id="${id}-ico" style="display: inline-block" class="fa fa-question-circle-o tip-pop"></div>`)
        $('#'+id+'-ico').hover(function () {
            if ( $("#"+id).length===0){
                $tip.append(
                    `<div id="${id}" style="position:  absolute;top: 25px;left: -17px;width: 300px;z-index: 9999;background: rgba(50,50,50,0.9);padding: 10px;color: white;display: none">`+
                    '<div style="height: 12px;width: 12px;position: absolute;top:-5px;left: 18px;background: rgba(50,50,50,0.5);z-index: 0;transform: rotate(45deg)"></div>'+
                    `${htmlText}</div>`

                )
            }
            $("#"+id).fadeIn(300);
        }, function () {
            $("#"+id).fadeOut(300);
        })
    }
}

HTML使用:

<span class="tip-pop" >
混合计算工资指通过xxxxxxxxx。<br><br>计算公式: xxxxxxxxxxx
</span>

需要有jquery和Font Awesome图标库, 也可以自己稍微改改, 去掉 jquery和Font Awesome

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Jerry__Zheng

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

超酷js提示框悬浮框

08-04

title的格式 title="header=[...] body=[...]" 直接打开就可以看到效果，很炫的哦

js 实现鼠标悬浮提示

syousetu的博客

07-22

4067

第一种：title 给元素增加title属性第二种：增加监听事件 $(".table1").on(“mouseover”, ‘.txt’, function () { 鼠标悬浮逻辑 }）

参与评论您还未登录，请先登录后发表或查看评论

纯js实现可爱的鼠标悬浮提示

02-26

纯js实现可爱的鼠标悬浮提示，代码体积小，方便调用。支持html文本。

实现鼠标经过某个元素时弹出提示框（通常称为“工具提示”或“悬浮提示”）

最新发布

qq_48763502的博客

10-16

3137

要实现鼠标经过某个元素时弹出提示框（通常称为“工具提示”或“悬浮提示”），你可以使用 JavaScript 结合 CSS 来创建这个效果。以下是详细步骤，包括 HTML、CSS 和 JavaScript 的代码示例。

js工具栏悬浮提示文字js特效

ICode联盟

09-05

513

js工具栏悬浮提示文字特效。

纯js实现可拖拽和点击的悬浮球

04-01

一个简单的悬浮球可以由一个`<div>`元素来表示，我们可以通过CSS设置其样式，使其看起来像一个球体： ```html 悬浮球 ``` 接下来，我们需要编写CSS来定义悬浮球的样式，例如圆角、颜色和位置： ```css .ball { ...

vue鼠标悬浮显示提示框.doc

05-15

在这段代码中，`v-tooltip="'这是一个提示框'"`表示当鼠标悬停在按钮上时，会显示一个提示框，提示框的内容为“这是一个提示框”。 #### 自定义提示框样式除了基本的使用方法之外，`vue-tooltip`还提供了许多...

Vue 实现对quill-editor组件中的工具栏添加title

11-19

此外，如果你想要自定义vue-quill-editor的toolbar，可以创建一个数组配置，然后传递给`quillEditor`组件的`toolbar`选项。例如： ```javascript const toolbarOptions = [ ['bold', 'italic', 'underline'], [{ ...

vue 实现超长文本截取,悬浮框提示

10-15

在Vue.js框架中实现超长文本截取并以悬浮框形式提示，是一种常见的前端开发需求，用于增强用户界面的友好性和信息的易读性。具体实现方法可以通过对HTML元素使用CSS样式来控制文本溢出的表现，并结合JavaScript以及...

JS中使用react-tooltip插件实现鼠标悬浮显示框

10-17

react-tooltip插件为React应用提供了一个高效且易于定制的鼠标悬浮提示框解决方案。通过上述介绍，你可以根据自己的需求灵活使用这些属性和方法，从而在你的React项目中实现丰富的用户交互效果。更多关于react-...

js右下角悬浮提示框.zip

07-04

js右下角悬浮提示框是一款非常实用的js特效，实现右下角悬浮可最大化、最小化和关闭功能的提示框，应用范围很广，可当做网站的消息提示功能，也可以当成网站的右下角悬浮广告功能。

js鼠标悬浮显示详细内容

12-21

js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容js鼠标悬浮显示详细内容

6种浮动提示框，弹出窗口，JS代码

10-22

总共有6种浮动提示框，鼠标移动图片或者文字上，会有浮动的提示窗口跟随，跟随鼠标移动，图片部分区域提示等都有

纯JS实现鼠标划过时显示提示框

12-27

js提示框特效制作多种js提示框效果,如js文字提示框,js图片提示框,js tooltip文字与图片提示框。一款很实用的js提示框插件。

html页面悬浮提示框,js实现页面悬浮框

weixin_29248611的博客

06-04

4679

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...

JavaScript实现鼠标悬浮弹出悬浮层效果

CgbAutoit的博客

10-06

1946

一种常见的实现方式是当用户将鼠标悬停在特定的文字上时，弹出一个悬浮层显示相关内容。通过绑定事件和操作CSS样式，我们可以实现当用户将鼠标悬停在特定文字上时显示相关内容的功能。接下来，我们将使用JavaScript来实现鼠标悬浮弹出悬浮层的效果。我们需要为文字元素绑定鼠标悬浮事件，并在事件触发时显示悬浮层。首先，我们需要在HTML中定义一个包含待悬浮文字的元素，以及用于显示悬浮层的容器元素。在上述示例中，我们使用CSS为悬浮层和文字定义了一些基本样式。元素时，悬浮层的可见性被设置为隐藏，透明度被设置为0。

html css 悬浮切换效果,CSS-悬浮显示提醒，CSS-悬浮显示

weixin_39827589的博客

06-03

344

CSS-悬浮显示提醒，CSS-悬浮显示$(function(){$("#account,div.account-set").hover( function(){$(".account-set").show();},function(){$(".account-set").hide();});})$(document).ready(function(){$(".account-set").cs...

java swt 悬浮提示框,利用js实现右下角悬浮提示框代码

weixin_39968592的博客

03-20

276

特效描述：利用js实现右下角悬浮提示框。利用js实现右下角悬浮提示框代码代码结构1. HTML代码.popBtn{width:18px; height:18px; cursor:pointer; float:right; margin-left:1px; margin-top:12px; display:inline; background:url(buttons.png) no-repeat...

jquery悬浮提示框

04-30

394

html> head> script type="text/javascript" src="jquery.js">script> script type="text/javascript"> $(function() { x = 5; y = 15; $("p").hover(funct

js写一个悬浮在手机桌面的小组件

07-15

要创建一个悬浮在手机桌面的小组件，你可以使用 HTML、CSS 和 JavaScript。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .widget-container { position: fixed; bottom: 20px; right: 20px; width: 200px; height: 200px; background-color: #f1f1f1; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); text-align: center; line-height: 200px; font-size: 24px; cursor: pointer; } </style> </head> <body> <div class="widget-container"> <p>小组件</p> </div> <script> // 在这里编写 JavaScript 代码 document.addEventListener('DOMContentLoaded', function() { var widget = document.querySelector('.widget-container'); // 定义初始位置 widget.style.top = '50%'; widget.style.left = '50%'; widget.style.transform = 'translate(-50%, -50%)'; // 点击小组件时触发的操作 widget.addEventListener('click', function() { // 在这里编写小组件点击后的操作 alert('你点击了小组件！'); }); }); </script> </body> </html> ``` 在上述代码中，我们创建了一个带有 `widget-container` 类的 `div` 元素，它将作为悬浮在手机桌面上的小组件。我们定义了一些基本的样式，包括大小、位置、背景色、圆角边框、阴影等。小组件的内容是一个居中显示的文本。在 JavaScript 代码部分，我们使用 `DOMContentLoaded` 事件监听器来确保 DOM 元素加载完成后再执行相关操作。在事件监听器中，我们首先获取小组件的 DOM 元素，并设置其初始位置居中显示。然后，我们为小组件添加了一个点击事件监听器，在点击小组件时触发一个操作，例如弹出一个提示框。你可以将上述代码保存为一个 HTML 文件，并在手机上打开该文件，就能看到一个悬浮在手机桌面的小组件了。你可以根据自己的需求对其进行样式和行为的自定义。