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.