Custom tooltip Tooltip in QML chartview

Question

I have set a custom tooltip using the code

ChartView {
    id: chart
    anchors.fill: parent
    antialiasing: true
    ValueAxis {
        id: axisY
        tickCount: 3
    }
    DateTimeAxis{
           id: xTime
           gridVisible: false
       }
    ToolTip {
        id: id_toolTip
        contentItem: Text{
            color: "#21be2b"
        }
        background: Rectangle {
                border.color: "#21be2b"
            }

    }
    SplineSeries{
        id: chartseries
        pointsVisible: true
        pointLabelsVisible: false
        useOpenGL: true
        axisX: xTime
        axisY: axisY
        onClicked: {
            id_toolTip.show("dd")
         }
    }

}

It gives an error when I click on the graph ..

TypeError: Property 'show' of object QQuickToolTip(0x37275d0) is not a function" 

But below mentioned code will work.

  chart.ToolTip.show("dd")

But I need custom tooltip

Answer 1

In the first case, id_toolTip.show("dd") , you try to call the show func of the instantiated version of QML::Tooltip whereas at the second case, chart.ToolTip.show("dd") you call the show function of the attached property Tooltip which exists for all the qml controls.

Acccording to the docs, if you don't provide a second parameter, then this means that show() is the func of the shared tooltip and not the one you instantiate. That might be the reason your code does not work.

Answer 2

You can use the other properties as I show below:

ChartView {
    id: chart
    anchors.fill: parent
    antialiasing: true
    ValueAxis {
        id: axisY
        tickCount: 3
        max: 4
        min: 0
    }
    DateTimeAxis{
        id: xTime
        gridVisible: false
    }

    ToolTip {
        id: id_tooltip
        contentItem: Text{
            color: "#21be2b"
            text: id_tooltip.text
        }
        background: Rectangle {
            border.color: "#21be2b"
        }
    }

    SplineSeries{
        id: chartseries
        XYPoint { x: new Date('December 17, 1995 03:24:00').getTime() ; y: 0.0 }
        XYPoint { x: new Date('December 18, 1995 04:25:00').getTime() ; y: 3.2 }
        XYPoint { x: new Date('December 19, 1995 05:26:00').getTime() ; y: 2.4 }
        XYPoint { x: new Date('December 20, 1995 06:27:00').getTime() ; y: 2.1 }
        XYPoint { x: new Date('December 21, 1995 07:24:00').getTime() ; y: 0.0 }
        XYPoint { x: new Date('December 22, 1995 08:25:00').getTime() ; y: 3.2 }
        XYPoint { x: new Date('December 23, 1995 09:26:00').getTime() ; y: 2.4 }
        XYPoint { x: new Date('December 24, 1995 10:27:00').getTime() ; y: 2.1 }

        pointsVisible: true
        pointLabelsVisible: false
        useOpenGL: true
        axisX: xTime
        axisY: axisY
        onClicked: {
            var p = chart.mapToPosition(point)
            var text = qsTr("x: %1, y: %2").arg(new Date(point.x).toLocaleDateString(Qt.locale("en_US"))).arg(point.y)
            id_tooltip.x = p.x
            id_tooltip.y = p.y - id_tooltip.height
            id_tooltip.text = text
            //id_tooltip.timeout = 1000
            id_tooltip.visible = true
        }
    }
}