When using a simple inline sparkline, my tooltips are being cut off.

1,789 views
Skip to first unread message

Ben Tallman

unread,
Jan 22, 2014, 4:15:53 PM1/22/14
to jquery-s...@googlegroups.com
Basically, I only see the top half, even when I both set the zIndex AND highlight towards the edge. In otherwords, this doesn't seem to be a zIndex issue.

Noel Savignano

unread,
Feb 11, 2014, 8:52:53 AM2/11/14
to jquery-s...@googlegroups.com
Hi Ben,

I experienced the same issue and I fixed it like that :

<style type="text/css">
      .tooltip-class {
          width: 29px;
          height: 23px;
          color:#00FFFF;
          background-color: transparent;
          margin: 0;    
      }
</style>
<div id=visits></div>

        $('#visits').sparkline([15,19,20,22,33,27,31,27,19,30,21,10,15,18,25,9], {
          type: 'line',
          barColor: '#fa4c38', 
          height:'35px',
          weight:'96px',
          highlightColor: 'blue',
          tooltipFormat: $.spformat('<span style="color: {{color}}">&#9679;</span> {{prefix}}{{y}}{{suffix}}', 'tooltip-class')      
        });

it's something wrong with your css if you have this here :
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
Check this out here :
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
There is nothing to do with z-index

Cheers
Noel
Reply all
Reply to author
Forward
Message has been deleted
0 new messages