Update todo vue tooltip with gl-tooltip

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/47810

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

 <script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import tooltip from '~/vue_shared/directives/tooltip';
 
 const MARK_TEXT = __('Mark as done');
 const TODO_TEXT = __('Add a To-Do');
 
 export default {
-  directives: {
-    tooltip,
-  },
   components: {
     GlIcon,
     GlLoadingIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     issuableId: {
       type: Number,
@@ -71,16 +70,13 @@ export default {
 
 <template>
   <button
-    v-tooltip
+    v-gl-tooltip.left.viewport
     :class="buttonClasses"
     :title="buttonTooltip"
     :aria-label="buttonLabel"
     :data-issuable-id="issuableId"
     :data-issuable-type="issuableType"
     type="button"
-    data-container="body"
-    data-placement="left"
-    data-boundary="viewport"
     @click="handleButtonClick"
   >
     <gl-icon

spec/frontend/sidebar/__snapshots__/todo_spec.js.snap

@@ -4,13 +4,8 @@ exports[`SidebarTodo template renders component container element with proper da
 <button
   aria-label="Mark as done"
   class="btn btn-default btn-todo issuable-header-btn float-right"
-  data-boundary="viewport"
-  data-container="body"
   data-issuable-id="1"
   data-issuable-type="epic"
-  data-original-title=""
-  data-placement="left"
-  title=""
   type="button"
 >
   <gl-icon-stub