<h4>data-html="true"</h4>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="<img src='http://placehold.it/400'/>"
data-html="true">data-html="true"</button>
希望显示一个大块的内容,比如上面代码中的一个大的图片
问题如下:
1. 能只指定半个方向不? 比如上下,然后代码自动根据上下的距离去显示,朝上还是朝下,同理,左右也是如此。
2. 显示框的黑边是太小了
如果有这种特殊需求,我觉得可以直接去修改 tooltip的样式,比如你的图片大小是100*100,去改变tooltip的 宽和高,为了不影响其他tooltip的样式,可以自己定义一个样式去覆盖
bootstrap tooltip里有相应的API
data-template 就是可以根据自己需要修改原始html
data-template的默认值是
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
tooltip-arrow 是提示框的三角形
tooltip-inner title的值会被注入到这里
tooltip 是包裹上面两个用的
知道这些 你就可以想改哪里 改哪里
举个栗子
增大字体尺寸
$("#button1").tooltip({
title:"lala",
template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="font-size:40px;"></div></div>'
});