D3-tip behind graph when in modal

This is my first try with d3.js and I have a little problem with the d3-tip function. A picture is worth a thousand words, so here's my problem.

d3-tips worked fine until I placed my graph inside the modal. I tried css z-index as part of the d3-tip style:

 .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
        z-index: 1;
    }

      

        
        
        
      

    

This had no effect, and in my limited CSS knowledge, I believe that z-index still uses my main object as a relational key.

Here's my setup var tip

:

       var tip = d3.tip()
           .attr('class', 'd3-tip')
           .offset([-10, 0])
           .html(function(d) {
             return "<strong>Date:</strong> <span style='color:red'>" + d.date + "</span></br><strong>Time:</strong> <span style='color:red'>" + d.time + "</span>
                        </br><strong>Around:</strong> <span style='color:red'>" + d.timeGroup + "</span>";
        });     

      

        
        
        
      

    

Here is my modal:

 <div id="modal-barGraph" class="modal flex-child fade" role='dialog'>
    <div class="modal-dialog">

        <button class="close white" aria-hidden='' data-dismiss="modal" type="button">X</button>
        <div id="barGraph" ></div>

    </div>
</div>

      

        
        
        
      

    

I have also tried following the guidelines on this post.

Is there a way to bring the tip to the start of my current setup? Thank!