Questions tagged «tooltip»

工具提示是一个GUI(图形用户界面)元素,通常在鼠标指针悬停在GUI上的某个项目上时弹出,并提供一些上下文信息或说明。


5
如何在svg图形中添加工具提示?
我有一系列的svg矩形(使用D3.js),我想在鼠标悬停时显示一条消息,该消息应被用作背景的框包围。它们应彼此完全对齐,并与矩形(顶部和中心)完全对齐。做这个的最好方式是什么? 我尝试使用“ x”,“ y”,“ width”和“ height”属性添加svg文本,然后在svg rect之前添加。问题是文本的参考点在中间(因为我希望它居中对齐,所以我使用text-anchor: middle),但是对于矩形,它是左上角的坐标,而且我想在文本周围留一点空白,使它有点像痛苦。 另一种选择是使用html div,这会很好,因为我可以直接添加文本和填充,但是我不知道如何获取每个矩形的绝对坐标。有没有办法做到这一点?

6
如何使用纯CSS创建“工具提示尾巴”?
我刚刚遇到了一个简洁的CSS技巧。看看小提琴... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class="tooltiptail"></div> </div> <br /> <div>How do I get this effect with only CSS? <br /> …

7
引导程序“ tooltip”和“ popover”在表中增加了额外的大小
注意: 根据您的Bootstrap版本(是否在3.3之前),您可能需要一个不同的答案。 请注意这些注意事项。 当我在此代码中激活工具提示(悬停在单元格上方)或弹出框时,表的大小正在增加。如何避免这种情况? 在这里emptyRow-函数生成带有100的tr <html> <head> <title></title> <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script> <style> #matrix td { width: 10px; height: 10px; border: 1px solid gray; padding: 0px; } </style> <script> function emptyRow() { str = '<tr>' for (j = 0; j < 100; …


7
如何在HTML“选项”标签上显示工具提示?
使用纯HTML或jQuery辅助的JavaScript,如何在单个<option>元素上显示工具提示以辅助决策过程(没有足够的空间容纳其他类型的控件,并且需要一些帮助)。 可以通过插件或类似工具来完成此操作吗? 我尝试了一些jQuery的工具提示插件,但均未成功(包括一个名为Tooltip的工具)。 该解决方案应: 在IE,WebKit和Gecko中工作; 利用标准的<select>包装<option>元素。 因此,如果解决方案要使用其他标签,则应将这些元素动态转换为所需元素(并且不要期望初始标记会有所不同)。 可以在此处找到它的代码,它位于SafeSurf部分下,在这里我想向您展示一些关于选项含义的帮助。目前,它只能在“事后”显示,并且对用户的一些前期帮助将是有益的。 意识到这并不容易,并且可能需要创建一些东西-因此赏金将授予最完整的解决方案或使我最接近可以创建的解决方案的特定挂钩。

7
jQuery覆盖默认验证错误消息显示(Css)弹出/工具提示,如
我正在尝试使用div而不是标签来替代默认错误消息标签。我也看了这篇文章,并了解了如何做,但是CSS的局限性困扰着我。我如何像这些示例中的那样显示它: Example#1(Dojo) -必须输入无效的输入才能看到错误显示 Example#2 这是一些将错误标签覆盖到div元素的示例代码 $(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div" }); }); 现在我对css部分不知所措,但这是: div.error { position:absolute; margin-top:-21px; margin-left:150px; border:2px solid #C0C097; background-color:#fff; color:white; padding:3px; text-align:left; z-index:1; color:#333333; font:100% arial,helvetica,clean,sans-serif; font-size:15px; font-weight:bold; } 更新: 好的,我现在正在使用此代码,但是弹出窗口中的图像和位置大于边框,可以将其调整为动态高度吗? if (element.attr('type') …

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.