tooltip

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量499 收藏
点赞数
分类专栏： html javascript 文章标签： javascript 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Tools standalone demo</title> 
<!-- include the Tools --> 
<script type="text/javascript" src="../script/jquery.js"></script>
   <script type="text/javascript">
  jQuery(document).ready(
          
    function($){
        var sweetTitles = { x : 10, 
                  y : 20, 
                  tipElements : "a,span,img,div", 
                  noTitle : true, 
                  init : function() { 
                              var noTitle = this.noTitle; 
                              $(this.tipElements).each(function(){ 
                                      $(this).mouseover(
                                                  function(e){ 
                                                          if(noTitle){ 
                                                                  isTitle = true;
                                                            }else{ 
                                                                    isTitle = $.trim(this.title) != '';
                                                            } 
                                                            if(isTitle){ 
                                                                    this.myTitle = this.title; 
                                                                    this.title = ""; 
                                                                    var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>"+'test'+"</div></div>"; 
                                                                    $('body').append(tooltip); 
                                                                    $('.tooltip').css({ "top" :( e.pageY+20)+"px", "left" :( e.pageX-20)+"px" }).show('slow');
                                                         }
                                                        })
                                                .mouseout(
                                                      function(){ 
                                                          if(this.myTitle != null){ 
                                                                    this.title = this.myTitle; 
                                                                    $('.tooltip').remove();
                                                    }
                                                    })
                                                .mousemove(
                                                    function(e){ 
                                                          $('.tooltip').css({ "top" :( e.pageY+20)+"px", "left" :( e.pageX-20)+"px" });
                                                    });
                                });
                            }
                }; 
        $(function(){
            $("button").click(function(){ $("#username").val("jQuery 仍在运行！");});
         sweetTitles.init();
        });
        
     });
    
  </script>
<style> 
#myform { 
border:1px outset #ccc; 
background:#fff repeat-x; 
padding:20px; 
margin:20px auto; 
width:350px; 
font-size:12px; 
-moz-border-radius:4px; 
} 
#myform h3 { 
text-align:center; 
margin:0 0 10px 0; 
} 
/* http://www.quirksmode.org/css/forms.html */ 
#inputs label, #inputs input, #inputs textarea, #inputs select { 
display: block; 
width: 150px; 
float: left; 
margin-bottom: 20px; 
} 
#inputs label { 
text-align: right; 
width: 75px; 
padding-right: 20px; 
} 
#inputs br { 
clear: left; 
} 
/* simple css-based tooltip */
.tooltip1 {
 
color:green;
text-align:left;
font-size:50px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
} 


