如何将垂直滚动条添加到Bootstrap工具提示中显示的图像？

PHPLOVER 发表于 Dev

PHP爱好者

我正在为我的网站使用Bootstrap Framework v 3.3.0。

我在工具提示中显示图像，但是由于该图像太大，因此我想为其添加垂直滚动条，以便用户可以通过上下滚动来查看图像。在此滚动运动过程中，工具提示不会隐藏。如何实现呢？

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

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>

jQuery代码如下：

$(document).ready(function() {
  $('.input-group-addon').tooltip({
    selector: "a[rel=tooltip]",
    placement: "bottom"
  })
});

我在图标底部显示图像。

请在这方面帮助我。

提前致谢。

dm4web

http://jsfiddle.net/z9vd9tk1/1/

的CSS

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

//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;
})