I am currently using twitter bootstrap to add tooltips.
Heres my JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a img").tooltip({'placement': 'right'});
});
</script>
I am trying to append an image with jquery with the rel attr for tooltips like this:
$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"/></a>');});
Without the image this works, but as soon as i add the image in it stops working.
Any ideas what is wrong with the above?
The syntax on your .append
is off. Try:
$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"></a>');
Demo: Bootply.com/65857
Hi it seem to be you have solved your problem. But I would like to give a different solution for your problem. I personally use this method to add tooltip texts to images.
Here is my HTML part.
<a href="#" data-toggle="tooltip" title="Your tool tip text here."><img src="imgs/sample.png"></a>
Now here is the Jquery part
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
If you want to know more about bootstrap tooltips you could refer this .
Best way in my view
<a href="#" data-toggle="tooltip" data-placement="bottom" title="<img src='../../images/mrraja.jpg' width='105' height='130' />">1</a>
<script>
$(document).ready(function(){
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.