Skip to content

Instantly share code, notes, and snippets.

<div class="medium-5 columns">
<img src="http://via.placeholder.com/500&text=Photo+1"/>
</div>
<div class="medium-1 columns">
<img src="http://via.placeholder.com/93&text=1"/>
<img src="http://via.placeholder.com/93&text=2"/>
<img src="http://via.placeholder.com/93&text=3"/>
</div>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Forms: Inline Help</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/modernizr.js"></script>
<style>
h2 {
$('i.fi-info').on('click', function(){
$(this).parent().parent().find('.help').toggle();
});
<label for="size" style="display: inline-block;">Size</label>&nbsp;<i class="fi-info" style="font-size: 18px; vertical-align: middle; cursor: pointer;"></i>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
$('.field_row').hover(
function() {
$(this).find('.help').show();
},
function() {
if(!$(this).find('input, select').is(':focus'))
{
$(this).find('.help').hide();
}
}
$('.field_row').hover(
function() {
$(this).find('.help').show();
},
function() {
$(this).find('.help').hide();
}
);
$('.field_row').hover(
function() {
},
function() {
}
);
$('.field_row').hover(function() {}, function() {});
$('.field_row input, .field_row select').on('blur', function(){
$(this).parent().parent().find('.help').hide();
});