Tooltips View.haml

-# where pages = that_example_hash[:pages]
- pages.each do |page|
    .image
        %img{ :src => "#{page[:image]}" }
    
        -# the x & y coorinants for the top, left corners have some simple logic to subtract 2 from each to counter 
        -# the 2px border that's added in the CSS. This makes the focus areas overlay the main image in the right spot.
        
        -# pages.each_pair do ||          
        - page[:tooltips].each do |tooltip|
          .focus{ :style => "top:#{tooltip[:y] -2}px;left:#{tooltip[:x] -2}px;height:#{tooltip[:height]}px;width:#{tooltip[:width]}px;background: url(#{page[:image]}) -#{tooltip[:x]}px -#{tooltip[:y]}px;", :rel => "#{tooltip[:name]}"}
          .tooltip{ :id => "#{tooltip[:name]}", :class => "right-side"} 
             .header
                  %strong= tooltip[:heading]
              .content
                  %p= tooltip[:content]
              .footer
              .tip