diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index f511e05e3b..1178e0ffc9 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -552,3 +552,10 @@ body.td-documentation {
   }
 }
 
+/* glossary tooltip */
+.glossary-tooltip {
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  color: black;
+  text-decoration: none !important;
+}
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index 9030d61dc9..fd1dddd607 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -12,4 +12,16 @@ Add styles or override variables from the theme here. */
 @import "tablet";
 @import "desktop";
 
-$primary: #3371e3;
\ No newline at end of file
+$primary: #3371e3;
+
+// tooltip
+$tooltip-bg: #555;
+$tooltip-arrow-color: $tooltip-bg !default;
+$tooltip-arrow-width: 10px !default;
+$tooltip-opacity: 1 !default;
+$tooltip-color: #fff !default;
+$tooltip-max-width: 300px !default;
+$tooltip-font-size: 1rem;
+$tooltip-padding: 5px 8px;
+$tooltip-border-radius: 6px;
+$tooltip-font-weight: 400;
diff --git a/config.toml b/config.toml
index f5425257d9..c3ecb630f7 100644
--- a/config.toml
+++ b/config.toml
@@ -155,8 +155,7 @@ offlineSearch = false
 [params.pushAssets]
 css = [
   "callouts",
-  "styles",
-  "custom-jekyll/tags"
+  "styles"
 ]
 js = [
   "script"
diff --git a/layouts/partials/css.html b/layouts/partials/css.html
index a55529844b..cb2cef6eb6 100644
--- a/layouts/partials/css.html
+++ b/layouts/partials/css.html
@@ -14,7 +14,7 @@
 {{- end }}
 
 <link rel="stylesheet" href="{{ "css/feature-states.css" | relURL }}">
-<link rel="stylesheet" href="{{ "css/custom-jekyll/tags.css" | relURL }}">
+
 {{- if .Site.Params.announcement }}
 <link rel="stylesheet" href="{{ "css/announcement.css" | relURL }}">
 {{- end }}
diff --git a/layouts/shortcodes/glossary_tooltip.html b/layouts/shortcodes/glossary_tooltip.html
index a0bed81597..400bcf7c84 100644
--- a/layouts/shortcodes/glossary_tooltip.html
+++ b/layouts/shortcodes/glossary_tooltip.html
@@ -14,13 +14,11 @@
 {{- $glossary_home := "docs/reference/glossary/?all=true" | relLangURL -}}
 {{- $external_link := $term_info.Params.full_link | default (printf "%s#term-%s" $glossary_home $id | safeURL  ) -}}
 {{- $tooltip :=  $term_info.Params.short_description | markdownify -}}
-{{- $tooltip := $tooltip | replaceRE "(?s)<a class='glossary-tooltip'.*?>(.*?)<span class='tooltip-text'>.*</a>" "$1" | plainify -}}
+
+{{- $tooltip := $tooltip | replaceRE "(?s)<a class='glossary-tooltip'.*?>(.*?).*</a>" "$1" | plainify -}}
 {{- $tooltip := trim $tooltip " \n" -}}
-<a class='glossary-tooltip' href='{{ $external_link }}' target='_blank'>
-	{{- $text -}}
-	<span class='tooltip-text'>
-  {{- $tooltip | safeHTML -}}
-	</span>
+<a class='glossary-tooltip' title='{{- $tooltip | safeHTML -}}' data-toggle='tooltip' data-placement='top' href='{{ $external_link }}' target='_blank' aria-label='{{ $text }}'>
+{{- $text -}}
 </a>
 {{- end -}}
 {{- end -}}
diff --git a/static/css/custom-jekyll/tags.css b/static/css/custom-jekyll/tags.css
deleted file mode 100644
index 1ff6d12e85..0000000000
--- a/static/css/custom-jekyll/tags.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.no-underline {
-  text-decoration: none !important;
-}
-
-.hide {
-  display: none !important;
-}
-
-/* Tooltip container */
-.glossary-tooltip {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-    color: black;
-    text-decoration: none !important;
-}
-
-/* Tooltip text */
-.glossary-tooltip .tooltip-text {
-    visibility: hidden;
-    width: 300px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    padding: 5px 8px;
-    border-radius: 6px;
-
-    /* Position the tooltip text */
-    position: absolute;
-    z-index: 10;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -150px;
-
-    /* Fade in tooltip */
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-/* Tooltip arrow */
-.glossary-tooltip .tooltip-text::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.glossary-tooltip:hover .tooltip-text {
-    visibility: visible;
-    opacity: 1;
-    font-size: 1rem;
-    font-weight: 400;
-}
-