diff --git a/README.md b/README.md
index 6a12a67..df84ba0 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ If you are already using v1.x, you may need to tweak certain position classes be
 
 Don't like BEM naming (`hint--`) or want to use your own prefix for the class names?
 
-Simply update `src/hint-variables.scss` and change the `$hintPrefix` variable.
+Simply customize via the `$hintSelector` and `$hintPrefix` variables defined in [src/hint-variables.scss](src/hint-variables.scss)
 To generate the css file, please read the [contributing page](./CONTRIBUTING.md).
 
 ## Who's Using This?
diff --git a/src/hint-core.scss b/src/hint-core.scss
index c6585b9..d34e928 100644
--- a/src/hint-core.scss
+++ b/src/hint-core.scss
@@ -10,7 +10,7 @@
  * 	1) hint
  */
 
-[class*="#{$hintPrefix}"] {
+#{$hintSelector} {
 	position: relative;
 	display: inline-block;
 
diff --git a/src/hint-theme.scss b/src/hint-theme.scss
index d201d5e..0551af2 100644
--- a/src/hint-theme.scss
+++ b/src/hint-theme.scss
@@ -5,7 +5,7 @@
  *
  */
 
-[class*="#{$hintPrefix}"] {
+#{$hintSelector} {
 	/**
 	 * tooltip body
 	 */
@@ -13,4 +13,4 @@
 		text-shadow: 0 -1px 0px darken($hintDefaultColor, $hintTextShadowDarkenAmount);
 		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
 	}
-}
\ No newline at end of file
+}
diff --git a/src/hint-variables.scss b/src/hint-variables.scss
index 5a7ad4a..378df60 100644
--- a/src/hint-variables.scss
+++ b/src/hint-variables.scss
@@ -5,6 +5,9 @@
 // Prefix for all classes. By default, BEM naming convention is used
 $hintPrefix: 'hint--' !default;
 
+// Selector applying to all hints
+$hintSelector: '[class*="#{$hintPrefix}"]' !default;
+
 // font size
 $hintFontSize: 12px !default;