Some initial tooltip tests.

6 files changed, 276 insertions, 26 deletions

diff --git a/BarTool.qml b/BarTool.qml
index 99e5938..1898c3d 100644
--- a/BarTool.qml
+++ b/BarTool.qml
@@ -1,18 +1,57 @@
 import QtQuick 2.9
 import QtQuick.Controls 1.4
 
+import "TooltipCreator.js" as TooltipCreator
+
 ToolButton
 {
 	property string image
 	property int tool: 0
+	property var popup
 
 	implicitHeight: 32
 	implicitWidth: 32
+	z: 20
 	Image
 	{
 		source: image
 		anchors { fill: parent; margins: 4 }
 	}
+/*
+	ToolTip1
+	{
+		id: tooltip1
+		width: 200
+		target: parent
+		text: tooltip
+	}
+*/
+
+/*
+	MouseArea
+	{
+		anchors.fill: parent
+		hoverEnabled: true
+		propagateComposedEvents: true
+
+		onEntered:
+		{
+			popup = TooltipCreator.create(tooltip, this)
+			popup.show()
+		}
+		onExited:
+		{
+			if ( popup !== null )
+				popup.hide()
+		}
+	}
+*/
+	onHoveredChanged:
+	{
+		popup = TooltipCreator.create(tooltip, this)
+		popup.show()
+	}
+
 	onClicked:
 	{
 		if ( tool )
diff --git a/ToolTip1.qml b/ToolTip1.qml
new file mode 100644
index 0000000..868b4a4
--- /dev/null
+++ b/ToolTip1.qml
@@ -0,0 +1,83 @@
+import QtQuick 2.0
+import QtQuick.Controls 1.1
+import QtGraphicalEffects 1.0
+
+Item
+{
+	id: toolTipRoot
+	width: toolTip.contentWidth
+	height: toolTipContainer.height
+	visible: false
+	clip: false
+	z: 30
+
+	property alias text: toolTip.text
+	property alias radius: content.radius
+	property alias backgroundColor: content.color
+	property alias textColor: toolTip.color
+	property alias font: toolTip.font
+	property var target: null
+
+	function onMouseHover(x, y)
+	{
+		var obj = toolTipRoot.target.mapToItem(toolTipRoot.parent, x, y);
+		toolTipRoot.x = obj.x;
+		toolTipRoot.y = obj.y + 5;
+	}
+
+	function onVisibleStatus(flag)
+	{
+		toolTipRoot.visible = flag;
+	}
+
+	Component.onCompleted:
+	{
+		var itemParent = toolTipRoot.target;
+
+		var newObject = Qt.createQmlObject('import QtQuick 2.0; MouseArea {signal mouserHover(int x, int y); signal showChanged(bool flag); anchors.fill:parent; hoverEnabled: true; onPositionChanged: {mouserHover(mouseX, mouseY)} onEntered: {showChanged(true)} onExited:{showChanged(false)} onClicked:{parent.focus = true}}',
+			itemParent, "mouseItem");
+		newObject.mouserHover.connect(onMouseHover);
+		newObject.showChanged.connect(onVisibleStatus);
+	}
+
+	Item
+	{
+		id: toolTipContainer
+		z: toolTipRoot.z + 1
+		width: content.width + (2*toolTipShadow.radius)
+		height: content.height + (2*toolTipShadow.radius)
+
+		Rectangle
+		{
+			id: content
+			anchors.centerIn: parent
+			width: toolTipRoot.width
+			height: toolTip.contentHeight + 10
+			radius: 3
+
+			Text
+			{
+				id: toolTip
+				anchors {fill: parent; margins: 5}
+				wrapMode: Text.WrapAnywhere
+			}
+		}
+	}
+
+	DropShadow
+	{
+		id: toolTipShadow
+		z: toolTipRoot.z + 1
+		anchors.fill: source
+		cached: true
+		horizontalOffset: 4
+		verticalOffset: 4
+		radius: 8.0
+		samples: 16
+		color: "#80000000"
+		smooth: true
+		source: toolTipContainer
+	}
+
+	Behavior on visible { NumberAnimation { duration: 200 }}
+}
diff --git a/ToolTip2.qml b/ToolTip2.qml
new file mode 100644
index 0000000..075925b
--- /dev/null
+++ b/ToolTip2.qml
@@ -0,0 +1,96 @@
+import QtQuick 2.2
+
+Rectangle
+{
+	id: tooltip
+
+	property alias text: tooltipText.text
+	property alias textItem: tooltipText
+	property int fadeInDelay: 200
+	property int fadeOutDelay: 200
+	property bool autoHide: true
+	property alias autoHideDelay: hideTimer.interval
+	property bool destroyOnHide: true
+
+	function show()
+	{
+		state = "showing"
+		if ( hideTimer.running )
+			hideTimer.restart()
+	}
+
+	function hide()
+	{
+		if ( hideTimer.running )
+			hideTimer.stop()
+		state = "hidden"
+	}
+
+	width: tooltipText.width + 20
+	height: tooltipText.height + 10
+	color: "#dd000000"
+	radius: 6
+	opacity: 0
+	z: 30
+
+	Text
+	{
+		id: tooltipText
+		anchors.centerIn: parent
+		horizontalAlignment: Text.AlignHCenter
+		color: "white"
+		font.pointSize: 10
+		font.bold: true
+	}
+
+	MouseArea
+	{
+		anchors.fill: parent
+		onClicked: hide()
+	}
+
+	Timer
+	{
+		id: hideTimer
+		interval: 3000
+		onTriggered: hide()
+	}
+
+	states:
+	[
+		State
+		{
+			name: "showing"
+			PropertyChanges { target: tooltip; opacity: 1 }
+			onCompleted:
+			{
+				if ( autoHide )
+					hideTimer.start()
+			}
+		},
+		State
+		{
+			name: "hidden"
+			PropertyChanges { target: tooltip; opacity: 0 }
+			onCompleted:
+			{
+				if ( destroyOnHide )
+					tooltip.destroy()
+			}
+		}
+	]
+
+	transitions:
+	[
+		Transition
+		{
+			to: "showing"
+			NumberAnimation { target: tooltip; property: "opacity"; duration: fadeInDelay }
+		},
+		Transition
+		{
+			to: "hidden"
+			NumberAnimation { target: tooltip; property: "opacity"; duration: fadeOutDelay }
+		}
+	]
+}
diff --git a/TooltipCreator.js b/TooltipCreator.js
new file mode 100644
index 0000000..58a0c3d
--- /dev/null
+++ b/TooltipCreator.js
@@ -0,0 +1,28 @@
+var component = Qt.createComponent("ToolTip2.qml");
+
+function create(text, parent, properties)
+{
+	if ( typeof properties == "undefined" )
+	{
+		properties =
+		{
+			anchors:
+			{
+				left: parent.horizontalCenter,
+				top: parent.bottom,
+//				topMargin: parent.height / 8
+			}
+		};
+	}
+	properties.text = text;
+	var tooltip = component.createObject(parent, properties);
+	if ( tooltip === null )
+		console.error("error creating tooltip: " + component.errorString());
+	else if ( properties.anchors )
+	{
+		// manual anchor mapping necessary
+		for ( var anchor in properties.anchors )
+			tooltip.anchors[anchor] = properties.anchors[anchor];
+	}
+	return tooltip;
+}
diff --git a/main.qml b/main.qml
index c909907..0b786f2 100644
--- a/main.qml
+++ b/main.qml
@@ -76,28 +76,29 @@ ApplicationWindow
 			RowLayout
 			{
 				height: 32
-				BarTool { image: "image/folder_open_icon&48.png"; onClicked: open() }
-				BarTool { image: "image/save_icon&48.png"; onClicked: save() }
+				z: 10
+				BarTool { image: "image/folder_open_icon&48.png"; tooltip: "Open File"; onClicked: open() }		//%%
+				BarTool { image: "image/save_icon&48.png"; tooltip: "Save File"; onClicked: save() }			//%%
 				BarSeparator { }
-				BarTool { image: "image/clipboard_cut_icon&48.png"; onClicked: cut() }
-				BarTool { image: "image/clipboard_copy_icon&48.png"; onClicked: copy() }
-				BarTool { image: "image/clipboard_past_icon&48.png"; onClicked: paste() }
-				BarTool { image: "image/rotate_right.png"; onClicked: rotate(1) }
-				BarTool { image: "image/rotate_left.png"; onClicked: rotate(-1) }
-				BarTool { image: "image/delete.png"; onClicked: remove() }
+				BarTool { image: "image/clipboard_cut_icon&48.png"; tooltip: "Cut Symbol"; onClicked: cut() }		//%%
+				BarTool { image: "image/clipboard_copy_icon&48.png"; tooltip: "Copy Symbol"; onClicked: copy() }	//%%
+				BarTool { image: "image/clipboard_past_icon&48.png"; tooltip: "Paste symbol"; onClicked: paste() }	//%%
+				BarTool { image: "image/rotate_right.png"; tooltip: "Rotate right"; onClicked: rotate(1) }			//%%
+				BarTool { image: "image/rotate_left.png"; tooltip: "Rotate left"; onClicked: rotate(-1) }			//%%
+				BarTool { image: "image/delete.png"; tooltip: "Delete item"; onClicked: remove() }					//%%
 				BarSeparator { }
-				BarTool { image: "image/cursor_arrow_icon&48.png"; tool: Editor.Tool.Select }
+				BarTool { image: "image/cursor_arrow_icon&48.png"; tooltip: "Select item"; tool: Editor.Tool.Select }	//%%
 				BarSeparator { }
-				BarTool { image: "image/polyline.png"; tool: Editor.Tool.Line }
+				BarTool { image: "image/polyline.png"; tooltip: "Straight Line"; tool: Editor.Tool.Line }	//%%
 				BarSeparator { }
-				BarTool { image: "image/rectangle_corner.png"; tool: Editor.Tool.RectCorner }
-				BarTool { image: "image/rectangle_center.png"; tool: Editor.Tool.RectCenter }
+				BarTool { image: "image/rectangle_corner.png"; tooltip: "Rectangle Corners"; tool: Editor.Tool.RectCorner }	//%%
+				BarTool { image: "image/rectangle_center.png"; tooltip: "Rectangle Center"; tool: Editor.Tool.RectCenter }	//%%
 				BarSeparator { }
-				BarTool { image: "image/circle_corner.png"; tool: Editor.Tool.CircleCorner }
-				BarTool { image: "image/circle_radius.png"; tool: Editor.Tool.CircleRadius }
-				BarTool { image: "image/circle_center.png"; tool: Editor.Tool.CircleCenter }
+				BarTool { image: "image/circle_corner.png"; tooltip: "Circle Corner"; tool: Editor.Tool.CircleCorner }	//%%
+				BarTool { image: "image/circle_radius.png"; tooltip: "Circle Radius"; tool: Editor.Tool.CircleRadius }	//%%
+				BarTool { image: "image/circle_center.png"; tooltip: "Circle Center"; tool: Editor.Tool.CircleCenter }	//%%
 				BarSeparator { }
-				BarTool { image: "image/text.png"; tool: Editor.Tool.Text }
+				BarTool { image: "image/text.png"; tooltip: "Text String"; tool: Editor.Tool.Text }		//%%
 			}
 			RowLayout
 			{
diff --git a/qml.qrc b/qml.qrc
index 17587ea..eb366b0 100644
--- a/qml.qrc
+++ b/qml.qrc
@@ -1,25 +1,28 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
-		<file>MenuTool.qml</file>
-		<file>BarSeparator.qml</file>
-		<file>BarTool.qml</file>
+        <file>MenuTool.qml</file>
+        <file>BarSeparator.qml</file>
+        <file>BarTool.qml</file>
         <file>Editor.qml</file>
-		<file>image/polyline.png</file>
-		<file>image/rectangle_center.png</file>
+        <file>image/polyline.png</file>
+        <file>image/rectangle_center.png</file>
         <file>image/rectangle_corner.png</file>
         <file>image/circle_corner.png</file>
-		<file>image/circle_radius.png</file>
-		<file>image/circle_center.png</file>
+        <file>image/circle_radius.png</file>
+        <file>image/circle_center.png</file>
         <file>image/clipboard_copy_icon&amp;48.png</file>
         <file>image/clipboard_cut_icon&amp;48.png</file>
         <file>image/clipboard_past_icon&amp;48.png</file>
-		<file>image/rotate_left.png</file>
-		<file>image/rotate_right.png</file>
-		<file>image/folder_open_icon&amp;48.png</file>
+        <file>image/rotate_left.png</file>
+        <file>image/rotate_right.png</file>
+        <file>image/folder_open_icon&amp;48.png</file>
         <file>image/save_icon&amp;48.png</file>
         <file>image/text.png</file>
         <file>image/delete.png</file>
         <file>image/cursor_arrow_icon&amp;48.png</file>
+        <file>ToolTip1.qml</file>
+        <file>ToolTip2.qml</file>
+        <file>TooltipCreator.js</file>
     </qresource>
 </RCC>