Put this into your <HEAD> section
<style type="text/css">
/* YOU CAN REMOVE THIS PART */
body{
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:85px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.9em;
line-height:130%;
}
h1{
line-height:130%;
}
a{
color: #D60808;
text-decoration:none;
font-weight:bold;
}
a:hover{
border-bottom:1px dotted #317082;
color: #307082;
}
/* END PART YOU CAN REMOVE */
#dhtmlgoodies_tooltip{
background-color:#EEE;
border:1px solid #000;
position:absolute;
display:none;
z-index:20000;
padding:2px;
font-size:0.9em;
-moz-border-radius:6px; /* Rounded edges in Firefox */
font-family: "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
}
#dhtmlgoodies_tooltipShadow{
position:absolute;
background-color:#555;
display:none;
z-index:10000;
opacity:0.7;
filter:alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
-moz-border-radius:6px; /* Rounded edges in Firefox */
}
</style>
<SCRIPT type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Updated:
March, 11th, 2006 - Fixed positioning of tooltip when displayed near the right edge of the browser.
April, 6th 2006, Using iframe in IE in order to make the tooltip cover select boxes.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var dhtmlgoodies_tooltip = false;
var dhtmlgoodies_tooltipShadow = false;
var dhtmlgoodies_shadowSize = 4;
var dhtmlgoodies_tooltipMaxWidth = 200;
var dhtmlgoodies_tooltipMinWidth = 100;
var dhtmlgoodies_iframe = false;
var tooltip_is_msie = (navigator.userAgent.indexOf('MSIE')>=0 && navigator.userAgent.indexOf('opera')==-1 && document.all)?true:false;
function showTooltip(e,tooltipTxt)
{
var bodyWidth = Math.max(document.body.clientWidth,document.documentElement.clientWidth) - 20;
if(!dhtmlgoodies_tooltip){
dhtmlgoodies_tooltip = document.createElement('DIV');
dhtmlgoodies_tooltip.id = 'dhtmlgoodies_tooltip';
dhtmlgoodies_tooltipShadow = document.createElement('DIV');
dhtmlgoodies_tooltipShadow.id = 'dhtmlgoodies_tooltipShadow';
document.body.appendChild(dhtmlgoodies_tooltip);
document.body.appendChild(dhtmlgoodies_tooltipShadow);
if(tooltip_is_msie){
dhtmlgoodies_iframe = document.createElement('IFRAME');
dhtmlgoodies_iframe.frameborder='5';
dhtmlgoodies_iframe.style.backgroundColor='#FFFFFF';
dhtmlgoodies_iframe.src = '#';
dhtmlgoodies_iframe.style.zIndex = 100;
dhtmlgoodies_iframe.style.position = 'absolute';
document.body.appendChild(dhtmlgoodies_iframe);
}
}
dhtmlgoodies_tooltip.style.display='block';
dhtmlgoodies_tooltipShadow.style.display='block';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX + 10;
dhtmlgoodies_tooltip.style.width = null; // Reset style width if it's set
dhtmlgoodies_tooltip.innerHTML = tooltipTxt;
dhtmlgoodies_tooltip.style.left = leftPos + 'px';
dhtmlgoodies_tooltip.style.top = e.clientY + 10 + st + 'px';
dhtmlgoodies_tooltipShadow.style.left = leftPos + dhtmlgoodies_shadowSize + 'px';
dhtmlgoodies_tooltipShadow.style.top = e.clientY + 10 + st + dhtmlgoodies_shadowSize + 'px';
if(dhtmlgoodies_tooltip.offsetWidth>dhtmlgoodies_tooltipMaxWidth){ /* Exceeding max width of tooltip ? */
dhtmlgoodies_tooltip.style.width = dhtmlgoodies_tooltipMaxWidth + 'px';
}
var tooltipWidth = dhtmlgoodies_tooltip.offsetWidth;
if(tooltipWidth<dhtmlgoodies_tooltipMinWidth)tooltipWidth = dhtmlgoodies_tooltipMinWidth;
dhtmlgoodies_tooltip.style.width = tooltipWidth + 'px';
dhtmlgoodies_tooltipShadow.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_tooltipShadow.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
if((leftPos + tooltipWidth)>bodyWidth){
dhtmlgoodies_tooltip.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth)) + 'px';
dhtmlgoodies_tooltipShadow.style.left = (dhtmlgoodies_tooltipShadow.style.left.replace('px','') - ((leftPos + tooltipWidth)-bodyWidth) + dhtmlgoodies_shadowSize) + 'px';
}
if(tooltip_is_msie){
dhtmlgoodies_iframe.style.left = dhtmlgoodies_tooltip.style.left;
dhtmlgoodies_iframe.style.top = dhtmlgoodies_tooltip.style.top;
dhtmlgoodies_iframe.style.width = dhtmlgoodies_tooltip.offsetWidth + 'px';
dhtmlgoodies_iframe.style.height = dhtmlgoodies_tooltip.offsetHeight + 'px';
}
}
function hideTooltip()
{
dhtmlgoodies_tooltip.style.display='none';
dhtmlgoodies_tooltipShadow.style.display='none';
if(tooltip_is_msie)dhtmlgoodies_iframe.style.display='none';
}
</SCRIPT>
Put this into your <BODY> section
<h1>Roll your mouse over the links in the text below</h1>
<P><a href="#" onmouseout="hideTooltip()" onmouseover="showTooltip(event,'This is a tooltip with a transparent shadow effect. Can you see the letters underneath the shadow?');return false">Roll over me</a></P>
分享到：
相关推荐
【Tooltip】是一个在软件开发中常见的用户界面元素，它的全称是“工具提示”，用于向用户提供额外的信息。当用户将鼠标悬停在某个控件上时，Tooltip会显示一个小窗口，展示该控件的功能或者相关说明，帮助用户理解不...
微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加： src="../ToolTip/toolTip.wxml"/> <!-- 引入toolTip模板 --> is=...
在`<style>`标签内定义了`.transparent`类的样式，用于设置`tooltip`的透明度和边框样式。 ```css .transparent { BORDER-RIGHT: indianred 1px solid; BORDER-TOP: indianred 1px solid; DISPLAY: none; ...
在Windows Presentation Foundation (WPF) 中，Tooltip是一个用于显示与鼠标指针相关的简短提示信息的控件。它通常在用户将鼠标悬停在其他UI元素上时出现，提供额外的信息。在默认情况下，Tooltip的样式是有限的，但...
border-color: transparent transparent #333 transparent; } ``` 现在，在`<head>`标签内或者`<body>`标签的底部，我们添加JavaScript代码来实现Tooltip功能： ```javascript $(document).ready(function() { /...
【标题】中的“c# ToolTip 几十种效果”是指使用C#编程语言实现的ToolTip控件的各种显示效果集合。ToolTip控件是Windows Forms或WPF应用中常见的一种组件，它通常用于在鼠标悬停在某个控件上时显示额外的信息。这个...
标题和描述提到了"tooltip"，这是一个在网页开发中常见的功能，用于显示当鼠标悬停在某个元素上时的提示信息。这里提到的两种实现方法是纯CSS和JavaScript（js）。 **纯CSS实现Tooltip** 纯CSS实现Tooltip主要依赖...
在IT行业中，"tooltip"是一个常见的交互元素，主要用于在用户将鼠标悬停在特定元素上时显示额外的信息。这个压缩包文件包含了一些关于tooltip实现的基本资源，如样式表（tooltip.css），HTML页面（tooltip.htm），...
"表格单元格自定义ToolTip组件"是一个专门解决UI交互问题的工具，它允许开发者根据需求为表格中的每个单元格提供更加详细和丰富的信息提示。这种自定义的ToolTip在Flex组件上特别有用，Flex是一种强大的富互联网应用...
jQuery Tooltip 是一个非常实用的插件，用于在用户将鼠标悬停在元素上时显示相关信息。在表格中使用 jQuery Tooltip 可以增强用户体验，让用户在不离开当前视图的情况下获取额外的数据或说明。本教程将深入讲解如何...
在PowerBuilder（PB）环境中，"标准控件"和"数据窗口"是两个核心元素，而"tooltip"则是一种非常实用的功能，可以显示在鼠标悬停时提供额外帮助文本的工具提示。本示例主要探讨如何在SLE（Single Line Edit，单行编辑...
【ToolTip提示脚本文件】 在IT领域，ToolTip是一种常见的用户界面元素，用于向用户提供额外的信息。当鼠标指针悬停在某个元素上时，ToolTip会显示一个包含详细说明的小窗口，帮助用户理解该元素的功能或内容。在...
标题“MFC_ToolTip超级类”指的是一个专门扩展了MFC原生`CToolTipCtrl`类的自定义类，以实现更丰富的功能，比如创建不同类型的ToolTip。 `ToolTip`控件通常用来提供关于用户界面上各个控件的额外信息，当鼠标悬停在...
【Ajax Tooltip】是一种交互式用户界面元素，它利用Ajax（异步JavaScript和XML）技术来动态显示与鼠标指针相关的提示信息。在网页设计中，Tooltip通常用于提供额外的上下文信息，当用户将鼠标悬停在某个元素上时，会...
在Microsoft Foundation Class (MFC)库中，ToolTip控件是一个非常实用的功能，它可以在用户将鼠标悬停在某个控件上时显示简短的帮助文本。`MFC最全ToolTip例子+源文件`这个资源包提供了关于如何在MFC应用程序中使用...
在VC++编程环境中，Tooltip是一种常见的用户界面组件，它能够在鼠标悬停在某个控件上时，显示简短的信息提示。"vc中tooltip应用"这个主题着重于如何在Visual C++项目中有效地利用Tooltip控件，提升用户体验。下面将...
在Windows Forms（WinForm）开发中，Tooltip是一个非常实用的控件，它可以在鼠标悬停在其他控件上时显示相关信息提示。标题“winform比较好的tooltip”表明我们正在讨论如何在WinForm应用中实现一个高质量、用户体验...
在Windows Forms（Winform）开发中，Tooltip是一个非常常见的组件，用于显示鼠标悬停在控件上时的简短提示信息。默认的Tooltip组件虽然功能简单，但在某些情况下可能无法满足复杂的用户界面需求。因此，自定义...
本文将详细探讨“jquery-calendar-with-tooltip_9月显示有误修复后”这个主题，它涉及到jQuery插件的开发、JavaScript编程以及日历控件的常见问题与修复策略。 首先，"jquery-calendar-with-tooltip"这个名字暗示这...
"带有图像的ToolTip显示功能"是一个增强UI交互性的技术，它允许在鼠标悬停时显示不仅包含文本，还包含图像的提示信息。这样的功能在很多应用场景下都非常有用，比如在帮助用户理解复杂图标或按钮的含义时，或者在...