Jump to content
JChartFX Community
  • 0
Sign in to follow this  
indiansher

Tooltips not working on Bootstrap Modal Window

Question

indiansher    0

 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. 

:D

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
JuanC    3

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

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×