diff --git a/assets/css/application.scss b/assets/css/application.scss
index 1e7a031..d239051 100644
--- a/assets/css/application.scss
+++ b/assets/css/application.scss
@@ -2,7 +2,7 @@
 ---
 
 @import "../vendor/normalize-css/normalize.css";
-@import "../vendor/qtip2/jquery.qtip.min.css";
+@import "../vendor/hint.css/hint.min.css";
 
 body {
   background: #fafafa;
@@ -461,53 +461,11 @@ strong {
 }
 
 
-/* Qtip styles */
-
-.qtip-conditions,
-.qtip-permissions,
-.qtip-limitations,
-.qtip-fetching,
-.qtip-error {
-  font-size: 0.75rem;
-  line-height: 1.3;
+/* Hint.css Overide */
+.orverride-hint-inline {
+  display: block;
 }
 
-.qtip-conditions {
-  background-color: #d0ebf6;
-  border-color: #149ad4;
-  color: #0d648a;
-}
-
-.qtip-conditions .qtip-titlebar {
-  background-color: #149ad4;
-  color: #fff;
-}
-
-.qtip-fetching,
-.qtip-permissions {
-  background-color: #d8f4d7;
-  border-color: #3dc637;
-  color: #298625;
-}
-
-.qtip-fetching .qtip-titlebar,
-.qtip-permissions .qtip-titlebar {
-  background-color: #3dc637;
-  color: #fff;
-}
-
-.qtip-error,
-.qtip-limitations {
-  background-color: #f4d9d8;
-  border-color: #c6403d;
-  color: #812a28;
-}
-
-.qtip-error .qtip-titlebar,
-.qtip-limitations .qtip-titlebar {
-  background-color: #c6403d;
-  color: #fff;
-}
 
 /* For modern browsers */
 .clearfix:before,
diff --git a/assets/js/app.coffee b/assets/js/app.coffee
index decad2a..4efad5e 100644
--- a/assets/js/app.coffee
+++ b/assets/js/app.coffee
@@ -16,18 +16,17 @@ class Choosealicense
       selection.removeAllRanges()
       selection.addRange(range)
 
-  # Qtip position attributes for tooltips
-  qtip_position:
-    my: "top center"
-    at: "bottom center"
-    viewport: $(window)
-    adjust:
-      method: 'shift shift'
-  # Annotation rule types as defined in `_config.yml`
-  ruletypes:
-    permissions: "Permission"
-    conditions: "Condition"
-    limitations: "Limitation"
+  tooltipAttributesMapperByRuleType:
+    permissions:
+      heading: 'Permissions'
+      color: 'hint--success'
+    conditions:
+      heading: 'Conditions'
+      color: 'hint--info'
+    limitations:
+      heading: 'Limitations'
+      color: 'hint--error'
+
 
   # fire on document.ready
   constructor: ->
@@ -41,20 +40,14 @@ class Choosealicense
     # Dynamically add annotations as title attribute to rule list items
     for ruletype, rules of window.annotations
       for rule in rules
-        $(".license-#{ruletype} .#{rule["tag"]}").attr "title", rule["description"]
-
-    # Init tooltips on all rule list items
-    for ruletype, label of @ruletypes
-      $(".license-#{ruletype} li, .license-#{ruletype} .license-sprite").qtip
-        content:
-          text: false
-          title:
-            text: label
-        position: @qtip_position
-        style:
-          classes: "qtip-shadow qtip-#{ruletype}"
-
-    false
+        licenseLiElement = $(".license-#{ruletype} .#{rule["tag"]}")
+        tooltipAttr = @tooltipAttributesMapperByRuleType[ruletype]
+        licenseLiElement.attr "aria-label", "#{tooltipAttr.heading}: #{rule.description}"
+        licenseLiElement.addClass("hint--bottom
+                                   hint--large
+                                   hint--no-animate
+                                   #{tooltipAttr.color}
+                                   orverride-hint-inline")
 
   # Initializes Clipboard.js
   initClipboard: ->