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

update tooltip styling to bootstrap

Author: k8s-ci-robot

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

@@ -12,4 +12,16 @@ Add styles or override variables from the theme here. */
 @import "tablet";
 @import "desktop";
 
-$primary: #3371e3;
+$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",
-  "custom-jekyll/tags"
+  "styles"
 ]
 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'>
-	{{- $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 -}}