为什么我无法在Bootstrap工具提示中显示图像？

Question

I'm using Bootstrap framework v3.3.0 for my website.

I want to show on image as a tool-tip when user hovers a mouse pointer over the icon. For it I'm having following HTML :

<div class="col-sm-5">
  <div class="input-group">  
    <input type="text" class="form-control" name="trans_id" id="trans_id"/>
    <span class="input-group-addon">
      <a href="#" class="glyphicon glyphicon-question-sign" rel="tooltip" data-html="true" title="localhost/img/demo_img.png"></a>    
    </span>
  </div>
</div>

jQuery code is as follows :

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

On hovering I'm not able to display the image. Now the text I mentioned in title(ie The complete image location path is displayed as a tool -tip.)

All the necessary CSS and jQuery files are included.

Please help me in this regard.

Thanks in advance.

Answer 1

The html parameter is a boolean, so you need to set it to true with

<a data-html="true" ...etc... >

Then you need to use the title to supply yout HTML content:

<a data-html="true" title="<img src='...' />" ...etc... >

Bootstrap 3 docs for this are here:

http://getbootstrap.com/javascript/#tooltips-usage

jsfiddle example here:

http://jsfiddle.net/sifriday/7s81L84m/