Remove title attribute from Chips

craftcms · Feb 29, 2024 · db9dce0 · db9dce0
1 parent d17d1a1
commit db9dce0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -465,7 +465,6 @@ public static function chipHtml(Chippable $component, array $config = []): strin
         $attributes = ArrayHelper::merge([
             'id' => $config['id'],
             'class' => ['chip', $config['size']],
-            'title' => $label,
             'style' => array_filter([
                 '--custom-bg-color' => $color?->cssVar(50),
                 '--custom-text-color' => $color?->cssVar(900),
@@ -586,17 +585,9 @@ public static function elementChipHtml(ElementInterface $element, array $config
             'sortable' => false,
         ];
 
-        $title = implode('', array_map(fn(string $segment) => "$segment → ", $element->getUiLabelPath())) .
-            $element->getUiLabel();
-
-        if (Craft::$app->getIsMultiSite()) {
-            $title .= sprintf(' - %s', Craft::t('site', $element->getSite()->getName()));
-        }
-
         $config['attributes'] = ArrayHelper::merge(
             self::baseElementAttributes($element, $config),
             [
-                'title' => $title,
                 'data' => array_filter([
                     'settings' => $config['autoReload'] ? [
                         'context' => $config['context'],

diff --git a/src/web/assets/cp/src/js/CraftElementLabel.js b/src/web/assets/cp/src/js/CraftElementLabel.js
@@ -33,6 +33,13 @@ class CraftElementLabel extends HTMLElement {
     }
 
     this.update();
+
+    // Update again when the document is ready.
+    // At the moment, this is necessary for this functionality within a dashboard
+    // widget. In that case, this component is rendered too early.
+    $(() => {
+      this.update();
+    });
   }
 
   update() {
@@ -50,12 +57,26 @@ class CraftElementLabel extends HTMLElement {
 
     // If not, create one
     if (!this.tooltip) {
-      this.tooltip = document.createElement('craft-tooltip');
-      this.tooltip.innerText = this.innerText;
-      this.labelLink.appendChild(this.tooltip);
+      this.createTooltip();
     }
   }
 
+  createTooltip() {
+    this.tooltip = document.createElement('craft-tooltip');
+    this.tooltip.innerText = this.innerText;
+
+    // If there's a context label, make it a little nicer
+    const contextLabel = this.querySelector('.context-label');
+    if (contextLabel) {
+      this.tooltip.innerText = this.tooltip.innerText.replace(
+        contextLabel.innerText,
+        ` (${contextLabel.innerText})`
+      );
+    }
+
+    this.labelLink.appendChild(this.tooltip);
+  }
+
   disconnectedCallback() {
     this.tooltip?.remove();
     this.$tabs.data('tabs')?.off('selectTab');