forms_9_inline_help_16.html

## forms_9_inline_help_16.html
<!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 {
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        img {
            margin-bottom: 10px;
        }

        .field_row {
            padding-bottom: 20px;
        }
      </style>
  </head>
  <body>

    <div class="row">
        <div class="medium-12 columns">
            <h2>Men's "Funk" slogan tee</h2>
        </div>
    </div>

    <div class="row">
        <div class="medium-1 columns">
            <img src="http://placehold.it/93&text=1"/>
            <img src="http://placehold.it/93&text=2"/>
            <img src="http://placehold.it/93&text=3"/>
        </div>
        <div class="medium-5 columns">
            <img src="http://placehold.it/500&text=Photo+1"/>
        </div>
        <div class="medium-6 columns">
            <form>
                <div class="row field_row">
                    <div class="medium-6 columns">
                        <label for="color">Color</label>
                        <select id="color">
                            <option value="none" disabled selected>Select&hellip;</option>
                            <option value="white">White</option>
                            <option value="navy">Navy</option>
                            <option value="black">Black</option>
                        </select>
                    </div>
                </div>
                <div class="row field_row">
                    <div class="medium-6 columns">
                        <label for="size">Size</label>
                        <select id="size">
                            <option value="none" disabled selected>Select&hellip;</option>
                            <option value="xs">XS</option>
                            <option value="s">S</option>
                            <option value="m">M</option>
                            <option value="l">L</option>
                            <option value="xl">XL</option>
                            <option value="xxl">XXL</option>
                            <option value="xxxl">XXXL</option>
                        </select>
                    </div>
                    <div class="medium-6 columns">
                        <div class="panel callout help" style="padding: 6px; margin-top: 12px; margin-bottom: 0; display: none;">
                            <p style="font-size: 0.8rem;" aria-live="polite">Not sure what size you need? See our <a href="size_chart.html">size chart</a>.</p>
                        </div>
                    </div>
                </div>
                <div class="row field_row">
                    <div class="medium-6 columns">
                        <label for="quantity">Quantity</label>
                        <input type="number" id="quantity" value="1">
                    </div>
                </div>
                <div class="row field_row">
                    <div class="medium-6 columns">
                        <button type="submit" value="submit" class="small button" style="width: 100%;">Add to cart</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    <script>
        $(document).ready(function(){

            $('.field_row input, .field_row select').on('focus', function(){
                $(this).parent().parent().find('.help').show();
            });

            $('.field_row input, .field_row select').on('blur', function(){
                $(this).parent().parent().find('.help').hide();
            });

            $('.field_row').hover(
                function() {
                    $(this).find('.help').show();
                },
                function() {
                    if(!$(this).find('input, select').is(':focus'))
                    {
                        $(this).find('.help').hide();
                    }
                }
            );


        });
    </script>

  </body>
</html>