Merge branch 'dev'

README.md

@@ -5,6 +5,8 @@
 
 *Note: CSS3 Transitions on pseudo elements is currently available on Firefox only. On rest of the browsers it degrades gracefully without any transition. Though the good news is that it will be [coming soon on webkit](https://bugs.webkit.org/show_bug.cgi?id=92591) also.*
 
+[Read more about it](http://kushagragour.in/blog/2013/02/years-first-side-project-hint/).
+
 ###Try it out:
 http://kushagragour.in/lab/hint/
 
@@ -43,6 +45,7 @@ Use it with other available modifiers in various combinations. Available modifie
 - `hint--warning`
 - `hint--success`
 - `hint--always`
+- `hint--rounded`
 
 Check out some examples at http://kushagragour.in/lab/hint/
 

demo.html

@@ -72,9 +72,15 @@ <h3>A tooltip library in CSS</h3>
 			<a class="hint  hint--bottom  hint--success" data-hint="This is a success tooltip">Hurray! You have seen all 4 context types.</a>
 		</p>
 
-		<p>
+    <h3>Extra</h3>
+
+    <p>
 			<a class="hint  hint--left  hint--always" data-hint="...which always keep showing">You can also make tooltips...</a>
 		</p>
 
+    <p>
+      <a class="hint  hint--top  hint--rounded" data-hint="We have rounded corners for you">Hmm...So you don't like sharp edges?</a>
+    </p>
+
     </body>
 </html>

hint.css

@@ -1,4 +1,4 @@
-/*! Hint.css - v0.1.0 - 2013-02-03
+/*! Hint.css - v1.1.0 - 2013-02-20
 * https://github.com/chinchang/hint.css
 * Copyright (c) 2013 Kushagra Gour; Licensed MIT */
 
@@ -87,7 +87,7 @@
   border-right-color: #383838; }
 
 /**
- * top tootip
+ * top tooltip
  */
 .hint--top:before {
   margin-bottom: -12px; }
@@ -102,7 +102,7 @@
   transform: translateY(-8px); }
 
 /**
- * bottom tootip
+ * bottom tooltip
  */
 .hint--bottom:before {
   margin-top: -12px; }
@@ -117,7 +117,7 @@
   transform: translateY(8px); }
 
 /**
- * right tootip
+ * right tooltip
  */
 .hint--right:before {
   margin-left: -12px;
@@ -133,7 +133,7 @@
   transform: translateX(8px); }
 
 /**
- * left tootip
+ * left tooltip
  */
 .hint--left:before {
   margin-right: -12px;
@@ -247,3 +247,15 @@
   -webkit-transform: translateX(8px);
   -moz-transform: translateX(8px);
   transform: translateX(8px); }
+
+/**
+ * source: hint-rounded.scss
+ *
+ * Defines rounded corner tooltips.
+ * 
+ * Classes added:
+ *  1) hint--rounded
+ *  
+ */
+.hint--rounded:after {
+  border-radius: 4px; }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "hint",
   "title": "Hint.css",
-  "description": "A CSS based tooltip library",
-  "version": "0.1.0",
+  "description": "A tooltip library in CSS",
+  "version": "1.1.0",
   "homepage": "https://github.com/chinchang/hint.css",
   "author": {
     "name": "Kushagra Gour",

src/hint-always.scss

@@ -23,19 +23,19 @@
 	}
 
 	&.hint--top {
-		+set-margin('translateY', -1);
+		@include set-margin('translateY', -1);
 	}
 
 	&.hint--bottom {
-		+set-margin('translateY', 1);
+		@include set-margin('translateY', 1);
 	}
 
 	&.hint--left {
-		+set-margin('translateX', -1);
+		@include set-margin('translateX', -1);
 	}
 
 	&.hint--right {
-		+set-margin('translateX', 1);
+		@include set-margin('translateX', 1);
 	}
 }
 

src/hint-position.scss

@@ -62,32 +62,32 @@
 /**
  * set default color for tooltip arrows
  */
-+arrow-border-color($defaultColor, 'false');
+@include arrow-border-color($defaultColor, 'false');
 
 /**
- * top tootip
+ * top tooltip
  */
 .hint--top {
-	+vertical-positioned-tooltip('bottom', -1);
+	@include vertical-positioned-tooltip('bottom', -1);
 }
 
 /**
- * bottom tootip
+ * bottom tooltip
  */
 .hint--bottom {
-	+vertical-positioned-tooltip('top', 1);
+	@include vertical-positioned-tooltip('top', 1);
 }
 
 /**
- * right tootip
+ * right tooltip
  */
 .hint--right {
-	+horizontal-positioned-tooltip('left', 1);
+	@include horizontal-positioned-tooltip('left', 1);
 }
 
 /**
- * left tootip
+ * left tooltip
  */
 .hint--left {
-	+horizontal-positioned-tooltip('right', -1);
+	@include horizontal-positioned-tooltip('right', -1);
 }

src/hint-rounded.scss

@@ -0,0 +1,15 @@
+/**
+ * source: hint-rounded.scss
+ *
+ * Defines rounded corner tooltips.
+ * 
+ * Classes added:
+ *  1) hint--rounded
+ *  
+ */
+
+.hint--rounded {
+  &:after {
+    border-radius: 4px;
+  }
+}

src/hint.scss

@@ -24,4 +24,5 @@
 @import "src/hint-core";
 @import "src/hint-position";
 @import "src/hint-color-types";
-@import "src/hint-always";
+@import "src/hint-always";
+@import "src/hint-rounded";