[英]How to display different titles for the Tooltip (Bootstrap) and to html validate the form?
I try to show two different title for the Tooltip (Bootstrap) and a standard html validation forms. 我尝试为工具提示(Bootstrap)和标准的html验证表单显示两个不同的标题。
Sample code to http://jsfiddle.net/00kvznLu/ 示例代码到http://jsfiddle.net/00kvznLu/
<form data-toggle="validator" role="form" class='containter'>
<div class="form-group">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" data-toggle="tooltip" title="Do it here..." pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
</div>
<div class="form-group">
<input type="submit" value="Check Form">
</div>
</form>
But for some reason, I do not Tooltip displays as well as on http://getbootstrap.com/javascript/#tooltips 但是由于某些原因,我的Tooltip不能像在http://getbootstrap.com/javascript/#tooltips上那样显示
Is it possible to make so that when you move the computer mouse was shown title = "messages1", and the derivation of error "pattern" to the standard message "Enter the data in the specified format." 是否可以使在移动计算机鼠标时显示title =“ messages1”,并将错误“ pattern”派生为标准消息“以指定格式输入数据”。 added title = "messages2"? 添加标题=“ messages2”?
Is it possible to do like this tooltip-title="messages1"
and error-pattern-title="messages2"
? 是否可以这样做,例如tooltip-title="messages1"
和error-pattern-title="messages2"
吗?
Bootstrap Tooltip: 引导工具提示:
Error message: 错误信息:
Update 1: Added data-title="Custom Title"
更新1:添加了data-title="Custom Title"
<input type="text" data-toggle="tooltip" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" data-title="Custom Title" title="Do it here.." id="inputTwitter" placeholder="1000hz" required>
use the below script. 使用以下脚本。 Trick is to apply a tooltip to the parent tag of the input. 技巧是将工具提示应用于输入的父标记。 Let me know if this helps. 让我知道是否有帮助。 Working Fiddle 工作小提琴
$(function () {
$('#inputTwitter').parent().tooltip({
title : $('#inputTwitter').data('title')
});
})
You can set it like this: 您可以这样设置:
var newValue = 'This is a new message';
$(tooltip-selector).attr('title', newValue)
.tooltip('fixTitle')
.tooltip('show');
I suggest you to use data-original-title
instead of title
Fiddle here 我建议您在这里使用data-original-title
而不是title
Fiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.