diff --git a/src/js/modules/tooltip.js b/src/js/modules/tooltip.js index d4e1585f..ca244e79 100644 --- a/src/js/modules/tooltip.js +++ b/src/js/modules/tooltip.js @@ -20,7 +20,7 @@ export default (function() { var tooltipSpan = document.createElement("span"); tooltipSpan.classList.add("tooltip"); tooltipSpan.id = "tooltip-" + count; - + var textSpan = document.createElement("span"); textSpan.classList.add("tooltiptext-box"); textSpan.id = "tooltiptext-box-" + count; @@ -46,14 +46,13 @@ export default (function() { tooltipSpan.appendChild(underLineSpan); tooltipSpan.appendChild(questionMarkSpan); tooltipSpan.appendChild(textSpan); - - el.innerHTML = el.innerHTML.replace(matches[0], tooltipSpan.outerHTML); matches = re.exec(el.innerHTML); count++; } for (var j = 0; j < count; j++) { var tooltip = document.getElementById("tooltip-" + j); + tooltip.tabIndex = 1; tooltip.addEventListener("click", function (e) { e.stopPropagation(); var tooltipText = this.querySelector(".tooltiptext-box"); diff --git a/src/vue/design/re-styles/tooltip.scss b/src/vue/design/re-styles/tooltip.scss index 526c850a..47ed7bda 100644 --- a/src/vue/design/re-styles/tooltip.scss +++ b/src/vue/design/re-styles/tooltip.scss @@ -5,6 +5,12 @@ display: inline-flex; } +.tooltip:focus-visible { + outline: 3px solid dimgray; + .tooltiptext-box { + display: inline !important; + } +} .tooltip-underline { border-bottom: 0.5px dashed #00468E;