How to include d3-tip.js in Qlik's Sense custom extensions

[NikosSpanos]

I have created a line chart using d3.js v4 framework and I would like to add on this line chart the d3-tip functionality. The link I use to get the d3-tip function is this from here .

To use the d3-tip in my code I use the following methodology:

extension.js file:

define(["qlik", "jquery", "./d3.v4.min", "css!./D3_LineChart.css", "./initialProperties", "./chartProperties", "https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"],
function (qlik, $, d3, css, initProps, chartProps) {
return {

....

var tool_tip = d3Tip.tip()
.attr("class", "d3-tip")
.offset([-20, 0])
.html(function(d) { return d.dValues + ": " + roundNumber(d.m1Values);});
svg.call(tool_tip);

svg.selectAll(".dot") //the circle data point on a line chart
.data(data)
.enter().append("circle")
.attr("class", "dot1")
.attr("cx", function(d){ return correctXScale(d); })
.attr("cy", function(d){return yScale(d.m1Values); })
.attr("r", 5)
.on('mouseover', tool_tip.show)
.on('mouseout', tool_tip.hide);

}

When I run the code I get back the following error

How can I resolve this? I used the same extension in this jsfiddle location and I managed to create the graph. But in Qlik Sense I couldn't manage to create it. How can I resolve such issue?

Based on the documentation the proper way to use the https location of d3-tip is <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js" integrity="sha512-a+/SD0dbGeXTN4AA5F1dDZqsPvXKKyS1bvU2z5ElpKNJ4xQlOMUs/1+suA+j+kj5nAAya+VmT5HUKZmazluxVQ==" crossorigin="anonymous"></script>

You can find all the extension files in the zip folder attached. I have also included a .qvf file in case you would like to re-regenerate the error.