Figure Captions with Bootstrap Tooltips

Description:

For this code demo we're using Bootstrap's Tooltip component. Usually, tooltips are small boxes of text that appear when the user hovers over an image or text link. Ordinary Tooltip

However in this demo, we're re-purposing Tooltips to display figure caption overlays on thumbnail images.

To see this effect in action, mouse over or tap images below.

Add HTML to your `<body>` tag:

<div class="col-sm-4">   
<figure>    
<img class="img-thumbnail" src="https://placeimg.com/600/400/nature/4/" alt="...">
<figcaption>     
<h4>Heading 4</h4>     
<p>Short description</p>    
</figcaption>   
</figure>  
</div>    

<div class="col-sm-4">   
<figure>    
<img class="img-thumbnail" src="https://placeimg.com/600/400/nature/5/" alt="...">
<figcaption>     
<h4>Heading 4</h4>     
<p>Short description</p>    
</figcaption>   
</figure>  
</div>    

<div class="col-sm-4">   
<figure>    
<img class="img-thumbnail" src="https://placeimg.com/600/400/nature/6/" alt="...">
<figcaption>     
<h4>Heading 4</h4>     
<p>Short description</p>    
</figcaption>   
</figure>  
</div>

Add CSS code to your custom stylesheet:

figure {  	
  position: relative;  	
  cursor: pointer;  
}  

div[role='tooltip2'] {  	
  position: relative;  	
  z-index: 1;  
}  

figcaption {  	
  position: absolute;  	
  top: 0;  	
  left:0; 
  background: rgba(66,139,202,0.70);  	
  width: 100%;  	
  height: 100%;  	
  z-index: 2;  	
  text-align: center;  	
  display:none;  
}  

figcaption h4 {  	
  margin-top: 25%;  	
  font-size: 20px;  	
  color: gold;  	
  text-shadow: 1px 2px 2px #333;  
}  

figcaption p {  	
  font-size: 14px;  	
  line-height:1;  	
  color:#FFF;  
}

Bootstrap & jQuery

If your document doesn't already contain them, add links to Bootstrap and jQuery to your <head> tag.

<!--Bootstrap CSS-->  
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">    

<!--latest jQuery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">
</script>  

<!--Bootstrap JS-->  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">  
</script>

Invoke jQuery Tooltips. This function must come after jQuery and Bootstrap js have loaded.

<script>  
$(document).ready(function() {       
  $("[rel='tooltip2']").tooltip();    
  $('figure').hover(function(){        
    $(this).find('figcaption').slideDown(350); 
    //.fadeIn(350)       
    },       
    function(){$(this).find('figcaption').slideUp(300);
    //.fadeOut(300)      
    });   
});  
</script>

Optionally, you may replace .slideDown and .slideUp with .fadeIn and .fadeOut.

There you have it. A simple way to add caption overlays to your images. Hope you enjoyed this quick code demonstration with the Bootstrap Tooltips component.

Custom Web Design & Development