[FIX] web: fix invalid popover for tags_list

The `TagsList` component may be provided with a list of tags and a
number of tags that should be visible.
In the case where there are more tags then there are tags that should be
visible a ball with the number of remaining records is added with a
popover containing the names of the records.
However the popover contained plain text resulting in
`record1<br/>record2` instead of marked up html.
It will now use a tooltip template and more info.

X-original-commit: baf9711407a01ec196bf7de191372056aa4cab6e
Part-of: odoo/odoo#100764

addons/web/static/src/views/fields/many2many_tags/tags_list.js

@@ -15,8 +15,13 @@ export class TagsList extends Component {
         }
         return this.props.tags.slice(this.props.itemsVisible - 1);
     }
-    get tooltip() {
-        return this.otherTags.map((i) => i.text).join("<br/>");
+    get tooltipInfo() {
+        return JSON.stringify({
+            tags: this.otherTags.map((tag) => ({
+                text: tag.text,
+                id: tag.id,
+            })),
+        });
     }
 }
 TagsList.template = "web.TagsList";

addons/web/static/src/views/fields/many2many_tags/tags_list.xml

@@ -13,10 +13,16 @@
                 <a tabIndex="-1" t-if="tag.onDelete" t-on-click.stop.prevent="(ev) => tag.onDelete and tag.onDelete(ev)" href="#" class="fa fa-times o_delete" title="Delete" aria-label="Delete"></a>
             </span>
         </t>
-        <span t-if="props.tags and otherTags.length" class="o_m2m_avatar_empty rounded-circle text-center fw-bold" t-att-data-tooltip="tooltip">
+        <span t-if="props.tags and otherTags.length" class="o_m2m_avatar_empty rounded-circle text-center fw-bold" data-tooltip-template="web.TagsList.Tooltip" data-tooltip-position="right" t-att-data-tooltip-info="tooltipInfo">
             <span t-if="otherTags.length > 9" t-esc="'9+'" />
             <span t-else="" t-esc="'+' + otherTags.length" />
         </span>
     </t>
 
+    <t t-name="web.TagsList.Tooltip" owl="1">
+        <t t-foreach="tags" t-as="tag" t-key="tag.id">
+            <div t-esc="tag.text"/>
+        </t>
+    </t>
+
 </templates>

addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js

@@ -204,8 +204,14 @@ QUnit.module("Fields", (hooks) => {
             ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
         );
         assert.strictEqual(
-            tag.dataset["tooltip"],
-            "record 6<br/>record 7",
+            tag.dataset["tooltipTemplate"],
+            "web.TagsList.Tooltip",
+            "uses the proper tooltip template",
+        );
+        const tooltipInfo = JSON.parse(tag.dataset["tooltipInfo"]);
+        assert.strictEqual(
+            tooltipInfo.tags.map(tag => tag.text).join(" "),
+            'record 6 record 7',
             "shows a tooltip on hover"
         );
 
@@ -228,7 +234,7 @@ QUnit.module("Fields", (hooks) => {
     });
 
     QUnit.test("widget many2many_tags_avatar in kanban view", async function (assert) {
-        assert.expect(12);
+        assert.expect(13);
 
         const records = [];
         for (let id = 5; id <= 15; id++) {
@@ -355,9 +361,15 @@ QUnit.module("Fields", (hooks) => {
             ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
         );
         assert.strictEqual(
-            tag.dataset["tooltip"],
-            "aaa<br/>record 5",
-            "shows a tooltip on hover with the right text"
+            tag.dataset["tooltipTemplate"],
+            "web.TagsList.Tooltip",
+            "uses the proper tooltip template",
+        );
+        const tooltipInfo = JSON.parse(tag.dataset["tooltipInfo"]);
+        assert.strictEqual(
+            tooltipInfo.tags.map(tag => tag.text).join(" "),
+            'aaa record 5',
+            "shows a tooltip on hover"
         );
 
         await click(