jQuery tooltip提示框的演示,鼠标悬停显示信息

转自 https://blog.csdn.net/qq_39822451/article/details/83303186

 

html源码:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
  
<p><a href="#" title="这就是Tooltips这个小工具">Tooltips</a> 很是强大</p>
<p>但是
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller2: jQuery UI的主题创建应用">ThemeRoller</a>
也挺厉害</p>
<p>Tooltips 对表单元素很有用,可以在某些区域显示指定内容</p>
<p><label for="age">Your age:</label><input id="age" title="输入年龄只做统计使用"></p>
<p>鼠标悬停去看tooltip的效果.</p>
  
  
</body>
</html>

 

效果图:

 

posted @   emanlee  阅读(489)  评论(0编辑  收藏  举报
编辑推荐:
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
阅读排行:
· Blazor Hybrid适配到HarmonyOS系统
· Obsidian + DeepSeek:免费 AI 助力你的知识管理,让你的笔记飞起来!
· 解决跨域问题的这6种方案,真香!
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
· 分享4款.NET开源、免费、实用的商城系统
历史上的今天:
2011-12-10 Toward the blood-borne miRNome of human diseases
2009-12-10 PETS 5 五级简介
点击右上角即可分享
微信分享提示