.tooltip {font-size: 15px;position: absolute;padding: 5px;z-index: 100000;opacity: 0.8; width:200px; border:1px solid #ccc; display:none; background-color:#555;}
.tipsy-arrow1 {position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: 0px;left: 20%;margin-left: -5px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;}
.tipsy-arrow-n1 {border-bottom-color: #000;}

.tipsy-arrow {position: absolute;width: 0;height: 0;line-height: 0;
                border: 6px solid #000;top: 0px;left: 20%;margin-left: -5px;
                
                border-left-color: transparent;
                border-right-color: transparent;
                border-top-color: green;
                  border-bottom-color: yellow;
                border-top: none;
              }


.tipsy-inner {background-color: #000;color: #FFF;max-width: 200px;padding: 5px 8px 4px 8px;text-align: center;border-radius: 3px;}



</style> 
</head> 
<body><form id="myform" action="#"> 
<h3>Registration Form</h3> 
<div id="inputs"> 
<!-- username --> 
<label for="username">Username</label> 
<input id="username" title="Must be at least 8 characters."/> 
<br /> 
<!-- password --> 
<label for="password">Password</label> 
<input id="password" type="password" title="Make it hard to guess." /> 
<br /> 
<!-- email --> 
<label for="email">Email</label> 
<input id="email" title="We won't send you any marketing material." /> 
<br /> 
<!-- message --> 
<label for="body">Message</label> 
<textarea id="body" title="What's on your mind?"></textarea> 
<br /> 
<!-- message --> 
<label for="where">Select one</label> 
<select id="where" title="Select one of these options"> 
<option>-- first option --</option> 
<option>-- second option --</option> 
<option>-- third option --</option> 
</select> 
<br /> 
</div> 
<!-- email --> 
<label> 
I accept the terms and conditions 
<input type="checkbox" id="check" title="Required to proceed" /> 
</label> 
  <a href="www.baidu.com" >tesbt</a>
<button type="button" title="This button won't do anything"> 
Proceed 
</button> 

</form> 

    <script type="text/javascript">
     
    </script>
</body> 
</html>

lingling1420q
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
winform 自定义tooltip
09-05
在Windows Forms（Winform）开发中，Tooltip是一个非常常见的组件，用于显示鼠标悬停在控件上时的简短提示信息。默认的Tooltip组件虽然功能简单，但在某些情况下可能无法满足复杂的用户界面需求。因此，自定义...
dashboard修改tooltip
06-02
在本话题中，“dashboard修改tooltip”指的是对仪表板上的数据提示（tooltip）进行定制或优化的过程。Tooltip是用户将鼠标悬停在图表元素上时出现的信息小窗口，它提供了额外的数据细节，帮助用户更好地理解图表内容...
tooltip的2种写法，一种纯css,一种 js
07-10
标题和描述提到了"tooltip"，这是一个在网页开发中常见的功能，用于显示当鼠标悬停在某个元素上时的提示信息。这里提到的两种实现方法是纯CSS和JavaScript（js）。 **纯CSS实现Tooltip** 纯CSS实现Tooltip主要依赖...
MFC最全ToolTip例子+源文件
12-07
在Microsoft Foundation Class (MFC)库中，ToolTip控件是一个非常实用的功能，它可以在用户将鼠标悬停在某个控件上时显示简短的帮助文本。`MFC最全ToolTip例子+源文件`这个资源包提供了关于如何在MFC应用程序中使用...
37.（leaflet篇）leaflet叠加自定义tooltip展示.zip
09-27
在本教程中，我们将深入探讨如何使用Leaflet库在地图上叠加自定义的tooltip，以增强用户交互体验。Leaflet是一个轻量级的JavaScript库，专门用于创建交互式地图，适用于各种Web应用。通过自定义tooltip，我们可以为...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1292
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1079
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 154
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 101
【代码】vue el-select的下拉树形结构。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 641
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
el-menu根据多层树形结构递归遍历展示菜单栏
m0_62317155的博客
07-23 918
el-menu根据多层树形结构递归遍历展示菜单栏
爬虫基本原理入门
RHeng的博客
07-25 823
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 155
【代码】typescript中type和interface有什么区别，如何选择？
牛客JS题（二）直角三角形
不起眼小菜菜的博客
07-25 201
注释很详细，直接上代码……
如何关闭页面报错的遮罩层
karlaofsky的博客
07-25 198
在vue.config.js中添加如下配置，问题：如何关闭页面报错的遮罩层。
刷新当前页面
Garbrielle的博客
07-26 136
相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时.
【JS逆向课件：第十九课：jQuery】
weixin_50556117的博客
07-24 990
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理等功能。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
记录一次centos部署node高版本踩坑记录
weixin_42770320的博客
07-26 245
最后总结一下，有时候做事情真的不能这么死板，不要在一棵树上吊死，要有多种方案去选择，不要永远去死磕一种方案，反正都是不熟悉的领域，尝试过一定时间，搞不通应该果断放弃，不要总是强迫自己要一定要这种方案，俗话说的好，只要思想不滑坡，办法总比困难多哈哈哈，最后真的真的非常非常感激docker，docker真的神中神中神中神。
python Tooltip
10-14
Python中的Tooltip是指当鼠标悬停在某个控件上时，会弹出一个提示框，显示该控件的相关信息或说明。在Python中，可以使用Tkinter库来创建Tooltip。 以下是一个简单的示例代码： ```python import tkinter as tk from tkinter import ttk class Tooltip: def __init__(self, widget, text): self.widget = widget self.text = text self.widget.bind("<Enter>", self.show_tooltip) self.widget.bind("<Leave>", self.hide_tooltip) def show_tooltip(self, event): x, y, cx, cy = self.widget.bbox("insert") x += self.widget.winfo_rootx() + 25 y += self.widget.winfo_rooty() + 20 self.tooltip = tk.Toplevel(self.widget) self.tooltip.wm_overrideredirect(True) self.tooltip.wm_geometry("+%d+%d" % (x, y)) label = ttk.Label(self.tooltip, text=self.text, justify='left', background="#ffffff", relief='solid', borderwidth=1, font=("times", "8", "normal")) label.pack(ipadx=1) def hide_tooltip(self, event): if self.tooltip: self.tooltip.destroy() # 创建一个按钮，并添加Tooltip root = tk.Tk() button = ttk.Button(root, text="Hello") button.pack() tooltip = Tooltip(button, "This is a button") root.mainloop() ``` 运行上述代码后，当鼠标悬停在按钮上时，会弹出一个提示框，显示"This is a button"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值