CODEWITHSUNDEEP
twitter-bootstrap
Amit Verma
Amit Verma

Reputation: 41229

How to display an image inside bootstrap tooltip?

I am trying to display an image in tooltip when a visiter clicks on the "welcome" link in homepage of my website.

Here is my code so far :

<a href="#" data-toggle="tooltip"title='<img src='hello.png'>">Welcome</a>
 <script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();});
</script>

But it failed to display the image, it displays the html of image instead. Also I want to change the color of tooltip to Gray .

Is this possible? Please help.

Upvotes: 0

Views: 5288

Answers (1)

Kishan
Kishan

Reputation: 935

1) You have mismatched single and double quotes in the title attribute of the <a> tag.

2) By default, bootstrap only allows text in the tooltip. You have to set a configuration option to allow HTML.

<a href="#" data-toggle="tooltip" title="<img src='hello.png'>">Welcome</a>

<script type="text/javascript">
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({
            html: true
        });
    });
</script>

Upvotes: 3

Related Questions