看来,Label
没有Hint
或ToolTip
或Hovertext
财产.那么当Label
鼠标逼近时,显示提示,工具提示或悬停文本的首选方法是什么?
我试图用div而不是标签来越过默认的错误消息标签.我也看过这篇文章,并了解如何做到这一点,但我对CSS的限制令我难以忘怀.我如何像其中一些示例一样显示:
示例#1(Dojo) - 必须键入无效输入才能看到错误显示
示例#2
下面是一些示例代码,它将错误标签覆盖为div元素
$(document).ready(function(){
$("#myForm").validate({
rules: {
"elem.1": {
required: true,
digits: true
},
"elem.2": {
required: true
}
},
errorElement: "div"
});
});
Run Code Online (Sandbox Code Playgroud)
现在我对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;
}
Run Code Online (Sandbox Code Playgroud)
更新:
好吧我现在正在使用这个代码,但是弹出窗口上的图像和位置比边框大,可以调整为动态高度吗?
if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
element = element.parent();
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + …
Run Code Online (Sandbox Code Playgroud) 使用纯HTML或jQuery辅助JavaScript,如何在各个<option>
元素上显示工具提示以帮助决策过程(没有足够的空间进行不同类型的控制,并且需要一些帮助).
这可以通过插件或类似方式完成吗?
我为jQuery尝试了一些工具提示插件但没有成功(包括名为Tooltip的插件).
该解决方案应该:
<select>
包装<option>
元素.因此,如果解决方案想要使用其他标签,则应将这些元素动态转换为所需的元素(并且不要期望初始标记有任何不同).
这里的代码可以在这里找到,它位于SafeSurf部分下面,我想在选项翻转时显示一些关于选项含义的帮助.目前它只能在"事后"显示,并且对用户的一些前期帮助将是有益的.
感谢这并不容易,并且可能需要创建一些东西 - 所以赏金将被授予最完整的解决方案或特定的钩子,这使我最接近我可以创建的解决方案.
当我将鼠标悬停在按钮上并显示工具提示时,按钮会跳跃.如果我禁用工具提示,它不会跳转.此外,右按钮失去圆形边缘.我怎样才能防止这种情况发生?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Run Code Online (Sandbox Code Playgroud)
使用Javascript:
$('[rel=tooltip]').tooltip();
Run Code Online (Sandbox Code Playgroud)
工作版......
http://jsfiddle.net/BA4zM/147/
这是一个没有跳跃的网站...
工具提示是了解应用程序非常有用的界面范例.它们是可视控件和与该控件关联的应用程序特定操作之间的映射.用户可以通过悬停鼠标指针来探索操作而无需调用它.
触摸设备使这种范例基本上不可能.这限制了应用程序的可用性,这在某些情况下变得非常神秘.
您是否知道触摸设备是否存在工具提示概念的替代品?它们在ui交互中实际上缺乏一个自由度:指针位置.如何有效地重新获得这种沟通渠道?
我正在使用WPFtoolkit DataGrid
,我必须将文本换行DataGridTextColumn
或者我必须ToolTip
在文本列中添加一个.我在网上搜索过,但我找不到合适的解决方案.期待您的宝贵建议......
当您将鼠标悬停在网页的某个区域上时,有许多基于JavaScript的库可以显示工具提示.有些是相当简单的,有些允许工具提示显示用CSS设置样式的HTML内容.
但是有没有办法在不使用JavaScript的情况下显示样式化的工具提示?如果您只使用该title
属性,则不会处理标记(例如foo<br />bar
,不会产生换行符).我正在寻找一种解决方案,允许用户在不使用任何JavaScript的情况下显示样式化的HTML内容.
¿如何在XAML的工具提示中为文本添加断行线?
我尝试这个:
<Label Name="label4" UseLayoutRounding="False" Focusable="False" AllowDrop="False" Foreground="Black" Margin="6,44,132.027,76" ToolTipService.ShowDuration="12000">
<Label.ToolTip>
<ToolTip>
<TextBlock>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </TextBlock>
<TextBlock>Suspendisse eget urna eget elit ullamcorper tincidunt. Sed nec arcu sed ante sodales </TextBlock>
<TextBlock>Pellentesque elit libero, semper ac tincidunt vitae, euismod at ligula.</TextBlock>
</ToolTip>
</Label.ToolTip>
<Label.Content>
<TextBlock TextAlignment="Right" TextWrapping="Wrap" Height="19" Width="108" >Lorem Ipsum</TextBlock>
</Label.Content>
</Label>
Run Code Online (Sandbox Code Playgroud)
但不起作用:
我会从twitter bootstrap添加一个右键工具提示到一个图标元素.
代码是这样的:
<h3>Sensors Permissions <i class="icon-info-sign"></i></h3>
Run Code Online (Sandbox Code Playgroud)
我想,当光标在图标上方时,会显示一个带有一些信息的正确工具提示......
我能怎么做?仅包含tooltip.js librery并在图标代码中添加一个元素是不够的?我糊涂了.
谢谢.
如何对齐工具提示的自然风格:鼠标指针的右下角?
~~~还有一些文本可以提交.~~~还有一些文本可以提交.~~~还有一些文本可以提交.~~~
<!DOCTYPE html>
<html>
<head>
<title>Tooltip with Image</title>
<meta charset="UTF-8">
<style type="text/css">
.tooltip {
text-decoration:none;
position:relative;
}
.tooltip span {
display:none;
}
.tooltip span img {
float:left;
}
.tooltip:hover span {
display:block;
position:absolute;
overflow:hidden;
}
</style>
</head>
<body>
<a class="tooltip" href="http://www.google.com/">
Google
<span>
<img alt="" src="http://www.google.com/images/srpr/logo4w.png">
</span>
</a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)