Bootstrap 工具提示动态放置
Bootstrap tooltip dynamic placement
我正在通过属性选择器使用 Bootstrap 工具提示。即任何具有 title
属性的元素都应呈现为工具提示:
$('[title]').tooltip({placement: 'bottom', trigger: 'hover'});
但是,出于某些原因和某些元素,我想更改位置。最初,我没有为元素使用 data-placement
属性,但是对于我希望其工具提示具有默认位置以外的不同位置的元素,我为它们提供了 data-placement
属性,并将上面的代码修改为像下面这样:
$('[title]').tooltip({placement: (typeof $(this).attr('data-placement') === 'undefined')? 'bottom' : $(this).attr('data-placement'), trigger: 'hover'});
对于没有 data-placement
属性的元素,此代码应将位置设置为 bottom
,而对于具有该属性的元素,将其设置为等于其值。
但是,代码没有按预期工作,它甚至为每个元素设置了 placement = bottom,例如,那些有 data-placement='right
我认为这是因为 $(this)
没有引用工具提示,而是你的父选择器,很可能是 document
。
试试这个:
$('[title]').each(function() {
$(this).tooltip({
placement: (typeof $(this).attr('data-placement') === 'undefined') ? 'bottom' : $(this).attr('data-placement'),
trigger: 'hover'
});
});
placement
的回调函数接收 2 个参数 - 第一个是工具提示参数,第二个是原始元素。
您可以使用此元素来获取您要查找的数据:
$('[title]').tooltip({
placement: function(t_el, el) {
return (typeof $(el).data('placement') === 'undefined') ? 'bottom' : $(el).data('placement');
}, trigger: 'hover'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div style="margin: 35px 55px;">
<button type="button" class="btn btn-default" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
我正在通过属性选择器使用 Bootstrap 工具提示。即任何具有 title
属性的元素都应呈现为工具提示:
$('[title]').tooltip({placement: 'bottom', trigger: 'hover'});
但是,出于某些原因和某些元素,我想更改位置。最初,我没有为元素使用 data-placement
属性,但是对于我希望其工具提示具有默认位置以外的不同位置的元素,我为它们提供了 data-placement
属性,并将上面的代码修改为像下面这样:
$('[title]').tooltip({placement: (typeof $(this).attr('data-placement') === 'undefined')? 'bottom' : $(this).attr('data-placement'), trigger: 'hover'});
对于没有 data-placement
属性的元素,此代码应将位置设置为 bottom
,而对于具有该属性的元素,将其设置为等于其值。
但是,代码没有按预期工作,它甚至为每个元素设置了 placement = bottom,例如,那些有 data-placement='right
我认为这是因为 $(this)
没有引用工具提示,而是你的父选择器,很可能是 document
。
试试这个:
$('[title]').each(function() {
$(this).tooltip({
placement: (typeof $(this).attr('data-placement') === 'undefined') ? 'bottom' : $(this).attr('data-placement'),
trigger: 'hover'
});
});
placement
的回调函数接收 2 个参数 - 第一个是工具提示参数,第二个是原始元素。
您可以使用此元素来获取您要查找的数据:
$('[title]').tooltip({
placement: function(t_el, el) {
return (typeof $(el).data('placement') === 'undefined') ? 'bottom' : $(el).data('placement');
}, trigger: 'hover'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div style="margin: 35px 55px;">
<button type="button" class="btn btn-default" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>