diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.hbs b/ui/packages/consul-ui/app/components/peerings/badge/index.hbs
index d90d1cbf0..f8d398dfd 100644
--- a/ui/packages/consul-ui/app/components/peerings/badge/index.hbs
+++ b/ui/packages/consul-ui/app/components/peerings/badge/index.hbs
@@ -1,5 +1,5 @@
 {{#if @peering.State}}
-  <div class="peerings-badge {{lowercase @peering.State}}" {{tooltip this.tooltip options=(hash hideTooltip=(not this.tooltip))}}>
+  <div class="peerings-badge {{lowercase @peering.State}}" {{tooltip this.tooltip}}>
     <Peerings::Badge::Icon @state="{{@peering.State}}" />
     <span class="peerings-badge__text">{{capitalize (lowercase @peering.State)}}</span>
   </div>
diff --git a/ui/packages/consul-ui/app/components/peerings/badge/index.js b/ui/packages/consul-ui/app/components/peerings/badge/index.js
index 7fd211d4d..d3b7653a4 100644
--- a/ui/packages/consul-ui/app/components/peerings/badge/index.js
+++ b/ui/packages/consul-ui/app/components/peerings/badge/index.js
@@ -20,9 +20,11 @@ const BADGE_LOOKUP = {
   TERMINATED: {
     tooltip: 'Someone in the other peer may have deleted this peering connection.',
   },
-  UNDEFINED: {},
+  UNDEFINED: {
+    tooltip: ''
+  },
 };
-export default class PeeingsBadge extends Component {
+export default class PeeringsBadge extends Component {
   get styles() {
     const {
       peering: { State },
diff --git a/ui/packages/consul-ui/app/modifiers/tooltip.js b/ui/packages/consul-ui/app/modifiers/tooltip.js
index 336222278..aa95deeb5 100644
--- a/ui/packages/consul-ui/app/modifiers/tooltip.js
+++ b/ui/packages/consul-ui/app/modifiers/tooltip.js
@@ -8,68 +8,69 @@ import tippy, { followCursor } from 'tippy.js';
  * {{tooltip 'Text' options=(hash )}}
  */
 export default modifier(($element, [content], hash = {}) => {
+  if(typeof content === 'string' && content.trim() === '') {
+    return;
+  }
   const options = hash.options || {};
 
-  if (!options.hideTooltip) {
-    let $anchor = $element;
+  let $anchor = $element;
 
-    // make it easy to specify the modified element as the actual tooltip
-    if (typeof options.triggerTarget === 'string') {
-      const $el = $anchor;
-      switch (options.triggerTarget) {
-        case 'parentNode':
-          $anchor = $anchor.parentNode;
-          break;
-        default:
-          $anchor = $anchor.querySelectorAll(options.triggerTarget);
-      }
-      content = $anchor.cloneNode(true);
-      $el.remove();
-      hash.options.triggerTarget = undefined;
+  // make it easy to specify the modified element as the actual tooltip
+  if (typeof options.triggerTarget === 'string') {
+    const $el = $anchor;
+    switch (options.triggerTarget) {
+      case 'parentNode':
+        $anchor = $anchor.parentNode;
+        break;
+      default:
+        $anchor = $anchor.querySelectorAll(options.triggerTarget);
     }
-    // {{tooltip}} will just use the HTML content
-    if (typeof content === 'undefined') {
-      content = $anchor.innerHTML;
-      $anchor.innerHTML = '';
-    }
-    let interval;
-    if (options.trigger === 'manual') {
-      // if we are manually triggering, a out delay means only show for the
-      // amount of time specified by the delay
-      const delay = options.delay || [];
-      if (typeof delay[1] !== 'undefined') {
-        hash.options.onShown = tooltip => {
-          clearInterval(interval);
-          interval = setTimeout(() => {
-            tooltip.hide();
-          }, delay[1]);
-        };
-      }
-    }
-    let $trigger = $anchor;
-    let needsTabIndex = false;
-    if (!$trigger.hasAttribute('tabindex')) {
-      needsTabIndex = true;
-      $trigger.setAttribute('tabindex', '0');
-    }
-    const tooltip = tippy($anchor, {
-      theme: 'tooltip',
-      triggerTarget: $trigger,
-      content: $anchor => content,
-      // showOnCreate: true,
-      // hideOnClick: false,
-      plugins: [
-        typeof options.followCursor !== 'undefined' ? followCursor : undefined,
-      ].filter(item => Boolean(item)),
-      ...hash.options,
-    });
-
-    return () => {
-      if (needsTabIndex) {
-        $trigger.removeAttribute('tabindex');
-      }
-      clearInterval(interval);
-      tooltip.destroy();
-    };
+    content = $anchor.cloneNode(true);
+    $el.remove();
+    hash.options.triggerTarget = undefined;
   }
+  // {{tooltip}} will just use the HTML content
+  if (typeof content === 'undefined') {
+    content = $anchor.innerHTML;
+    $anchor.innerHTML = '';
+  }
+  let interval;
+  if (options.trigger === 'manual') {
+    // if we are manually triggering, a out delay means only show for the
+    // amount of time specified by the delay
+    const delay = options.delay || [];
+    if (typeof delay[1] !== 'undefined') {
+      hash.options.onShown = tooltip => {
+        clearInterval(interval);
+        interval = setTimeout(() => {
+          tooltip.hide();
+        }, delay[1]);
+      };
+    }
+  }
+  let $trigger = $anchor;
+  let needsTabIndex = false;
+  if (!$trigger.hasAttribute('tabindex')) {
+    needsTabIndex = true;
+    $trigger.setAttribute('tabindex', '0');
+  }
+  const tooltip = tippy($anchor, {
+    theme: 'tooltip',
+    triggerTarget: $trigger,
+    content: $anchor => content,
+    // showOnCreate: true,
+    // hideOnClick: false,
+    plugins: [
+      typeof options.followCursor !== 'undefined' ? followCursor : undefined,
+    ].filter(item => Boolean(item)),
+    ...hash.options,
+  });
+
+  return () => {
+    if (needsTabIndex) {
+      $trigger.removeAttribute('tabindex');
+    }
+    clearInterval(interval);
+    tooltip.destroy();
+  };
 });
diff --git a/ui/packages/consul-ui/app/modifiers/tooltip.mdx b/ui/packages/consul-ui/app/modifiers/tooltip.mdx
index 57f6463b9..cc689c052 100644
--- a/ui/packages/consul-ui/app/modifiers/tooltip.mdx
+++ b/ui/packages/consul-ui/app/modifiers/tooltip.mdx
@@ -11,7 +11,21 @@ most common usage will be something like the below:
 </span>
 ```
 
-A `tabindex=0` is automatically added to the element that triggers the tooltip if it doesn't have one already to make sure the tooltip is in the natural tabbing order of the document.
+A `tabindex=0` is automatically added to the element that triggers the tooltip
+if it doesn't have one already to make sure the tooltip is in the natural
+tabbing order of the document.
+
+If you specify and empty string as a content, then the tooltip will not show,
+you can use this to conditionally disable/enable tooltips. It additionally
+means empty tooltips can not been added by accident.
+
+```hbs preview-template
+<span
+  {{tooltip (if false 'Never show this' '')}}
+>
+  Hover over me
+</span>
+```
 
 An additional options hash can be passed into the tooltip the contents of
 which are passed along to `tippy.js` [so all of the `tippy.js`