在模态中，D3-tip在图形后面

Question

This is my first attempt with d3.js and I am having small problem with the d3-tip function. A picture is worth a thousand words so here is my issue.

d3-tips were working fine until I put my graph inside of a modal. I have 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 didn't have any effect and in my limited css knowledge I think that the z-index is still using my main body as the relational key.

Here is my var tip setup:

       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 suggestions on this post .

Is there any way to bring the tip to front with my current setup? Thanks!

Answer 1

Change the current css z-index to z-index: 10000

The modal has a value greater than 1 (the default is 1050) , therefore you wouldn't see it with the current css .