Moving tooltip of the filter items to the side instead of the top

This suggestion will affect the following filters:

• image filter
• tool filter (for disabled state)

Current	Proposal

The following discussion from !105417 (merged) should be addressed:

• @dftian started a discussion: (+2 comments)

  Currently, the tooltip can show above or below the item, has quite a long delay, and the tooltip arrow is centered in the middle of the dropdown item rather than the text, which can have it pointing to empty space:

  Peek_2022-12-01_22-16

  I think that it'll look better if we have it show on the left (with auto-flip to the right side if it can't fit) and remove the delay so the user knows right away why it's disabled:

  Peek_2022-12-01_22-19

  3. With the above change, the tooltip config will match what the image filter tooltip does, so we can switch it to use the tooltip property.

  Subject: [PATCH] clipboard
  ---
  Index: ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue
  IDEA additional info:
  Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
  <+>UTF-8
  ===================================================================
  diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue
  --- a/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue	(revision 3202ef83ccfe190a03fbf0ab0215d3507b11eadc)
  +++ b/ee/app/assets/javascripts/security_dashboard/components/shared/filters/filter_item.vue	(date 1669969287020)
  @@ -3,9 +3,7 @@
   
   export default {
     components: { GlDropdownItem },
  -  directives: {
  -    GlTooltip,
  -  },
  +  directives: { GlTooltip },
     props: {
       isChecked: {
         type: Boolean,
  @@ -32,26 +30,31 @@
         return `filter_${this.text.toLowerCase().replace(' ', '_')}_dropdown`;
       },
     },
  +  methods: {
  +    emitClick() {
  +      if (!this.disabled) {
  +        this.$emit('click');
  +      }
  +    },
  +  },
   };
   </script>
   
   <template>
  -  <!-- 
  +  <!--
       // Once GlDropdownItem support a disabled state, the custom classes can be removed
       // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2092
      -->
  -  <div v-gl-tooltip :title="tooltip">
  -    <gl-dropdown-item
  -      is-check-item
  -      :is-checked="isChecked"
  -      :data-qa-selector="qaSelector"
  -      :disabled="disabled"
  -      :class="{ 'gl-pointer-events-none': disabled }"
  -      @click.native.capture.stop="$emit('click')"
  -    >
  -      <slot>
  -        <span :class="{ 'gl-text-gray-600': disabled }">{{ text }}</span>
  -      </slot>
  -    </gl-dropdown-item>
  -  </div>
  +  <gl-dropdown-item
  +    v-gl-tooltip.left.viewport.d0="tooltip"
  +    is-check-item
  +    :is-checked="isChecked"
  +    :data-qa-selector="qaSelector"
  +    :disabled="disabled"
  +    @click.native.capture.stop="emitClick"
  +  >
  +    <slot>
  +      <span :class="{ 'gl-text-gray-600': disabled }">{{ text }}</span>
  +    </slot>
  +  </gl-dropdown-item>
   </template>