Added "data-title" attribute

Imager.js

@@ -113,6 +113,7 @@
         this.gif.src          = 'data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7';
         this.gif.className    = this.className;
         this.gif.alt          = '';
+        this.gif.title        = '';
         this.lazyloadOffset   = opts.lazyloadOffset || 0;
         this.scrollDelay      = opts.scrollDelay || 250;
         this.onResize         = opts.hasOwnProperty('onResize') ? opts.onResize : true;
@@ -248,7 +249,8 @@
         gif.className = (elementClassName ? elementClassName + ' ' : '') + this.className;
         gif.setAttribute('data-src', element.getAttribute('data-src'));
         gif.setAttribute('alt', element.getAttribute('data-alt') || this.gif.alt);
-
+        gif.setAttribute('title', element.getAttribute('data-title') || this.gif.title);
+
         element.parentNode.replaceChild(gif, element);
 
         return gif;

docs/html-api.md

@@ -50,20 +50,22 @@ So the following HTML...
 </div>
 ```
 
-### `data-alt` and `data-class`
+### `data-alt`, `data-title` and `data-class`
 
-These two `data-*` attributes are copied from the responsive placeholder to the response `img` element.nnot process images or who have image loading disabled. It is converted to the `alt` attribute of the `img element.
+These three `data-*` attributes are copied from the responsive placeholder to the response `img` element.nnot process images or who have image loading disabled. `data-alt` attribute is converted to the `alt` attribute of the `img` element. `data-title` attribute is converted to the `title` attribute of the `img` element.
 
 So the following HTML...
 
 ```html
 <div data-src="http://placehold.it/{width}" data-alt="alternative text"></div>
+<div data-src="http://placehold.it/{width}" data-title="Title text"></div>
 <div data-src="http://placehold.it/{width}" data-class="london calling"></div>
 ```
 
 ...is converted to...
 
 ```html
-<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="alternative text" class="image-replace">
-<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="" class="london calling image-replace">
+<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="alternative text" title="" class="image-replace">
+<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="" title="Title text" class="image-replace">
+<img src="http://placehold.it/260" data-src="http://placehold.it/{width}" alt="" title="" class="london calling image-replace">
 ```

test/fixtures/regular.html

@@ -2,12 +2,12 @@
 
 <div id="main">
   <div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
-  <div class="delayed-image-load" data-src="base/test/fixtures/media/B-320.jpg" data-alt="Responsive Image alternative" data-width="640"></div>
+  <div class="delayed-image-load" data-src="base/test/fixtures/media/B-320.jpg" data-alt="Responsive Image alternative" data-titke="Responsive Image title" data-width="640"></div>
   <div class="delayed-image-load" data-src="base/test/fixtures/media/C-320.jpg"></div>
 
   <span class="not-delayed-image-load">
     <img src="data:image/gif;base64,R0lGODlhEAAJAIAAAP///wAAACH5BAEAAAAALAAAAAAQAAkAAAIKhI+py+0Po5yUFQA7" alt="Not a responsive image">
   </span>
 </div>
 
-<div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>
+<div class="delayed-image-load" data-src="base/test/fixtures/media/A-320.jpg"></div>

test/unit/html-options.js

@@ -199,6 +199,34 @@ describe('Imager.js HTML data-* API', function () {
             });
         });
     });
+
+    describe('handling data-title', function () {
+        it('should generate an empty title attribute for the responsive image', function (done) {
+            fixtures = loadFixtures('regular');
+            var imgr = new Imager('#main .delayed-image-load');
+
+            expect(imgr.gif).to.have.property('title', '');
+
+            imgr.ready(function () {
+                expect(imgr.divs[0]).to.have.property('title', imgr.gif.title);
+
+                done();
+            });
+        });
+
+        it('should generate an title attribute with the same value as the placeholder data-title attribute', function (done) {
+            fixtures = loadFixtures('regular');
+            var imgr = new Imager('#main .delayed-image-load');
+
+            expect(imgr.gif).to.have.property('title', '');
+
+            imgr.ready(function () {
+                expect(imgr.divs[1]).to.have.property('title', 'Responsive Image title');
+
+                done();
+            });
+        });
+    });
 
     describe('handling data-width', function () {
         beforeEach(function () {