Jquery 如何向引导工具提示中显示的图像添加垂直滚动条？

我正在为我的网站使用引导框架v3.3.0

我在工具提示中显示了一个图像，但是由于这个图像的大小很大，我想为它添加垂直滚动条，这样用户就可以通过上下滚动来查看图像。在此滚动运动期间，刀具尖端不应隐藏。如何做到这一点

以下是我尝试在引导工具提示中显示图像的代码：

HTML代码：

<div class="input-group">  
  <input type="text" class="form-control" name="stud_id" id="stud_id"/>
    <span class="input-group-addon">
      <a href="#" class="glyphicon glyphicon-question-sign" rel="tooltip" data-html="true" title="<img src='localhost/img/demo_image.jpg' width='150' height='250'/>"></a>    
    </span>
  </div>

我正在图标底部显示图像

请在这方面帮助我

提前感谢。

您可以在javascript中添加另一个选项，如下所示：
You can add one more option in javascript like this:

$(document).ready(function() {
  $('.input-group-addon').tooltip({
    selector: "a[rel=tooltip]",
    placement: "bottom",
    template : '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div>'+
               '<div class="tooltip-inner"></div></div>'
  })
});


And you can apply any CSS whatever you want. I got this from here      
http://getbootstrap.com/javascript/#tooltips

I hope it will solve your problem

$（文档）.ready（函数（）{
$（'.input group addon'）。工具提示({
选择器：“a[rel=工具提示]”，
位置：“底部”，
模板：“”+
''
})
});
你可以应用任何你想要的CSS。我从这里得到这个
http://getbootstrap.com/javascript/#tooltips
我希望它能解决你的问题

CSS

.tooltip-inner {
    max-height:150px!important;
    overflow-y:scroll
}

JQ

//indicates whether the mouse over tooltip
var hover = false;
//for convenience
var $TT = $('.input-group-addon');


$TT.tooltip({
    selector: "a[rel=tooltip]",
    placement: "bottom"
})

**JQ**

$('body').on('mouseenter', '.tooltip,a[rel=tooltip]', function () {
    hover = true;
})
$('body').on('mouseleave', '.tooltip', function () {

    hover = false;
    //$TT.tooltip('hide') dont work;
    $('.tooltip').hide();
})

//if hover is true hover prevents the tooltip close
$TT.on('hide.bs.tooltip', function () {
    if (hover == true) return false;
})

---

我通过添加模板属性尝试了jQuery代码。但它并没有向工具提示图像添加垂直滚动条。我的代码的结果和以前一样。非常感谢dm4web。你为我施了魔法。你的答案已经被接受，并且也被投了赞成票。再次非常感谢你。

//indicates whether the mouse over tooltip
var hover = false;
//for convenience
var $TT = $('.input-group-addon');


$TT.tooltip({
    selector: "a[rel=tooltip]",
    placement: "bottom"
})

**JQ**

$('body').on('mouseenter', '.tooltip,a[rel=tooltip]', function () {
    hover = true;
})
$('body').on('mouseleave', '.tooltip', function () {

    hover = false;
    //$TT.tooltip('hide') dont work;
    $('.tooltip').hide();
})

//if hover is true hover prevents the tooltip close
$TT.on('hide.bs.tooltip', function () {
    if (hover == true) return false;
})