CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
PHPLover
PHPLover

Reputation: 12957

How to add vertical scroll bar to the image that is displayed in a Bootstrap tool-tip?

I'm using Bootstrap framework v 3.3.0 for my website.

I'm showing an image in a tool-tip but as this image size is big I want to add vertical scroll bars for it so that the user can see the image by scrolling up and down. During this scroll motion the tool-tip should not get hide. How to achieve this?

Following is the code I tried for showing an image into a Bootstrap tool-tip:

HTML code:

<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 code is as follows:

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

I'm displaying the image at the bottom of the icon.

Please help me in this regard.

Thanks in advance.

Upvotes: 1

Views: 1807

Answers (2)

dm4web
dm4web

Reputation: 4652

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

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

Upvotes: 1

vamshichalla
vamshichalla

Reputation: 141

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

Upvotes: 0

Related Questions