Tooltips not working on Bootstrap Modal Window

[indiansher]

 Hi,

I am unable to get tooltips for graphs that are displayed over bootstrap modal window. 

I guess this is an issue of z-index, but I am not able to figure out, how to modify the z-index of tooltip!

Below is all the necessary reference required:

BOOTSTRAP MODAL WINDOW REFERENCE : http://getbootstrap.com/javascript/#modals

HTML CODE for MODAL WINDOW

    <!-- Modal -->
        <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
              </div>
              <div class="modal-body">
                <div id="graph-div" style="width: 870px;height: 450px;display:inline-block;background-color: white">
                    
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

JAVASCRIPT FUNCTION

function loadModalChart(data,min,max)
 {        
 	  var data=[{"CODE":"ABC","QTY":25},{"CODE":"BC","QTY":25},{"CODE":"AB","QTY":25},{"CODE":"AC","QTY":25}];	
 	  $('#graph-div').empty();
 	  var chart1;
      chart1 = new cfx.Chart();
      chart1.setDataSource(data);
      chart1.getAnimations().getLoad().setEnabled(true);		//Enable Animation
      chart1.getData().setSeries(1);
      chart1.getAxisY().setMin(min);
      chart1.getAxisY().setMax(max);

      var series1 = chart1.getSeries().getItem(0);
      series1.setGallery(cfx.Gallery.Lines);	

      var title = new cfx.TitleDockable();		
      title.setText("Sales Graph");
      chart1.getTitles().add(title);
      
      chart1.getDataGrid().setVisible(true); 
      chart1.getDataGrid().setDock(cfx.DockArea.Right);
      var divHolder = document.getElementById('graph-div');
      chart1.create(divHolder);

 }

 

 

Thanks in Advance. 

[JuanC]

You can attach a handler to the gettip event and one of the fields will be the tooltip div, e.g.

function onTipDiv(args)
{
    var style = args.tooltipDiv.getAttribute("style");
    args.tooltipDiv.setAttribute("style", style + ";background:#880015");
}

chart1.on("gettip", onTipDiv);

Hope this helps.

JuanC

[indiansher]

Worked like a Charm! Thank you so much