Подсказка Highcharts отображается над div - PullRequest
Новая
       40

Подсказка Highcharts отображается над div

0 голосов
/ 29 ноября 2018

Я бы хотел, чтобы всплывающие подсказки круговой диаграммы отображались над элементом div, частично скрывая диаграмму.

Вот моя структура HTML.Элемент .circle-text содержит мой div и .container график.

<div class="bubble">
    <div class="circle-text"></div>
    <div id="container"></div>
</div>

Я пробовал решения, использующие свойства CSS: 

.highcharts-container {
    position: inherit !important;
}
.highcharts-tooltip {
    z-index: 9998 !important;
}
.highcharts-tooltip span {
    background-color:white;
    border:1px solid green;
    opacity:1;
    z-index:9999!important;
}

или Highcharts: 

tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
    style: {
        'color': 'pink',
        'z-index': '9999'
    }
}

Но пока ни одно из них не сработало.

Мой div, покрывающий диаграмму, имеет следующий стиль, и я не понимаю, как это может помешать z-index всплывающей подсказки. 

.circle-text {
    position: absolute;
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #3A3A4F;
    color: #fff;
    z-index: 2;
    top: 50px;
    left: 50px;
    cursor: pointer;
    box-shadow: 0 0 20px #000;
}

https://codepen.io/SamHCadman/pen/MzzrGJ

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Чтобы ваши стили уважались по отношению к другим HTML-элементам, установите для свойства useHTML для всплывающей подсказки значение true: 

tooltip: {
    useHTML: true,
    padding: 0,
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
    style: {
        'color': 'pink',
        'z-index': '9999'
    }
}

Демонстрационная версия: http://jsfiddle.net/BlackLabel/4r9Lkcz7/

API:https://api.highcharts.com/highcharts/tooltip.useHTML

0 голосов
/ 29 ноября 2018

Сэм, я пытался играть как с вашим JS, так и с вашим CSS и не смог получить всплывающую подсказку выше .circle-text.Тем не менее, я добавил эту анимацию в качестве обходного пути.Пожалуйста, не стесняйтесь игнорировать это, если вы уверены в достижении результата, который вы описали.

Единственные изменения, которые я сделал, были в вашем CSS (.circle-text).Это приведет к исчезновению .circle-text при наведении .bubble на 

/* https://anacidre.com/creating-circle-text-using-html-css/ */
.circle-text {
    position: absolute;
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #3A3A4F;
    color: #fff;
    z-index: 9999;
    top: 50px;
    left: 50px;
    cursor: pointer;
    box-shadow: 0 0 20px #000;
    transition: transform 500ms;
}

.bubble:hover .circle-text {
    transform: scale(0);
}
.
...