Merge pull request #24385 from kbhawkey/update-tooltip-bootstrap

update tooltip styling to bootstrap

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;
+}

assets/scss/_variables_project.scss

@@ -13,3 +13,15 @@ Add styles or override variables from the theme here. */
 @import "desktop";
 
 $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;

config.toml

@@ -155,8 +155,7 @@ offlineSearch = false
 [params.pushAssets]
 css = [
   "callouts",
-  "styles",
+  "styles"
-  "custom-jekyll/tags"
 ]
 js = [
   "script"

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 }}

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'>
+<a class='glossary-tooltip' title='{{- $tooltip | safeHTML -}}' data-toggle='tooltip' data-placement='top' href='{{ $external_link }}' target='_blank' aria-label='{{ $text }}'>
-	{{- $text -}}
+{{- $text -}}
-	<span class='tooltip-text'>
-  {{- $tooltip | safeHTML -}}
-	</span>
 </a>
 {{- end -}}
 {{- end -}}

static/css/custom-jekyll/tags.css

@@ -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;
-}
-