Merge pull request #115 from Conflux-Chain/tooltip-hoverable-CU-4qrgqv

.jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   verbose: true,
 
-  setupFiles: ['./tests/setup.js'],
+  setupFiles: ['./tests/setup.js', 'jest-date-mock'],
 
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
 

components/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap

@@ -5503,7 +5503,7 @@ exports[`DatePicker Common prop \`disabledDate\` should works 1`] = `
           cursor: default;
           pointer-events: none;
         }
-      </style></span></span></div></div><div><div class=\\"cfx-picker-dropdown\\" style=\\"opacity: 0;\\"><div class=\\"cfx-picker-panel-container\\"><div tabindex=\\"-1\\" class=\\"cfx-picker-panel cfx-picker-panel-focused\\"><div class=\\"cfx-picker-date-panel\\"><div class=\\"cfx-picker-header\\"><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-super-prev-btn\\"><span class=\\"cfx-picker-super-prev-icon\\"></span></button><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-prev-btn\\"><span class=\\"cfx-picker-prev-icon\\"></span></button><div class=\\"cfx-picker-header-view\\"><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-month-btn\\">Aug</button><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-year-btn\\">2020</button></div><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-next-btn\\"><span class=\\"cfx-picker-next-icon\\"></span></button><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-super-next-btn\\"><span class=\\"cfx-picker-super-next-icon\\"></span></button></div><div class=\\"cfx-picker-body\\"><div class=\\"cfx-picker-tooltip\\"></div><table class=\\"cfx-picker-content\\"><thead><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead><tbody><tr><td title=\\"2020-07-26\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">26</div></td><td title=\\"2020-07-27\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">27</div></td><td title=\\"2020-07-28\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">28</div></td><td title=\\"2020-07-29\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">29</div></td><td title=\\"2020-07-30\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">30</div></td><td title=\\"2020-07-31\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">31</div></td><td title=\\"2020-08-01\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view cfx-picker-cell-range-edge-start\\"><div class=\\"cfx-picker-cell-inner\\">1</div></td></tr><tr><td title=\\"2020-08-02\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">2</div></td><td title=\\"2020-08-03\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">3</div></td><td title=\\"2020-08-04\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">4</div></td><td title=\\"2020-08-05\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">5</div></td><td title=\\"2020-08-06\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">6</div></td><td title=\\"2020-08-07\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">7</div></td><td title=\\"2020-08-08\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">8</div></td></tr><tr><td title=\\"2020-08-09\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">9</div></td><td title=\\"2020-08-10\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">10</div></td><td title=\\"2020-08-11\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">11</div></td><td title=\\"2020-08-12\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">12</div></td><td title=\\"2020-08-13\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">13</div></td><td title=\\"2020-08-14\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">14</div></td><td title=\\"2020-08-15\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">15</div></td></tr><tr><td title=\\"2020-08-16\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">16</div></td><td title=\\"2020-08-17\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">17</div></td><td title=\\"2020-08-18\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">18</div></td><td title=\\"2020-08-19\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">19</div></td><td title=\\"2020-08-20\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">20</div></td><td title=\\"2020-08-21\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">21</div></td><td title=\\"2020-08-22\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">22</div></td></tr><tr><td title=\\"2020-08-23\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">23</div></td><td title=\\"2020-08-24\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">24</div></td><td title=\\"2020-08-25\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">25</div></td><td title=\\"2020-08-26\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">26</div></td><td title=\\"2020-08-27\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">27</div></td><td title=\\"2020-08-28\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">28</div></td><td title=\\"2020-08-29\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">29</div></td></tr><tr><td title=\\"2020-08-30\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">30</div></td><td title=\\"2020-08-31\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled cfx-picker-cell-in-view cfx-picker-cell-range-edge-end\\"><div class=\\"cfx-picker-cell-inner\\">31</div></td><td title=\\"2020-09-01\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">1</div></td><td title=\\"2020-09-02\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">2</div></td><td title=\\"2020-09-03\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">3</div></td><td title=\\"2020-09-04\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">4</div></td><td title=\\"2020-09-05\\" class=\\"cfx-picker-cell cfx-picker-cell-disabled\\"><div class=\\"cfx-picker-cell-inner\\">5</div></td></tr></tbody></table></div></div><div class=\\"cfx-picker-footer\\"><a class=\\"cfx-picker-today-btn cfx-picker-today-btn-disabled\\" aria-disabled=\\"true\\">Today</a></div></div></div></div></div><style>
+      </style></span></span></div></div><div><div class=\\"cfx-picker-dropdown\\" style=\\"opacity: 0;\\"><div class=\\"cfx-picker-panel-container\\"><div tabindex=\\"-1\\" class=\\"cfx-picker-panel cfx-picker-panel-focused\\"><div class=\\"cfx-picker-date-panel\\"><div class=\\"cfx-picker-header\\"><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-super-prev-btn\\"><span class=\\"cfx-picker-super-prev-icon\\"></span></button><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-prev-btn\\"><span class=\\"cfx-picker-prev-icon\\"></span></button><div class=\\"cfx-picker-header-view\\"><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-month-btn\\">Aug</button><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-year-btn\\">2020</button></div><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-next-btn\\"><span class=\\"cfx-picker-next-icon\\"></span></button><button type=\\"button\\" tabindex=\\"-1\\" class=\\"cfx-picker-header-super-next-btn\\"><span class=\\"cfx-picker-super-next-icon\\"></span></button></div><div class=\\"cfx-picker-body\\"><div class=\\"cfx-picker-tooltip\\"></div><table class=\\"cfx-picker-content\\"><thead><tr><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr></thead><tbody><tr><td title=\\"2020-07-26\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">26</div></td><td title=\\"2020-07-27\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">27</div></td><td title=\\"2020-07-28\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">28</div></td><td title=\\"2020-07-29\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">29</div></td><td title=\\"2020-07-30\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">30</div></td><td title=\\"2020-07-31\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">31</div></td><td title=\\"2020-08-01\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view cfx-picker-cell-range-edge-start\\"><div class=\\"cfx-picker-cell-inner\\">1</div></td></tr><tr><td title=\\"2020-08-02\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">2</div></td><td title=\\"2020-08-03\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">3</div></td><td title=\\"2020-08-04\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">4</div></td><td title=\\"2020-08-05\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">5</div></td><td title=\\"2020-08-06\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">6</div></td><td title=\\"2020-08-07\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">7</div></td><td title=\\"2020-08-08\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">8</div></td></tr><tr><td title=\\"2020-08-09\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">9</div></td><td title=\\"2020-08-10\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">10</div></td><td title=\\"2020-08-11\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">11</div></td><td title=\\"2020-08-12\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">12</div></td><td title=\\"2020-08-13\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">13</div></td><td title=\\"2020-08-14\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">14</div></td><td title=\\"2020-08-15\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">15</div></td></tr><tr><td title=\\"2020-08-16\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">16</div></td><td title=\\"2020-08-17\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">17</div></td><td title=\\"2020-08-18\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">18</div></td><td title=\\"2020-08-19\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">19</div></td><td title=\\"2020-08-20\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">20</div></td><td title=\\"2020-08-21\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">21</div></td><td title=\\"2020-08-22\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">22</div></td></tr><tr><td title=\\"2020-08-23\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">23</div></td><td title=\\"2020-08-24\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">24</div></td><td title=\\"2020-08-25\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">25</div></td><td title=\\"2020-08-26\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">26</div></td><td title=\\"2020-08-27\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">27</div></td><td title=\\"2020-08-28\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">28</div></td><td title=\\"2020-08-29\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">29</div></td></tr><tr><td title=\\"2020-08-30\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view\\"><div class=\\"cfx-picker-cell-inner\\">30</div></td><td title=\\"2020-08-31\\" class=\\"cfx-picker-cell cfx-picker-cell-in-view cfx-picker-cell-range-edge-end\\"><div class=\\"cfx-picker-cell-inner\\">31</div></td><td title=\\"2020-09-01\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">1</div></td><td title=\\"2020-09-02\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">2</div></td><td title=\\"2020-09-03\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">3</div></td><td title=\\"2020-09-04\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">4</div></td><td title=\\"2020-09-05\\" class=\\"cfx-picker-cell\\"><div class=\\"cfx-picker-cell-inner\\">5</div></td></tr></tbody></table></div></div><div class=\\"cfx-picker-footer\\"><a class=\\"cfx-picker-today-btn cfx-picker-today-btn-disabled\\" aria-disabled=\\"true\\">Today</a></div></div></div></div></div><style>
     @keyframes cfxSlideUpIn {
       0% {
         transform: scaleY(0.8);