截图 :
代码 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>提示窗</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.aaa {
background-color :#999 ;
text-align : left ;
margin : 0 auto ;
padding : 0px ;
font-size : 13px ;
font-family : arial ;
color : white ;
width : 760px ;
height : 32px ;
line-height : 32px ;
border : none ;
font-weight : bold ;
cursor : pointer ;
}
#toolTip {
border : 1px solid #4e514e ;
width : 420px ;
height : 32px ;
line-height : 32px ;
display : none ;
position : absolute ;
font-size : 12px ;
font-family : arial ;
background-color : #FFFF77 ;
color : black ;
padding : 0px ;
margin : 0px ;
text-align : center ;
}
</style>
<script>
var $ = function(sId){
return ('string' == typeof sId) ? document.getElementById(sId) : sId ;
}
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false ;
}
var createToolTip = function(){
$("aaa").onmouseover = function(ev){
var ev = ev || window.event ;
if(isIE()){
$("toolTip").style.filter = 'alpha(opacity=75)' ;
}else{
$("toolTip").style.opacity = 0.75 ;
}
$("toolTip").style.top = ev.clientY + 'px' ;
$("toolTip").style.left = ev.clientX + 'px' ;
$("toolTip").style.display = 'block' ;
}
$("aaa").onmousemove = function(ev){
var ev = ev || window.event ;
$("toolTip").style.top = ev.clientY + 10 + 'px' ;
$("toolTip").style.left = ev.clientX + 5 + 'px' ;
}
$("aaa").onmouseout = function(){
$("toolTip").style.display = 'none' ;
}
}
window.onload = createToolTip ;
</script>
</HEAD>
<BODY>
<div id="aaa" class="aaa">这是测试数据</div>
<div id='toolTip'>toolTip提示条</div>
</BODY>
</HTML>
分享到：
相关推荐
微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加： src="../ToolTip/toolTip.wxml"/> <!-- 引入toolTip模板 --> is=...
首先，"jquery-calendar-with-tooltip"这个名字暗示这是一个基于jQuery的插件，用于创建具有提示功能的日历组件。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互，使得开发者能更...
"YeXiuGang-echarts-auto-tooltip-master.zip"这个压缩包文件看起来是一个专门为ECharts开发的自动显示tooltips的插件，旨在优化用户在查看图表时的体验。 在ECharts默认情况下，tooltip通常会在鼠标移动到数据项上...
本项目"Android-基于android-target-tooltip修改的---新功能提示view可自定义提示样式"专注于提供一个高度可定制化的提示视图(TipView)，它是在开源库`android-target-tooltip`的基础上进行改进的。这个改进版的...
在Windows编程领域，工具提示（ToolTip）控件是一种常见的用户界面元素，它可以在鼠标悬停在其他控件上时提供额外的信息。在Win32 API中，我们可以利用`ToolTip`控件来创建这些动态显示文本的窗口。这篇博客将深入...
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、轻量级和高效著称。在Vue2.x版本中，开发者可以创建各种自定义组件来满足项目需求，其中包括用于显示提示信息的tooltip组件。"一个Vue2x的tooltip提示信息...
echarts 实现数据(tooltip)自动轮播插件，假如需要这方面的报表轮播的话，可以尝试使用，请在下载之前确认是否符合业务需求，谢谢！
通常，这些文件位于`mirelvt-js-css-tooltip-192c0bf`压缩包的相应目录下。 2. **HTML结构**：为需要添加Tooltip的元素添加一个特定的class或者数据属性，例如`data-tooltip`，并在该属性中设置提示信息。 3. **...
"form-field-tooltip"是UI设计中的一个关键元素，主要功能是提供气泡提示，帮助用户理解并操作表单字段。在本文中，我们将深入探讨form-field-tooltip的原理、应用场景、实现方法以及相关的技术细节。 **一、气泡...
带箭头的文字提示带箭头的文字提示有较明确的指向性。不带箭头的文字提示不带箭头的文字提示没有明确指向性。带主题色的文字提示不同触发方式的文字提示组件设计指南何时使
React是JavaScript库，用于构建用户界面，特别是单页面应用程序。在React应用中，Tooltip是一种常见的交互...通过理解其基本用法和配置选项，你可以在项目中实现各种各样的Tooltip效果，以满足用户对信息提示的需求。
React Native演练工具提示 React Native演练工具提示是一个全屏模式，可突出显示它包装的任何元素。 当不可见时，已包装的元素将正常显示。 由 ：使用react-native-walkthrough-tooltip的React Native轻量级过渡库...
在前端开发中，提示工具（Tooltip）是一种常见且实用的UI元素，用于向用户提供额外的信息或解释某些元素的功能。在本教程中，我们将探讨如何基于Vue框架创建一个简单的Tooltip工具，这将帮助开发者更好地理解Vue组件...
/ Tooltip > 将鼠标悬停在按钮上时，工具提示将自动出现，而从按钮悬停时，工具提示将消失。选项选项默认描述支持的值标题不明确的必填项。 工具提示内容任何可通过React渲染的东西（字符串，数字，元素等） 放置'...
"9种经典的tooltip信息提示框"可能包含了一系列不同的设计样式和实现方式，用于增强用户体验。下面将详细介绍tooltip及其常见类型、设计原则以及实现方法。 1. **Tooltip基本概念**： Tooltip是计算机用户界面中的...
VuePress-插件自定义工具提示 Vue.js项目的可重用工具提示组件。 这个插件是的VuePress包装器。 安装 # With npm npm install @adamdehaven/vuepress-plugin-custom-tooltip # or Yarn yarn add @adamdehaven/vue...
v-tooltip使用Popper.js的便捷工具提示，弹出窗口和下拉菜单赞助商实时演示JSFiddle目录入门安装v-tooltip使用Popper.js的便捷工具提示，弹出窗口和下拉菜单赞助商有用的链接Live Demo JSFiddle目录入门指南用法指令...
Highcharts-Gantt甘特图tooltip内容过长自动换行
chartist-plugin-tooltip, Chartist.js的工具提示插件 Chartist.js的工具提示插件这个插件为你的图表图表提供快速而简单的工具提示。 触摸支持计划即将完成。请访问 ...
npm i leaflet-tooltip-layout --save # or yarn add leaflet-tooltip-layout 或者，您可以仅将./lib/index.js复制到您的项目中，然后将其重命名为所需的名称。 入门 ES6 import * as tooltipLayout from 'leaflet...