I have a div appearing as soon as I click the a rect (bar). At the moment, my div is disappearing as soon as I move out of the rect. But I want to show it until I leave the div. How can I do this?

var div = d3.select('body').append('div')
        .attr('class', 'tooltip-donut')
        .style('opacity', 0);

    rect.enter()
        .insert('rect', ':first-child')
        .on('click', function (d, i) {
            d3.select(this).transition()
                .duration('50')
                .attr('opacity', '.85');
            // Makes the new div appear on hover:
            div.transition()
                .duration(50)
                .style('opacity', 1);
            div.html(['Taskname: ' + i.taskName, 'Start: ' + i.startDate.toLocaleTimeString(), 'Ende: ' + i.endDate.toLocaleTimeString()].join('<br/>'))
                .style('left', (d.pageX) + 'px')
                .style('top', (d.pageY - 15) + 'px');
        })
        .on('mouseout', function (d, i) {
            d3.select(this).transition()
                .duration('50')
                .attr('opacity', '1');
            div.transition()
                .duration('50')
                .style('opacity', 0);
        })