Javascript 基本工具提示（jQuery）

HTML:

工具提示内容

我检查了一些工具提示插件，但我的要求是一个非常基本的工具提示，在悬停时显示一个隐藏的div。所有插件要么有太多我不需要的高级选项，要么已经设计了可能很难修改的工具提示

我非常感谢你的帮助。谢谢。

你可以自己滚

我的建议是只存储传递给

onmouseover

事件处理程序的鼠标事件对象的

clientX

和

clientY

属性。然后将隐藏div的CSS屏幕位置（

左

，

顶

）设置为这些坐标，您将成为金色确保div的

位置

CSS属性为

绝对

这是一个未经测试的简单示例，仅为您提供一个想法：

<a href="#" rel="tooltip">Open Tooltip</a>
<div id="tooltip">Tooltip Content</div>

---

下面是我使用的一个非常简单的CSS工具提示的代码：

CSS:

顶部和左侧属性使其浮动在文本上方。将此更改为您喜欢的位置。另外，更改

display:inline至<代码>显示：块如果您希望它像普通div一样进行定位

HTML:


名称
.
如果您只想在鼠标悬停时显示div，请使用：

     <div class="name">
       Name 
        <a class="tooltip" href="#">
          Tooltip
             <span>
               Tooltip text here.
             </span>
        </a>.
     </div>

可以将markcial的解决方案集成到函数中，使工具提示div显示在光标旁边

看起来像这样

$('a[rel="tooltip"]').hover(
   function(){ $('#tooltip').show() }, //or maybe use fadeIn() instead of .show() 
   function(){ $('#tooltip').hide() }
)

下面是一个更基本的工具提示：

隐藏工具提示：

$('a[rel="tooltip"]').hover(
   function(e){ $('#tooltip').css({ position:'absolute', top:e.pageY, left:e.pageX }).show() }, //or maybe use fadeIn() instead of .show() 
   function(){ $('#tooltip').hide() }
)

.tooltip span {
display:none; 
}

显示工具提示：

$('a[rel="tooltip"]').hover(
   function(e){ $('#tooltip').css({ position:'absolute', top:e.pageY, left:e.pageX }).show() }, //or maybe use fadeIn() instead of .show() 
   function(){ $('#tooltip').hide() }
)

.tooltip span {
display:none; 
}

我正在寻找相同的，但没有javascript或jquery。我使用纯CSS3转换找到了以下方法

CSS3

.tooltip:hover span {
display:inline; 
}

HTML

a.tooltip span
{
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
  width: 250px;
  height: auto;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  border-radius: 6px;
  padding: 2px;
  text-align: center;
  background: #000;
  border: 1px solid #808080;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 2s ease-out 0s;
  -moz-transition: all 2s ease-out 0s;
  -ms-transition: all 2s ease-out 0s;
  -o-transition: all 2s ease-out 0s;
  transition: all 2s ease-out 0s;
}
a:hover.tooltip span
{
  visibility: visible;
  -webkit-opacity: 0.90;
  -moz-opacity: 0.90;
  opacity: 0.90;
}



有关live demo的更多详细信息，请访问此处。
插件通常非常广泛。最好自己写点东西。向页面上的任何元素添加属性：tooltip=“content”。你可以改变你喜欢的外观，我只添加了什么是必要的CSS


//工具提示v。1.0由Krzysztof Antosik编写
//显示工具提示
函数tooltipShow（）{
if（typeof（$（“#工具提示”）！=“未定义”&&$（“#工具提示”）！==null）{
$（“#工具提示”）.remove（）；
}
var title=$（this.attr（“工具提示”）；
$（“正文”）。追加（“+标题+”）
}
//隐藏工具提示
函数tooltipHide（）{
$（“#工具提示”）.remove（）；
}
//跑来跑去
$（“[工具提示]”）。悬停（工具提示，工具提示）；
//移动工具提示
$（“[工具提示]”）。在（'mousemove'，函数（e）上{
变量positionY=$（this.offset（）.top-$（window.scrollTop（）；
var positionX=$（this.offset（）.left-$（window.scrollLeft（）；
var endX=$（document）.width（）-70；
var保证金=30；
//最上面
如果（（位置X>50）和&（位置X如果（位置Y您是否希望在工具提示中显示hiddev div。然后用户将如何知道，从而将鼠标悬停在那里。+1用于将要求降到最低。非常有效，谢谢。只是位置不正确；它在右下角打开，而我希望它在右上角。我想我必须找到工具提示的高度并设置它作为顶部：-[高度]，不是吗？尝试
clientX
和
clientY
而不是
pageX
和
pageY
。令人惊讶的简单。虽然我来这里寻找jQuery解决方案，但我很高兴选择这种纯CSS方法。唯一的缺点是没有传统工具提示中典型的淡入/淡出功能，而且很容易通过jQuery。也就是说，使用纯CSS似乎是可行的：使用CSS3转换可以获得淡入淡出效果。但这在传统浏览器中不受支持。好的一点是，CSS3比我链接到的旧解决方案更有意义。IE似乎是唯一不支持CSS3转换属性的浏览器。我使用了CSS3饼图（）在过去，在IE6+上实现CSS3边界半径非常成功。不幸的是，它似乎不支持转换（）。这里关于IE转换支持的现有讨论：注意，这只是隐藏和取消隐藏一些内联文本。通常，当人们说“工具提示”时它们意味着至少可以悬停的东西，或者与鼠标相关，或者与工具提示应用到的东西相关。
a.tooltip span
{
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
  width: 250px;
  height: auto;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  border-radius: 6px;
  padding: 2px;
  text-align: center;
  background: #000;
  border: 1px solid #808080;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 2s ease-out 0s;
  -moz-transition: all 2s ease-out 0s;
  -ms-transition: all 2s ease-out 0s;
  -o-transition: all 2s ease-out 0s;
  transition: all 2s ease-out 0s;
}
a:hover.tooltip span
{
  visibility: visible;
  -webkit-opacity: 0.90;
  -moz-opacity: 0.90;
  opacity: 0.90;
}

<a class="tooltip" href="#">Hover Me
    <span>Some text information that you want to display in tooltip</span></a>