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

Tooltips not working on Bootstrap Modal Window

Question

 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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...