Use data-tooltip-content for tippy tooltip (#23649)

Follow:
* #23574
* Remove all ".tooltip[data-content=...]"

Major changes:

* Remove "tooltip" class, use "[data-tooltip-content=...]" instead of
".tooltip[data-content=...]"
* Remove legacy `data-position`, it's dead code since last Fomantic
Tooltip -> Tippy Tooltip refactoring
* Rename reaction attribute from `data-content` to
`data-reaction-content`
* Add comments for some `data-content`: `{{/* used by the form */}}`
* Remove empty "ui" class
* Use "text color" for SVG icons (a few)

web_src/js/components/DashboardRepoList.vue

@@ -10,7 +10,7 @@
           {{ textMyRepos }}
           <span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span>
         </div>
-        <a class="tooltip" :href="subUrl + '/repo/create'" :data-content="textNewRepo" data-position="left center">
+        <a :href="subUrl + '/repo/create'" :data-tooltip-content="textNewRepo">
           <svg-icon name="octicon-plus"/>
           <span class="sr-only">{{ textNewRepo }}</span>
         </a>
@@ -119,7 +119,7 @@
           {{ textMyOrgs }}
           <span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span>
         </div>
-        <a v-if="canCreateOrganization" class="tooltip" :href="subUrl + '/org/create'" :data-content="textNewOrg" data-position="left center">
+        <a v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
           <svg-icon name="octicon-plus"/>
           <span class="sr-only">{{ textNewOrg }}</span>
         </a>

web_src/js/components/DiffFileList.vue

@@ -4,12 +4,12 @@
       <div class="gt-bold gt-df gt-ac pull-right">
         <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ binaryFileMessage }}</span>
         {{ file.IsBin ? '' : file.Addition + file.Deletion }}
-        <span v-if="!file.IsBin" class="diff-stats-bar tooltip gt-mx-3" :data-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
+        <span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
           <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }" />
         </span>
       </div>
       <!-- todo finish all file status, now modify, add, delete and rename -->
-      <span :class="['status', diffTypeToString(file.Type), 'tooltip']" :data-content="diffTypeToString(file.Type)" data-position="right center">&nbsp;</span>
+      <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)">&nbsp;</span>
       <a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
     </li>
     <li v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">

web_src/js/components/DiffFileTreeItem.vue

@@ -5,7 +5,6 @@
       <!-- Files -->
       <SvgIcon
         v-if="item.isFile"
-        data-position="right center"
         name="octicon-file"
         class="svg-icon file"
       />
@@ -16,7 +15,6 @@
       >{{ item.name }}</a>
       <SvgIcon
         v-if="item.isFile"
-        data-position="right center"
         :name="getIconForDiffType(item.file.Type)"
         :class="['svg-icon', getIconForDiffType(item.file.Type), 'status']"
       />

web_src/js/features/comp/ReactionSelector.js

@@ -26,7 +26,7 @@ export function initCompReactionSelector(parent) {
       url,
       data: {
         _csrf: csrfToken,
-        content: $(this).data('content')
+        content: $(this).attr('data-reaction-content'),
       }
     }).done((resp) => {
       if (resp && (resp.html || resp.empty)) {

web_src/js/modules/aria/dropdown.js

@@ -102,8 +102,9 @@ function attachStaticElements($dropdown, $focusable, $menu) {
   });
 
   // use tooltip's content as aria-label if there is no aria-label
-  if ($dropdown.hasClass('tooltip') && $dropdown.attr('data-content') && !$dropdown.attr('aria-label')) {
-    $dropdown.attr('aria-label', $dropdown.attr('data-content'));
+  const tooltipContent = $dropdown.attr('data-tooltip-content');
+  if (tooltipContent && !$dropdown.attr('aria-label')) {
+    $dropdown.attr('aria-label', tooltipContent);
   }
 }
 

web_src/js/modules/tippy.js

@@ -36,7 +36,7 @@ export function createTippy(target, opts = {}) {
  * @returns {null|tippy}
  */
 function attachTooltip(target, content = null) {
-  content = content ?? getTooltipContent(target);
+  content = content ?? target.getAttribute('data-tooltip-content');
   if (!content) return null;
 
   const props = {
@@ -67,30 +67,18 @@ function lazyTooltipOnMouseHover(e) {
   attachTooltip(this);
 }
 
-function getTooltipContent(target) {
-  // prefer to always use the "[data-tooltip-content]" attribute
-  // for backward compatibility, we also support the ".tooltip[data-content]" attribute
-  // in next PR, refactor all the ".tooltip[data-content]" to "[data-tooltip-content]"
-  let content = target.getAttribute('data-tooltip-content');
-  if (!content && target.classList.contains('tooltip')) {
-    content = target.getAttribute('data-content');
-  }
-  return content;
-}
-
 /**
  * Activate the tooltip for all children elements
  * And if the element has no aria-label, use the tooltip content as aria-label
  * @param target {HTMLElement}
  */
 function attachChildrenLazyTooltip(target) {
-  // the selector must match the logic in getTippyTooltipContent
-  for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) {
+  for (const el of target.querySelectorAll('[data-tooltip-content]')) {
     el.addEventListener('mouseover', lazyTooltipOnMouseHover, true);
 
     // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
     if (!el.hasAttribute('aria-label')) {
-      const content = getTooltipContent(el);
+      const content = target.getAttribute('data-tooltip-content');
       if (content) {
         el.setAttribute('aria-label', content);
       }
@@ -119,7 +107,7 @@ export function initGlobalTooltips() {
   observer.observe(document, {
     subtree: true,
     childList: true,
-    attributeFilter: ['data-tooltip-content', 'data-content'],
+    attributeFilter: ['data-tooltip-content'],
   });
 
   attachChildrenLazyTooltip(document.documentElement);