问答详情
源自:3-10 提示框--其他的自定义属性

tooltip怎么显示一个大块的内容

  <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.  显示框的黑边是太小了


提问者:likeflower950 2016-05-14 19:19

个回答

  • 临风独舞翩跹
    2016-05-16 16:28:03
    已采纳

    如果有这种特殊需求,我觉得可以直接去修改 tooltip的样式,比如你的图片大小是100*100,去改变tooltip的 宽和高,为了不影响其他tooltip的样式,可以自己定义一个样式去覆盖

  • kumin
    2016-07-05 16:26:46

    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>'

        });