diff --git a/source/components/assistance/tooltip.rst b/source/components/assistance/tooltip.rst
--- a/source/components/assistance/tooltip.rst
+++ b/source/components/assistance/tooltip.rst
@@ -1,6 +1,12 @@
 Tooltip
 =======
 
+.. raw:: html
+
+    <video src="https://cdn.kde.org/hig/video/20180620-1/Tooltip1.webm" 
+    loop="true" playsinline="true" controls="true" onended="this.play()" 
+    class="border"></video>
+    
 Purpose
 -------
 
diff --git a/source/components/editing/lineedit.rst b/source/components/editing/lineedit.rst
--- a/source/components/editing/lineedit.rst
+++ b/source/components/editing/lineedit.rst
@@ -1,11 +1,13 @@
 Line edit
 =========
 
-.. figure:: /img/Lineedit1.png
-   :alt:  Lineedit
-   :figclass: border
+.. raw:: html
+
+   <video src="https://cdn.kde.org/hig/video/20180620-1/Lineedit1.webm" 
+   loop="true" playsinline="true" controls="true" onended="this.play()" 
+   class="border"></video>
    
-   Single line control to enter unconstrained text.
+Single line control to enter unconstrained text.
 
 
 Purpose
diff --git a/source/components/editing/textedit.rst b/source/components/editing/textedit.rst
--- a/source/components/editing/textedit.rst
+++ b/source/components/editing/textedit.rst
@@ -1,11 +1,13 @@
 Text edit
 =========
 
-.. figure:: /img/Textedit1.png
-   :alt:  Textedit
-   :figclass: border
-   
-   Control to enter multiple lines of text.
+.. raw:: html
+
+    <video src="https://cdn.kde.org/hig/video/20180620-1/Textedit1.webm" 
+    loop="true" playsinline="true" controls="true" onended="this.play()" 
+    class="border"></video>
+
+Control to enter multiple lines of text.
 
 
 Purpose
diff --git a/source/components/navigation/contextmenu.rst b/source/components/navigation/contextmenu.rst
--- a/source/components/navigation/contextmenu.rst
+++ b/source/components/navigation/contextmenu.rst
@@ -1,6 +1,11 @@
 Context menu
 ============
 
+   .. figure:: /img/Contextmenu1.png
+      :alt: Show a context menu for a lineedit.
+      
+      Show a context menu for a lineedit
+
 Purpose
 -------
 
