fix(tooltip): custom renderer demo block (#621)

* fix(tooltip): fix tooltip selector of custom renderer demo block

* fix(tooltip): deregister overflow tooltip for elements in custom renderer demo-block

packages/elements/src/tooltip/__demo__/index.html

@@ -234,8 +234,16 @@
             <span>If the tooltip does not fit the screen, it repositions or shrinks itself for the best fit. Try to manipulate with screen size and scrollbars to see how does it work.</span>
         </ef-item>
 
-        <ef-tooltip id="item-tooltip" selector="#custom-renderer item"></ef-tooltip>
-        <script>
+        <ef-tooltip id="item-tooltip" selector="#custom-renderer ef-item"></ef-tooltip>
+        <script type="module">
+          import { deregisterOverflowTooltip } from '@refinitiv-ui/elements/tooltip';
+          setTimeout(() => { // deregister these elements from the default overflow tooltip as a custom renderer would do that instead.
+            const coralItemList = document.querySelectorAll('#custom-renderer ef-item');
+            coralItemList.forEach(element => {
+              deregisterOverflowTooltip(element);
+            });
+          }, 50);
+
           (function () {
             const tooltip = document.getElementById('item-tooltip');