代码之家 › 专栏 › 技术社区 › B. Clay Shannon-B. Crow Raven

当鼠标悬停在浏览器中的ID'dHTML元素上时,如何调用“工具提示”?

html css jquery

B. Clay Shannon-B. Crow Raven · 技术社区 · 11 年前

我正在开发一个版本的“哈克·费恩”,根据说话者的不同,使用CSS以不同的颜色显示对话框(哈克贝利是紫色,爸爸是棕色,等等)

#huck {
    color: purple;
}

…和HTML格式如下:

<p><span id="huck">"But some says he got out and got away, and come to America."</span></p>

可以看到这样的工作模式 here

我有一个“字符映射”,显示文档开头附近的哪个字符是哪个颜色,但我意识到许多读者会忘记哪个颜色代表哪个字符,我希望让他们将鼠标悬停在彩色文本上,在“弹出窗口”或“工具提示”中看到你的名字,而不是强迫他们一直回到文档开头来提醒自己。因此,如果他们将鼠标悬停在上面的句子上(“但是”和“美国”之间的任何位置),他们会看到类似“哈克在说话”的内容。

这可能吗?如果是,怎么办?

4 回复 | 直到 11 年前

Alvaro Menéndez 11 年前

那之后呢

#huck {position:relative;}
#huck:hover:after {
    position:absolute;
    content:'This is huck talking';
    top:30px;
    left:0;
    display:inline-block;
    background-color:violet;
    color:white;

}

而且不需要在所有yout html中添加这么多的标题标签。。此外,您还可以根据需要设置“工具提示”的样式。

Vijay 11 年前

在段落标记上建议标题属性

<p><span id="huck" title="Huck is speaking">"But some says he got out and got away, and come to America."</span></p>

Community Mohan Dere 8 年前

为了补充@Alvaro Menndez的答案,我在SO上找到了一个纯css解决方案。

检查小提琴: http://jsfiddle.net/lharby/tL4s1hjr/82/

它使用CSS3选择器来设置标题属性的样式:

span:hover {
    position:relative;
    cursor:pointer;
}

span[title]:hover:after {
  content: attr(title);
  background:yellow;
  padding: 4px 8px;
  color: #000;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
}

这个问题得到了回答 here on SO

最初我打算尝试使用一个jquery悬停函数,但我认为这要简单得多。

chiapa 11 年前

你可以尝试使用剑道UI工具提示。您可以随意设置它们的样式,并更改一些设置,例如它出现的位置。

$("#aTooltip").kendoTooltip({
  position: "top",
  animation: {
    open: {
      effects: "fadeIn",
      duration: 300
    },
    close: {
      effects: "fadeIn",
      reverse: true,
      duration: 300
    }
  }
});
$("#aTooltip2").kendoTooltip({
  position: "bottom",
  animation: {
    open: {
      effects: "slideIn:left",
      duration: 300
    },
    close: {
      effects: "slideIn:left",
      reverse: true,
      duration: 300
    }
  }
});
$("#aTooltip3").kendoTooltip({
  position: "right",
  animation: {
    open: {
      effects: "zoom",
      duration: 300
    },
    close: {
      effects: "zoom",
      reverse: true,
      duration: 300
    }
  }
});

.tts {
  float: left;
  margin: 0 20px;
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.silver.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>

<br/>
<div id="tooltips">
  <div id="aTooltip" class="tts" title="Here is a tooltip">
    This is one
  </div>
  <p></p>
  <div id="aTooltip2" class="tts" title="Here is another tooltip">
    This is two
  </div>
  <p></p>
  <div id="aTooltip3" class="tts" title="Here is some other tooltip">
    This is three
  </div>
  <p></p>
</div>

这对你有用吗?您可以根据需要编辑工具提示样式,使其看起来比默认标题工具提示更漂亮,或者使用一些剑道UI默认样式作为工具提示。

也可以向工具提示中添加动画。