When you choose to use Bootstrap Tooltip or Popover as container, all tooltips/popovers will be shown positioned to the top, but you can change their position by triggering the error.field.bv event as below.
The following form uses Bootstrap Tooltip, positioned to the right, to show the error message.
<form id="tooltipContainerForm" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phone" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>$(document).ready(function() {
$('#tooltipContainerForm')
.bootstrapValidator({
container: 'tooltip',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and can not be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and can not be empty'
}
}
},
phone: {
validators: {
digits: {
message: 'The phone number can contain digits only'
},
notEmpty: {
message: 'The phone number is required and can not be empty'
}
}
}
}
})
.on('error.field.bv', function(e, data) {
// Get the tooltip
var $parent = data.element.parents('.form-group'),
$icon = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]'),
title = $icon.data('bs.tooltip').getTitle();
// Destroy the old tooltip and create a new one positioned to the right
$icon.tooltip('destroy').tooltip({
html: true,
placement: 'right',
title: title,
container: 'body'
});
});
});The following form uses Bootstrap Popover, positioned to the right, to show the error message.
<form id="popoverContainerForm" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phone" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>$(document).ready(function() {
$('#popoverContainerForm')
.bootstrapValidator({
container: 'popover',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required and can not be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required and can not be empty'
}
}
},
phone: {
validators: {
digits: {
message: 'The phone number can contain digits only'
},
notEmpty: {
message: 'The phone number is required and can not be empty'
}
}
}
}
})
.on('error.field.bv', function(e, data) {
// Get the popover
var $parent = data.element.parents('.form-group'),
$icon = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]'),
content = $icon.data('bs.popover').getContent();
// Destroy the old popover and create a new one positioned to the right
$icon.popover('destroy').popover({
html: true,
placement: 'right',
content: content,
trigger: 'hover click',
container: 'body'
});
});
});
Comments
Don't submit the issue here
If you want to report a bug, please submit the issue on Github. For a general question or feedback, use the form below.