При использовании uikit всплывающие подсказки Google не отображаются

Я использую Uikit (getuikit.com) и диаграммы Google, но подсказки на диаграмме не отображаются при использовании uk-sortable = "handle: .uk-sortable-handle".

Я сделал jsfiddle, чтобы вы могли видеть, что он не работает в данный момент.

Это работает, если я достану ссылку для uikit.css (но она мне нужна). Также это работает, если я удаляю uk-sortable = "handle: .uk-sortable-handle" из div (но мне также нужен этот, чтобы перетаскивать плитку), всплывающие подсказки возвращаются, поэтому я знаю, что это что-то, что нужно сделать с Уикит. Кто-нибудь нашел работу вокруг этого?

Спасибо за помощь.

**HTML**
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
<script type="text/javascript">google.charts.load(ཀྵ', {packages: ['table','controls','corechart','treemap','map','geochart','gauge','timeline']});</script>

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit-icons.min.js"></script>

    <div uk-sortable="handle: .uk-sortable-handle">
      <div id="chart" style="width: 400px; height: 400px;"></div>
    </div>
**JS**

google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var dTable2 = google.visualization.arrayToDataTable([
          ['Date',  'TY', 'LY'],
          [ཀ/05/19',  98.5, 94.5],
          [ཁ/05/19',  94.2, 98.1],
          [ག/05/19',  96.3, 98.9],
          [གྷ/05/19',  98.2, 96.5],
          [ང/05/19',  94.4, 95.2],
          [ཅ/05/19',  96.2, 94.5],
          [ཆ/05/19',  98.8, 97.5],
          [ཇ/05/19',  96.5, 98.1],
          [཈/05/19',  97.7, 98.5],
          [ཉ/05/19',  95.4, 94.3]
        ]);


        var options = {
            focusTarget: 'category',
            tooltip: {isHtml: true},
            legend: {
            position: 'top',
            alignment: 'center', 
            textStyle: {
              color: '#a5a5a5', 
              fontSize: 10
            }
          },
            chartArea:{
               top: 25,
               left: 50,
               width:ྛ%',
               height:ྌ%'
            },
            height: 250,
        width: 800,
            backgroundColor: '#5a5959',
            hAxis: {
              baselineColor: 'transparent',
              gridlines: {
                color: 'transparent'
              },
              textStyle: {
                color: '#a5a5a5',
                fontSize: 10,
                fontName: 'Arial',
                bold: false,
                italic: false
              },
            },
            vAxis: {
              baselineColor: 'transparent',
              gridlines: {
                color: 'transparent'
              },
              textStyle: {
                color: '#a5a5a5',
                fontSize: 10,
                bold: false
              },
          format: '#'
            },
            colors: ['#99ca3d', '#798860'],
            seriesType: 'bars',
            series: {1: {type: 'line'}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart'));
        chart.draw(dTable2, options);
      }

Here is the jsfiddle 
    https://jsfiddle.net/justme0112/kqaLmvgu/1/

Я ожидаю, что всплывающие подсказки будут работать с uikit.

Всего 1 ответ


Я нашел решение, вам просто нужно прокомментировать строку 6055 из uikit.css

.uk-sortable svg {
  pointer-events: none;
}

Это заставляло зависание не появляться на гугл-чарте.


Есть идеи?

10000