CODEWITHSUNDEEP
csshighchartstooltip
RAVI BANGKIT NUR ZIKRILLAH
RAVI BANGKIT NUR ZIKRILLAH

Reputation: 177

My css tooltip on highcharts title not working

I have some coding about highcharts, and I'm using custom tooltip on my title, its work, but I have problem with z-index

This is my code:enter image description here

title: {
  style: {
    fontSize: '12px',
    fontFamily: 'Open Sans',
    color: '#4E4D4D'
  },
  align: 'left',
  useHTML: true,
  text: '<b class="font-open-sans-semibold">AGE DISTRIBUTION</b> &nbsp; <i class="icon icon-tooltip tooltips" glose="{{$tooltip_age['information']}}"></i>'
},

This is my css:

.tooltips {
  display: inline;
  position: relative;
}

.tooltips:hover:after {
   content: attr(glose);
   background-color: black;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   position: absolute;
   z-index: 9999 !important;
   background: rgb(255, 255, 255);
   border-radius: 3px;

   font-family: "Open Sans";
   font-weight: 600;
   font-style: normal;
   font-size: 10px;
   line-height: 25px;
   padding: 10px;

   color: rgb(78, 77, 77);
   top: 150%;
   left: 50%;
   margin-left: -60px;
   text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
   -webkit-box-shadow: 0px 0px 5px 1px rgba(197,197,197,0.56);
   -moz-box-shadow: 0px 0px 5px 1px rgba(197,197,197,0.56);
   box-shadow: 0px 0px 5px 1px rgba(197,197,197,0.56);
 }

This is my work:

enter image description here

Upvotes: 0

Views: 600

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

To display the tooltip outside of the chart change a default overflow CSS style:

#container {
    width: 300px;
    overflow: visible !important;
}

.highcharts-container  {
    overflow: visible !important;
}

Live demo: http://jsfiddle.net/BlackLabel/7m6z5upw/

To wrap the text to the next line set white-space: normal style:

.tooltips:hover::after {
    content: '...';
    white-space: normal;
    width: 200px;
    ...
}

Live demo: http://jsfiddle.net/BlackLabel/38roauzj/

Upvotes: 1

Related Questions