咨询：设置tooltip-trigger为focus时uib-tooltip无法显示问题

Hey there, sorry to hear you're stuck with this tooltip issue! Let's walk through the most common reasons why the focus trigger might not be working for you, and how to fix them.

Common Causes & Fixes #

• Your element isn't focusable by default
  Many HTML elements (like <div>, <span>) aren't naturally focusable. If you're attaching the tooltip to one of these, you need to add a tabindex attribute to make it possible to focus via keyboard or click. Here's an example:

  <div uib-tooltip="Sample tooltip text" tooltip-trigger="focus" tabindex="0">
    Click or tab to focus me
  </div>
  

  tabindex="0" ensures the element is part of the normal tab flow and can receive focus events.

• Outdated UI Bootstrap version
  Older releases of UI Bootstrap might not support the focus trigger for uib-tooltip. Double-check the documentation for your specific version – if focus isn't listed as a valid trigger option, consider upgrading to a newer version that includes this feature.

• Typos or incorrect trigger syntax
  It's easy to mistype the directive attribute! Make sure you're using tooltip-trigger="focus" (not tooltip-trigger="focused" or similar). If you want to combine triggers (e.g., focus + hover), use space-separated values: tooltip-trigger="focus hover".

• Conflicting event handlers
  If you have custom JavaScript that's intercepting or preventing the focus event on your element, it could block the tooltip from activating. Use Chrome DevTools' Event Listeners tab to check if the focus event is firing correctly on your target element.

If All Else Fails: Custom Trigger Logic #

If your version of uib-tooltip truly doesn't support the focus trigger, you can manually wire up the events using Angular's API:

<button id="focus-tooltip-btn" uib-tooltip="Custom focus tooltip">
  Tab to focus this button
</button>

<script>
  angular.module('yourApp').controller('YourController', function($scope, $element) {
    const btn = $element.find('#focus-tooltip-btn');
    
    btn.on('focus', () => {
      btn.trigger('show-uib-tooltip');
    });
    
    btn.on('blur', () => {
      btn.trigger('hide-uib-tooltip');
    });
  });
</script>

内容的提问来源于stack exchange，提问作者Usman Iqbal