mouseArea hover behavior interferes with tooltips

[schnitzel]

I'm trying to add tooltips to toolbuttons but the mousearea hover is somehow interfering.

here is the qml that shows the problem:



import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Rectangle {
id: page
width: 600
height: 540
border.color: "#494646"
visible: true


MouseArea {
id: mouseArea1
hoverEnabled: true

anchors.fill: parent

Flow {
id: vflow
flow: Flow.TopToBottom
anchors.fill: parent

spacing: 12


Item {
id: header
width: 600
height: 96


Image {
id: headerbkg
anchors.right: parent.right
anchors.rightMargin: 1
anchors.left: parent.left
anchors.leftMargin: 1
anchors.top: parent.top
anchors.topMargin: 1
sourceSize.height: 96
sourceSize.width: 480
source: "g_header.png"
fillMode: Image.PreserveAspectCrop
}

Flow {
id: flow1
width: 600
anchors.top: parent.top
anchors.topMargin: 4
anchors.right: parent.right
anchors.rightMargin: 4
spacing: 10
layoutDirection: Qt.RightToLeft

ToolButton {
id: tbClose
width: 16
height: 16
iconSource: "ic_close_16x16.png"
scale: maClose.containsMouse ? 1.1:1.0
smooth: maClose.containsMouse
MouseArea
{
id: maClose
anchors.fill: parent
anchors.margins: -10
hoverEnabled:true
onClicked: Qt.quit()
}
}

ToolButton {
id: tbSettings
iconSource: "ic_settings_16x16.png"
width: 16
height: 16
scale: maSettings.containsMouse ? 1.1:1.0
smooth: maSettings.containsMouse
MouseArea
{
id: maSettings
anchors.fill: parent
anchors.margins: -10
hoverEnabled:true
}
}

ToolButton {
id: tbConnect
iconSource:"ic_connect_16x16.png"
width: 16
height: 16
scale: maConnect.containsMouse ? 1.1:1.0
smooth: maConnect.containsMouse
MouseArea
{
id: maConnect
anchors.fill: parent
anchors.margins: -10
hoverEnabled:true
}
}

ToolButton {
id: tbCalculate
iconSource: "ic_calculate_16x16.png"
width: 16
height: 16
tooltip: "calculate"
scale: maCalculate.containsMouse ? 1.1:1.0
smooth: maCalculate.containsMouse
MouseArea
{
id: maCalculate
anchors.fill: parent
anchors.margins: -10
hoverEnabled:true
}
}

}
}
}
}
}