twitter-bootstrap 更改放置引导工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15080237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change placement bootstrap tooltip
提问by ramadani
I want to make tooltip from boostrap, when input select has selected so tooltip show in element html. I have made that code in javascipt/jquery. this is code:
我想从 boostrap 制作工具提示，当输入选择已选择时，工具提示显示在元素 html 中。我已经在 javascipt/jquery 中制作了该代码。这是代码：
$('#pembayaran').on('change', function(){
if($(this).val()=='GRATIS' && $('#keterangan').val()==''){
$('#keterangan').attr('title', 'Keterangan wajib disi!').tooltip('show');
}
});
I want to make tooltip position on right.
我想在右侧设置工具提示位置。
I try code
我试试代码
$('#pembayaran').on('change', function(){
if($(this).val()=='GRATIS' && $('#keterangan').val()==''){
$('#keterangan').attr('title', 'Keterangan wajib disi!').tooltip('show', {
placement: 'right'
});
}
});
but this code not working. Can you help me. please
但这段代码不起作用。你能帮助我吗。请
回答by Zaid Crouch
The bootstrap plugin methods take a single argument, not two. This method call:
bootstrap 插件方法接受一个参数，而不是两个。这个方法调用：
$('#keterangan').attr('title', 'Keterangan wajib disi!').tooltip('show', {
placement: 'right'
});
is incorrect. Instead, you should keep the on change function the way you had it, and call:
是不正确的。相反，您应该保持 on change 函数的方式，并调用：
$('#keterangan').tooltip({ placement: 'right' });
earlier to set up the tooltip options (such as when the document is ready).
更早地设置工具提示选项（例如文档准备就绪时）。
The other, possibly simpler, alternative would be to add data-position="right"to the element that the pop-up is being shown on.
另一种可能更简单的替代方法是添加data-position="right"到显示弹出窗口的元素。
回答by cfz
in html:
在 html 中：
<a href="sample.html" data-placement="right" rel="tooltip" title="This is a tooltip">Hover me!</a>
in jquery:
在jQuery中：
$(function(){
$("[rel='tooltip']").tooltip();
});
回答by ShAkKiR
This worked for me
这对我有用
$('.mytooltip').tooltip('destroy');
$('.mytooltip').tooltip({ placement: 'right' });
回答by Vivens Ndatinya
For my case I needed to change the placement of the tooltip based on the screen size, as a solution I listen to the resolution change event, then in the event handler I destroy the old tooltip and add a new one with the placement determined according to the new width size:
对于我的情况，我需要根据屏幕大小更改工具提示的位置，作为解决方案，我侦听分辨率更改事件，然后在事件处理程序中销毁旧的工具提示并添加一个新的工具提示，其位置根据新的宽度尺寸：
$(document).ready(function() {
var enablePasswordTooltip = function() {
var passwordTooltipContent = $('#PasswordTooltipContent').html();
var isMobileResolution = ($(window).width() < 700);
$('input.password-tooltip').tooltip({
'trigger': 'focus',
'placement': isMobileResolution ? 'top' : 'right',
'html': true,
'title': passwordTooltipContent
});
};
// Enable the Password tooltip when the page is loaded
enablePasswordTooltip();
$(window).resize(function() {
// After the resolution changes, destroy the tooltip and add it again in order to adjust to the new resolution
$('input.password-tooltip').tooltip('destroy');
setTimeout(function(){
enablePasswordTooltip();
})
});
});
