[IMP] website_event_exhibitor: add a popover on the exhibitor cards

On the website, the exhibitor cards only shows a logo. If the visitors
clicks on a logo, the visitors will be redirected to the website of the
corresponding exhibitor. If no website has been set and the logo of the
exhibitor is rather abstract, the visitors may not be able to recognize
and identify the exhibitor.

To provide more information about the exhibitor, we will add a small
popover that will be opened when the visitor clicks on the logo. The
popover will contain the following information:

- The name of the exhibitor
- The website of the exhibitor

Other information are considered as private and can be added through
customization if this fits specific use cases.

task-2504216

COM PR: odoo/odoo#69585
UPG PR: odoo/upgrade#2408

addons/website_event_exhibitor/static/src/scss/event_templates_sponsor.scss

@@ -55,6 +55,7 @@
     border: 1px solid $gray-200;
     background-color: $white;
     margin: 0 -1px -1px 0;
+    cursor: pointer;
 
     .ribbon-wrapper {
         width: 50px;

addons/website_event_exhibitor/views/event_templates_sponsor.xml

@@ -6,17 +6,18 @@
         <div class="container mt32 mb16 d-none d-md-block d-print-none" t-if="event.sponsor_ids">
             <div t-attf-class="d-flex flex-wrap mb-5 #{'' if (len(event.sponsor_ids) > 10) else 'justify-content-md-center'}">
                 <t t-foreach="event.sponsor_ids.sorted(lambda sponsor: not sponsor.website_published)" t-as="sponsor">
-                    <t t-if="sponsor.url">
-                        <a class="o_wevent_sponsor o_wevent_sponsor_card h-100 text-decoration-none" target="_blank" t-att-href="sponsor.url"
-                            t-att-data-publish="'on' if sponsor.website_published else 'off'">
-                            <t t-call="website_event_exhibitor.event_sponsor_thumb_details"/>
-                        </a>
-                    </t>
-                    <t t-if="not sponsor.url">
-                        <div class="o_wevent_sponsor o_wevent_sponsor_card h-100" t-att-data-publish="'on' if sponsor.website_published else 'off'">
-                            <t t-call="website_event_exhibitor.event_sponsor_thumb_details"/>
+                    <t t-set="popover_content">
+                        <div t-field="sponsor.name" class="h5"/>
+                        <div t-if="sponsor.url" class="d-flex align-items-baseline">
+                            <i class="fa fa-home mr-2"/><a t-att-href="sponsor.url" t-field="sponsor.url" class="text-truncate"/>
                         </div>
                     </t>
+                    <a class="o_wevent_sponsor o_wevent_sponsor_card h-100" tabindex="0" role="button"
+                        t-att-data-publish="'on' if sponsor.website_published else 'off'"
+                        t-att-data-content="popover_content"
+                        data-html="true" data-trigger="focus" data-toggle="popover" data-placement="bottom">
+                        <t t-call="website_event_exhibitor.event_sponsor_thumb_details"/>
+                    </a>
                 </t>
             </div>
         </div>

addons/website_event_track/static/src/js/website_event_track.js

@@ -13,6 +13,15 @@ publicWidget.registry.websiteEventTrack = publicWidget.Widget.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    start: function () {
+        this._super.apply(this, arguments).then(() => {
+            this.$el.find('[data-toggle="popover"]').popover()
+        })
+    },
+
     /**
      * @private
      * @param {Event} ev