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

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

0 голосов
/ 16 мая 2019

Я использую 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('45', {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'],
          ['04/05/19',  98.5, 94.5],
          ['05/05/19',  94.2, 98.1],
          ['06/05/19',  96.3, 98.9],
          ['07/05/19',  98.2, 96.5],
          ['08/05/19',  94.4, 95.2],
          ['09/05/19',  96.2, 94.5],
          ['10/05/19',  98.8, 97.5],
          ['11/05/19',  96.5, 98.1],
          ['12/05/19',  97.7, 98.5],
          ['13/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:'95%',
               height:'80%'
            },
            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 Ответ

0 голосов
/ 16 мая 2019

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

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

Это привело к тому, что при наведении курсора на карте Google не появилось.

...