diff --git a/source/img/Contextmenu1.png b/source/img/Contextmenu1.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a6938b7ad53c72f63cf0fff4863e2c6f2d01a1a
GIT binary patch
literal 5387
zc%1E5XHZk^x<yezR6vm4q)6{AQiafa?+DU+=ruGUG-+~_ULztkAe~5;BE1*sQbK3}
zgisUU<U9ZF%>8rE@B7TWd+nJ$^UkyPe%G_sO3>9-c}7G_golUsOifi$ABV^PEW-P^
zYb_wW4+oFERLy+x@Q8c=S@+U;i0Sa~UbL$z${Pmdp;lZh$>)Fm`uizHi-?T!-t#gI
zo)T9#3SIGg@-QOK!`4O+XFLy!`BKIFLs-+Eze~+>#jJS)x2sV@b-O=|F37vwSl9Tm
zkQF(h;GndCGBV*F&r7!T<GYRl4z^ET>{kx-j_k#e4rce|o<N}lc)FRSqPh>|@s0i)
zP_o=tF*Y<@{^74-rmr7Y{Jwv1YU)IWgoK>@6Ci?H9@c4)RZwuabKvgjhS`peRMzHB
zr<4s}hK6AP5fzIyKAalrx*{`=!C-KSz8Qy3jK6acQPiV~m;V!X%!futJ@&6U%wgha
zxj(NO*9^*-N=izWn(jUZU|WDt(gX-4rPfajnnuhAV(NatN)Ro$_o~5=n?X3V#T=%6
zd$?q$Ld+!Lx6?YBdvbEZuB2i&NoZ6tT(lJN`|liTY58m)0J^-qehw6+9W`;Adl2Jy
z@%L<>ZsBOEWEeskYhzqxxl2X5v$@}VoG4((O~Gt`)N%8KGQ7ioNnD_iA9trsn4O#T
zI()e$ja4NS9;8-y9N&?4(_z^b6uu#y(0l#|s<13@9elJpQ6SSE`Xh<q!UY7XHit1v
zhW0L=?Zd%TyjW>*kmLm&azu-e_}Tsj@=fSgnM$e;Au}8f?}pmEIrvROO@ES>8MuLc
zxJyH$hfff;g;<H`>S_%<@|ni<th3P0A^5ttwbC>6r*sSuDza%bmePcciYl+2mJG)D
zot&E$d{!hZFDo;>Ih$v;k&(ps(MTOmcix6{Y0=QrHhD(49(AlUNP&~-WwsAjS`BP%
zr7(Vv4;e$Yb|xi5>&yD)=HREu?9BH0>ahON+~u=3)t0+ks2;%)xGxevDhlBv(Ia?q
zw3az&|Foy-+V!lfTfts<q26gcHklgku0+-&$klog<i9KFrrl=9ZN&K^J3D(l?S?v5
zO*OC6epf%%Mi{i3l=Q)tdb@Y<Q~l;9O{@fF$uqw#473I}u(IlKSJJ<`hffoGwcj0`
zlHU$mZt=cGXIJ0e(=Y!_H<j>-gMvuO%xq!ix69whr_`~7V`HEj(9*c<-Is<2w4U~u
ziq$GJ)P{u7K0Py&gWpsTgnfW=QCC;Tb@>O{LmAriv9rCZ>cFVJm`|A7b!-_foUM7j
zr4|q%-XmxYGZT3?@h9phFkQXT<<#-63q%wXWs?<I^r!57bc@Nmo#W>PD5*RNaE47*
z80I2y=koc*ewp7P_R74p47O?_LC=uORUm^2KC&v&-#t78d3b0ME@b|Q*ns?<o13Gg
zq*RD|DiMx-4XD+9Y5K#yHaR&N4!@e+pKlG=1rox2&eS^xRDto9{LKvwY!Jc+_ha?Q
zf#)b46cx?nH-9&%?&V<CB<^g)#KeHAs~`XM-5}rQGi~u&cynuGXV)VW+}tJS>+74Q
z`hxmT;iuf5RIi_<o0^)MdHH#Z&EQUxnu6+TJ_yjp`Qp&b%nU0^&XEKV6Kia0N-2=$
zLiITZ*W@s08yn9>+~sCxeSGJED+k2J29Quq#>?yEtJ--$fNkyNwD+bcFZlMS66o4S
zA<m~pF0!)|2|l{Ix+Vku1S+Jfml$%x>H)F(XJ@4p5u}B!t(a7)K=;MA;GS=zdN-KS
z_(Tygu`q0l^D6eCZCX6(mpNxmEiHJ$+Z9VCmgj+Qp}L|Ti=Rn1rj`+_?HERnrEd&U
z)!at4yx^@Jy+aTFP|Ki=twDvj@O4I88=JrAT>}-BU*TzKZXISzBi-F=<C(3MWo0{s
zbN~lO$2wk~%;EgJyi2I$>(|l|e7)=e0>sT^iG37Ldvxr0(!5Oa=ouV@v&U$$m5#`(
znhbT=YRK@=kUFM6D(b!y5@|<D_+U(1yRT1w<!@HJhjmh%RKvd}X~_)B`J*Wl`*Ns`
z{PZU81T+>KK<(UIYTW7lnu$wjRP(g0?ZLr;akc3fUu5Is2lsD(d@7zU8O|hRJ|)}c
zH*d3FI!Cd_lDHinNIMVczOh~#i1z}<N4MW(=@oB$>)Vqa@7Kz;XmsVu9FACR4U{u{
z!OX@iG`Rr3I)|<0W@n?+)vgekJ=k90`u<%ucPRGv=xjRa2`9(=*j&cljJK7T)c8?j
zBlw#xXS(`fAyrCydl-&kDoafe(hP^wlhgeCeCs3?UBs!J{|tg#WjKRx+`3KmpZRgg
zh2S{sZ^L2_4%~t9iYzXZUt%f@l?Z7jI`05(^N8(jGT@ev#04@lrK>A)+G%XazHSa?
z?r{_7GgQsQ%F4p7P2I_XD5aU+Y#}PXzF15Dmk;XNKf}R@do~&E2UHDF?muUc$`E*)
z(-3;~A-%GWNtO+wTGEGFy$}@<;V~)?mk4b+slkAA#XXG64T)lGd-{{xL(XR4%|i?D
zpubZ{>(IeE_ex{FwXlo)uj!RIiW_pzwqq{faqhS07NDDO4WGIgINSs|CdNQvXq+h@
zA^zs?pKgWqo9k3sDREBD_*OmsOr3;;v%hCg_885r^kiK&9spI{M+})fkD#o|;lIm$
z@7_mOTeh2DEmXm(9JN#FghJ4R2Bq+52M6JWj+^p_F)>)t@Q#kt?S6qvcbi{hR=7Ei
z8-SlPGR9I0b4i)jmKPR^J(hI(Q?kk5n81w3v&DF>FtD_n;xDC|D5~dr#aF^YLN4=%
zH{Y$8;?56dziI88i8$_P>LL!dwh?bz{M3pkNrB>37Ma$%f2e+s0$zGWxN<YIIqtpi
z^sE`U)w^AZ;<x&NUD?)><l)wpYP{<ox_Uy@*50-kAevs{WRLxBhaAlX(8LNg3*Hqe
z#AQ#HYFJfG?#Y8dAXU@UktDzT*{5X|nf%t_vyv9c)R@~QV$>1`pS9zTo?Nue44CMi
z>(KAaiATtd4Ihrv&RE8Wh9(|S+s3VM1`&T5#xjA$TtzP9m7>NaMD+G8WFAhHbg$4e
zoxy-UurX>Ij4)s~CwRZ3iT{X$RC+C_@9pGRW^1)CtCkg0LqJ_<H}9~ysi|~0_V?VJ
zap}o5Jzv|SOs<G>EhpMymUQ)8Q5Ss<owIAygygWDRdDbXY^gb2{nc>YvSQf+HDSe&
z8RpT6&qcpnP3isVUDM)8uS_h(E!h*7o+)Az&KIuMu6L#g+gw_)-$T&+qhgg*M%mD>
z`sFR1PZ|Zfzqb@yUTWaRB>-T8E2wVSq;t!+XEOaE=$s;+8W(3#+D7yI^mNqi`O+eR
zO_Vn`C+EP>kn3uj1hXRNi#>Pu5`n|LL#{2i?I_$CErZK@`S|FU8@e{;SZjO*=YKbs
zcM~Xp7u5z#Mjm_8Fp2hQb;>&D!{~FU_9EPM0hi61PCb>-Uq%A1-yz%9RJ>3+O4KXS
zGdBh?(>Qi>2LtSfiBdfe6WBrlFgYWHk$Q&amTxmKfjp$XdVwisaSv>-YeGA_WKusG
zV2W^#Z!nSAsm`9+2-*RJ>VZ}|+8u^7=yrG2OX|$(9TgstFpB%_RI-n?`49K@Zsm)6
zxL&kIPE$*6&+_g7u%E5lL&U`SLA}T8B2FV8RoO@wr7tnQw(e^kGB01^$#+7P>)f|@
z&ZJ^^OklL66k@L=e*~Xy<0P%1pn#E)5%Mt-v?A=evhi)O&7X&p4MJLXy<ekKC{Z6W
znsYobK+d7P<C{0(wR<ELqhF352VYPMm>Z7nI%yZ;HjoXPC|YHTu&lwy&)M;Oe51(E
z0eLMcxrYJ(S-*A`dE|({g1n%hXm|Xf{JntSOeI2I>h<duINT`MN&;0c?OG_5(WF2J
zz1=-a{rNj9EC0=H%PR>9001YW==GjB2?+@ZX<*>Ra0FKVKjSTUO*TA)jxJX!@Q^gr
zAFo2IMxKD+VOXONqA!suE|s2!jFy(14t#eT1{}yUt53PR-v4OR!>(0uFyF`%F?01>
z$Sxc+9svZSRiy$n3pXLL`(kTc_GTGUx|LtP0Aa?ycdw$<ORjG&e8YNr&cxM&$m56^
z(Wj?k0032DpQEEAOWHthFYXk5Q2f%5Nv4Q=bnm}3>Hh%wrf`0KXE^{*tYp5(Ed(SL
znIrtccZq_Eies#Bt=OdI<HUrLMg~p>K-ai`(a>OrPe4LU^f>!<u#d5E1`v8o@^ov=
zLyl07JH6xfw%K!S4rv)FG;KYx3`en4TvuPV^(wl#?JE!v(`#ylop;{xnb$!&-R5;#
zJC@q6g3NQ`;#5L`z)$R2A?Tg7kmHwuM+xK{%PY$*IuG%LVttnoNThXZxQsY^|IEzH
z)ReF|`}Rz^0nS~u22OOnCrjw<?PUv@`dWpngM;^adMc^(Tmk|d5PDf3HWn73XFXp3
z_%X7HhnF{WAJ)vv#|LM^NxCR)vL%1SEoTCx73TwN92{PytINp9ytTB{&X>GtDdUu3
z#YeI~^oV`ajMKV&AoLH_;MLU?5c(a*h~-o)fn2$vY}oZoclUczG71X+%bm2%U#S=j
z2H>%1Xzh#lEOLF^1G%?%-A%w$WzpGz>+b8<twK6+^xnes%*<!7>d@gzUtb?>vg6A2
zna5&-cc3pT1ou!xMC5c}vN-KEn7nO-bIc>N!M1O@R0n)^DD!UOC0zoW&7tKjvkVxW
z^@3qVhW9|;*m&v$vFs@O<VoToGc#_>x2*xQ$jk1_UGT3DHUFux<R-Gg6Nll7yw#o_
zJ9L>|x~B<udKd=X?dU!MJt}gms_<2_Y7an-EYyPoj^^&Xx&~;%CIrAITZ12=3R<Hh
zlwns6A_N2qBm_w*dIVvDVn#^H1VtZSzR{P_?;qXUFOs8p@XSzt;{O8ej3hD+do#G4
zzzi|9u;|2$Nli{pqLvyfZ+j3v!66|b@7}#@e@03x9VP%R{nhvOhnJ0xx;o|@Rod5=
zo}O-WSKC?e+I#z8;hK(4w@Yx%w6?aEM#gm}V`~fNKQcT!+x?fCX7CAKj2D=hS&ZjM
zOgFokBrDh3Z1%INq*fSmgTa`~h5C}Ijc0TK;ita4CkWgZoZj5{keK+7s-YIed`0SU
zsg0OPeB|ZnedRtp`FdUpOUpJpq_&ER$~+|>Av1%dA0Y`zbGmA{x|&(q=g&Vp*BagC
zr&1U+78-|fnRmTdMO<7wU(#&l=Cs<9|IWSp{$cP2IoV>92Uwa9R#f!vpvBv>wbkTS
zRzg(#+6r;$h%)btjC@|Kj6fhgm%q#NQj!BD!!MyQMIhndi__uZVOGd%Q8%17(<h<l
z<l^%7^>1vdn+h(-%gaNf(K~9N6j{;|6E(cNj&Y6yEiLd4f^LVT<ce!Kt;oTQBRc)}
zaY>CP)`mLP!3-FmTe+VRal<1a5v<|k6SUT0@TK_5m&==xisCu&(No&qn*l>Zziu_B
zF6xf6b`Q+?r&4X0MeCd~3obxy(|OF+A^z2uh%038uR9Fph(jxnla%mMWnpO{LGcTY
z_B#;b<h=D}g<*T)KmfoZ0phTLFQARJ)YUyco@D*UB6@p!>y;ZqNO4mY6LHfgn510n
z?dyArMq^#iTubzEX3Z)*TweY?vlD(&^m;U-xVve1c=$}$`@$5awQpK<JUl$W0USr1
z#tU$asL}}v3Rddlu=_;@47oVuqf7*&58ytt+`xf~uV0;rl-A<oLEYUVPNUqsyrKt5
zkwT>3jq=?Rf7Ml)!{(etDJUph8-G+)CD~A?tDj+xkk=a{h0l7S(F8Zx(9zM+KHFMc
zGF4^6xv%F$F)V4SV7?UMSZg5u3^eB<--Nynew5^V*=i%L0F-WALm^rDEW-%kjM9PY
za=NqC5HnmhR|$Q73oCkPRDP5u|JKFOb8SC*+o=Fkbh;P(PS>enO$-${{k^z?L(CNM
zQb2Ye2%Q)i;pN~cl_hxO&&t8^Yh)zJ8u1eSZKQmz+OxwBsyk3urOM{x@8Nwk{>IbM
z-b=;0Y}PfyL5y~E&2u*Py1$0scPR_kHyjSn&8<{ro3c_hSVr#$R(X~9w5*IRYg5MB
zTxx)jPgFb=;)X6=m2hvxhKo7aSIr_yyp+>#1D<6}ESDCN{yehTkiDQyRt7&#j%k28
zdq!`p($<=e@Rj<re5<ju@=tA=ew@=f<1A{qeE&V3JY8PE#LvvXmGpk|npSiT=Ob=_
z(YNbS+XnsDu|j{MtMmNreg~OEZ$hu)uRH><b=j?3pkHK*x_(WHyY_s}^x)o#R^m}>
zq`03~4Y7q<dop=N<<JUevdzLsdADT4`5Cu?@<hKJSOR7scqaB~9@MmXJnbA;NiO6n
z&KQ*$NMPK-hCZ|^H=fu+Sn;SN<s@q%y!>yI#k#W4Uw+8DDRex0-uK+CQfmTF`3b@3
hz5iN9{~!K$xFzwO(%Ui*2dLuVN=->yu^RX;>fcA7KluOv

literal 0
Hc$@<O00001

diff --git a/source/qml/components/textedit/Textedit1.qml b/source/qml/components/contextmenu/Contextmenu1.qml
copy from source/qml/components/textedit/Textedit1.qml
copy to source/qml/components/contextmenu/Contextmenu1.qml
--- a/source/qml/components/textedit/Textedit1.qml
+++ b/source/qml/components/contextmenu/Contextmenu1.qml
@@ -23,17 +23,41 @@
 
 Rectangle {
     width: 240
-    height: 180
+    height: 240
 
-    Item {
+    TextField {
         x: Kirigami.Units.gridUnit
         y: Kirigami.Units.gridUnit
+        id: textfield
+        text: "user@example.com"
+        focus: true;
 
-        TextEdit {
-            width: 200
-            focus: true;
-            wrapMode: TextEdit.WordWrap
-            text: "The text edit control displays multiple lines of text to the user and allow the user to enter unconstrained text..."
+        Menu {
+            y: textfield.height
+            x: 0
+            id: contextMenu
+            MenuItem { text: "Cut" }
+            MenuItem { text: "Copy" }
+            MenuItem { text: "Paste" }
         }
     }
+
+
+    Timer {
+        interval: 1000
+        repeat: false
+        running: true
+        onTriggered: {
+            contextMenu.open()
+        }
+    }
+    Timer {
+        interval: 2000
+        repeat: false
+        running: true
+        onTriggered: {
+            qmlControler.start()
+        }
+    }
+
 }
diff --git a/source/qml/components/contextmenu/config.json b/source/qml/components/contextmenu/config.json
new file mode 100644
--- /dev/null
+++ b/source/qml/components/contextmenu/config.json
@@ -0,0 +1,6 @@
+{
+    "Contextmenu1.qml": {
+        "type": "png",
+        "autostart": 0
+    }
+}
diff --git a/source/qml/components/lineedit/Lineedit1.qml b/source/qml/components/lineedit/Lineedit1.qml
--- a/source/qml/components/lineedit/Lineedit1.qml
+++ b/source/qml/components/lineedit/Lineedit1.qml
@@ -30,8 +30,32 @@
         y: Kirigami.Units.gridUnit
 
         TextField {
+            id: textfield
             placeholderText: "user@example.com"
             focus: true;
         }
     }
+
+    Timer {
+        interval: 1000
+        repeat: false
+        running: true
+        onTriggered: {
+            timer.start();
+        }
+    }
+            
+    Timer {
+        property int n: 0;
+        property string text: "user@example.com"
+        id: timer
+        interval: 50
+        repeat: n <= text.length
+        running: false
+        onTriggered: {
+            n++;
+            textfield.text = text.substring(0, n);
+            textfield.cursorPosition = n;
+        }
+    }
 }
diff --git a/source/qml/components/lineedit/config.json b/source/qml/components/lineedit/config.json
new file mode 100644
--- /dev/null
+++ b/source/qml/components/lineedit/config.json
@@ -0,0 +1,6 @@
+{
+    "Lineedit1.qml": {
+        "type": "webm",
+        "duration": 5
+    }
+}
diff --git a/source/qml/components/textedit/Textedit1.qml b/source/qml/components/textedit/Textedit1.qml
--- a/source/qml/components/textedit/Textedit1.qml
+++ b/source/qml/components/textedit/Textedit1.qml
@@ -30,10 +30,34 @@
         y: Kirigami.Units.gridUnit
 
         TextEdit {
+            id: textedit
             width: 200
             focus: true;
             wrapMode: TextEdit.WordWrap
-            text: "The text edit control displays multiple lines of text to the user and allow the user to enter unconstrained text..."
+            text: ""
+
+        }
+    }
+    Timer {
+        interval: 1000
+        repeat: false
+        running: true
+        onTriggered: {
+            timer.start();
         }
     }
+    Timer {
+        property int n: 0;
+        property string text: "The text edit control displays multiple lines of text and allows the user to enter unconstrained text..."
+        id: timer
+        interval: 50
+        repeat: n <= text.length
+        running: true
+        onTriggered: {
+            n++;
+            textedit.text = text.substring(0, n);
+            textedit.cursorPosition = n;
+        }
+    }
+
 }
diff --git a/source/qml/components/textedit/config.json b/source/qml/components/textedit/config.json
new file mode 100644
--- /dev/null
+++ b/source/qml/components/textedit/config.json
@@ -0,0 +1,6 @@
+{
+    "Textedit1.qml": {
+        "type": "webm",
+        "duration": 8
+    }
+}
diff --git a/source/qml/components/textedit/Textedit1.qml b/source/qml/components/tooltip/Tooltip1.qml
copy from source/qml/components/textedit/Textedit1.qml
copy to source/qml/components/tooltip/Tooltip1.qml
--- a/source/qml/components/textedit/Textedit1.qml
+++ b/source/qml/components/tooltip/Tooltip1.qml
@@ -20,20 +20,31 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.2
 import org.kde.kirigami 2.4 as Kirigami
+import "../../lib/annotate.js" as HIG
 
 Rectangle {
-    width: 240
-    height: 180
+    width: 120
+    height: 80
+    id: root
 
     Item {
         x: Kirigami.Units.gridUnit
         y: Kirigami.Units.gridUnit
 
-        TextEdit {
-            width: 200
-            focus: true;
-            wrapMode: TextEdit.WordWrap
-            text: "The text edit control displays multiple lines of text to the user and allow the user to enter unconstrained text..."
+        SpinBox {
+            //focus: true;
+            ToolTip.visible: hovered
+            ToolTip.text: "This is a tooltip"
+        }
+    }
+
+    Timer {
+        interval: 1000
+        repeat: false
+        running: true
+        onTriggered: {
+            var a = new HIG.An(root);
+            a.find("qquickspinbox").hover();
         }
     }
 }
diff --git a/source/qml/components/tooltip/config.json b/source/qml/components/tooltip/config.json
new file mode 100644
--- /dev/null
+++ b/source/qml/components/tooltip/config.json
@@ -0,0 +1,6 @@
+{
+    "Tooltip1.qml": {
+        "type": "webm",
+        "duration": 5
+    }
+}
diff --git a/source/qml/lib/Mouse.qml b/source/qml/lib/Mouse.qml
--- a/source/qml/lib/Mouse.qml
+++ b/source/qml/lib/Mouse.qml
@@ -18,21 +18,23 @@
  */
 
 import QtQuick 2.2
+import QtTest 1.2
 import org.kde.kirigami 2.4 as Kirigami
 
 // Drawing a brace between to obejcts to show the distance between them
 Item {
     id: canvas
     anchors.fill: parent;
     property int px
     property int py
+    z: 2
 
     Rectangle {
         id: ind
         x: cursor.x - width / 2
         y: cursor.y - width / 2 + 5
-        z: 1
-        width: Kirigami.Units.iconSizes.small
+        z: 2
+        width: Kirigami.Units.iconSizes.medium
         height: width
         color: "#9911d116"
         radius: width / 2
@@ -45,38 +47,38 @@
 
             onStopped: {
                 ind.visible = false;
-                if (qmlControler) {
-                    qmlControler.click(px, py);
-                }
-                else {
-                   console.error("Can't find qmlControler.");
-                }
-
+                event.mouseClick(canvas.parent, px, py, Qt.LeftButton, Qt.NoModifier, 0)
             }
         }
     }
 
+    TestEvent {
+        id: event
+    }
+
+
     Image {
         id: cursor
         source: "../../img/left_ptr.png"
         visible: false
-        width: Kirigami.Units.iconSizes.smallMedium
-        height: Kirigami.Units.iconSizes.smallMedium
-        z: 2
+        width: Kirigami.Units.iconSizes.medium
+        height: Kirigami.Units.iconSizes.medium
+        z: 3
 
-        NumberAnimation on x {
-            id: xAnim
-            duration: 1000
-            running: false
-        }
-        NumberAnimation on y {
-            id: yAnim
+        ParallelAnimation {
             running: false
-            duration: 1000
-            onStopped: {
-                ind.visible = true;
-                indAnim.to = Kirigami.Units.iconSizes.smallMedium;
-                indAnim.start();
+            id: cursorAnimation
+            NumberAnimation {
+                id: cursorAnimationX
+                target: cursor
+                property: "x"
+                duration: 1000
+            }
+            NumberAnimation {
+                id: cursorAnimationY
+                target: cursor
+                property: "y"
+                duration: 1000
             }
         }
     }
@@ -88,21 +90,28 @@
         cursor.y = py + 60;
         cursor.visible = true;
 
-        xAnim.to = px;
-        xAnim.start();
-        yAnim.to = py;
-        yAnim.start();
+        cursorAnimation.onStopped.connect(function() {
+            ind.visible = true;
+            indAnim.to = Kirigami.Units.iconSizes.smallMedium;
+            indAnim.start();
+        });
+
+        cursorAnimationX.to = px;
+        cursorAnimationY.to = py;
+        cursorAnimation.start();
     }
 
     function hover() {
-        cursor.x = px;
-        cursor.y = py;
+        cursor.x = px - 60;
+        cursor.y = py + 60;
         cursor.visible = true;
-        if (qmlControler) {
-            qmlControler.hover(px, py);
-        }
-        else {
-           console.error("Can't find qmlControler.");
-        }
+
+        cursorAnimation.onStopped.connect(function() {
+            event.mouseMove(canvas.parent, px, py, 0, Qt.NoButton);
+        });
+
+        cursorAnimationX.to = px;
+        cursorAnimationY.to = py;
+        cursorAnimation.start();
     }
 }