向div添加工具提示

我有一个这样的div标签:

<div>
  <label>Name</label>
  <input type="text"/>
</div>

我如何显示一个工具提示:div的悬停，最好有一个淡入/淡出效果。

当前回答

您可以尝试引导工具提示。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

进一步阅读

2017-11-22 09:12:15

其他回答

这是一个漂亮的jQuery工具提示:

https://jqueryui.com/tooltip/

要实现这一点，只需遵循以下步骤:

Add this code in your <head></head> tags: <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <script type="text/javascript"> $("[title]").tooltip(); </script> <style type="text/css"> /* tooltip styling. by default the element to be styled is .tooltip */ .tooltip { display:none; background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png); font-size:12px; height:70px; width:160px; padding:25px; color:#fff; } </style> On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.

注意:当JavaScript被禁用时，它将回退到默认的浏览器/操作系统工具提示。

2011-08-19 05:15:33

我做了一些事情，应该能够适应一个div以及。

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

要了解更深入的讨论，请参阅我的文章:

一个简单的格式化工具提示文本悬停

2011-10-06 13:41:17

您可以尝试引导工具提示。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

进一步阅读

2017-11-22 09:12:15

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

您还可以自定义工具提示样式。请参阅此连结: http://jqueryui.com/tooltip/#custom-style

2014-07-23 06:15:59

试试这个。你可以这样做，只有css和我只添加了数据标题属性的工具提示。

.tooltip { 位置:相对; 显示:inline-block; ｝ .tooltip [data-title]:徘徊:{后内容:attr (data-title); 填充:4px 8px; 颜色:# fff; 位置:绝对的; 左:0; 上图:110%; 空白:nowrap;} border - radius: 5 px; 背景:# 000; ｝ <div data-title="My tooltip" class="tooltip"> < >标签名称> < /标签 < input type = " text " / > < / div >

2017-11-20 04:11:08

向div添加工具提示

推荐文章

最新文章

标签