Adds hint--fit width feature

This patch adds the "hint--fit" class and also set "box-sizing: border-box" to all size related classes.

The "border-box" sizing will prevent border and padding stylization to overflow the parent limit.

closes #197

demo.html

@@ -314,6 +314,10 @@ <h3>Size variations</h3>
 							<a class="hint--top  hint--large" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
 								Large
 							</a>
+
+							<a class="hint--top  hint--fit" style="border: 1px solid #eee;padding:3px 56px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
+								Fit
+							</a>
 						</p>
 
 

src/hint-sizes.scss

@@ -14,8 +14,10 @@
 
 .#{$hintPrefix}small,
 .#{$hintPrefix}medium,
-.#{$hintPrefix}large {
+.#{$hintPrefix}large,
+.#{$hintPrefix}fit {
 	&:after {
+		box-sizing: border-box;
 		white-space: normal;
 		line-height: 1.4em;
 		word-wrap: break-word; // Ensure long words do not overflow.
@@ -37,3 +39,8 @@
 		width: $hintSizeLarge;
 	}
 }
+.#{$hintPrefix}fit {
+	&:after {
+		width: 100%;
+	}
+}