Tool Tips on Focus

tmichael9734

Hi Everyone,

I wish you're all doing well, safe and healthy!

Is there any way to display the tool tip of a button when it is tabbed by keyboard users?  I was able to show/hide the tip with On MEnter and MExit; but, this method is not accessible.

Thanks for any help,

Therese

raungnaing

Hi,

Lectora has MouseEnter and MouseExit triggers but does not support focus and blur triggers. However, you can write a page level action that will set focus and blur events of the HTML elements and map them to the MouseEnter and MouseExit actions that  you already have. With this, when you tab to the button, focus event will fire and then it will call the MouseEnter action function that you already setup.

Have a look at the sample title and try it out. Especially look at the page action (OnShowRunJS) which does the mapping of focus events to MouseEnter action functions. This approach only works after publishing or when you do Preview in browser. It does not work in Run Mode.

Also, note that button40, button63, etc. in the page action refer to the HTML names of buttons. You can get those by selecting the button, going to Properties tab and hover or click on the small expand arrow in the lower-right corner of the first group of controls.

Hope this fits your needs.

Robert.

 

tmichael9734

Thank you Robert.  Could you please send me the JS as text here?  I cannot unzip the file.

carlfink

I copied this out of Robert's file:

triv$('button',button40.div).get(0).onfocus = button40onOver;
triv$('button',button40.div).get(0).onblur = button40onOut;
triv$('button',button63.div).get(0).onfocus = button63onOver;
triv$('button',button63.div).get(0).onblur = button63onOut;
triv$('button',button143.div).get(0).onfocus = button143onOver;
triv$('button',button143.div).get(0).onblur = button143onOut;

raungnaing

Thanks for replying Carl. I didn't see the response until now.

I can't attach awt file so I'll just copy the contexts of FocusAction.awt here:

<?xml version="1.0" encoding="UTF-8"?>
<lectoratitle lectorafileversion="18.2" lectoraproductversion="18.2.3" lectoraproductname="Lectora Inspire" lectoraproductcode="LD">
<titledata titletype="standard">
<currentid>1970</currentid>
<currtheme></currtheme>
<language>en</language>
<ribbonpasteoption>0</ribbonpasteoption>
<logpixelsx>96</logpixelsx>
<logpixelsy>96</logpixelsy>
</titledata>
<resourcedata />
<variabledata>
<variable id="1071" referenceobjectid="1068">
<name>Entry_0001</name>
<initialvalue></initialvalue>
<lastupdated>0</lastupdated>
<reserved_variable />
<automatic_variable />
<form_variable />
</variable>
</variabledata>
<objectdefaults />
<objectdata>
<title id="1" center="center" respdesign="true">
<name>FocusAction</name>
<lastupdated>1590079193</lastupdated>
<respprops>
<phoneportrait>
<title pubthisview="true" />
</phoneportrait>
<tabletlandscape>
<title pubthisview="true" />
</tabletlandscape>
<phonelandscape>
<title pubthisview="true" />
</phonelandscape>
<tabletportrait>
<title pubthisview="true" />
</tabletportrait>
</respprops>
<bgcolor>FFFFFF</bgcolor>
<textcolor>000000</textcolor>
<linkcolor>0000FF</linkcolor>
<width>1009</width>
<height>662</height>
<font>
<height>12</height>
<facename>Arial</facename>
</font>
<page id="2" parent="1">
<name>Page 1</name>
<lastupdated>1590079315</lastupdated>
<transitionin>
<transtype>-1</transtype>
<delay>0</delay>
<speed>10</speed>
<effect>0</effect>
</transitionin>
<action id="1146" parent="2" on="show">
<name>OnShowRunJS</name>
<lastupdated>1590079701</lastupdated>
<actionitem actiontaken="runjavascript">
<targetstring>triv$(&apos;button&apos;,button40.div).get(0).onfocus = button40onOver; triv$(&apos;button&apos;,button40.div).get(0).onblur = button40onOut; triv$(&apos;button&apos;,button63.div).get(0).onfocus = button63onOver; triv$(&apos;button&apos;,button63.div).get(0).onblur = button63onOut; triv$(&apos;button&apos;,button143.div).get(0).onfocus = button143onOver; triv$(&apos;button&apos;,button143.div).get(0).onblur = button143onOut;</targetstring>
<browserWnd />
</actionitem>
</action>
<text id="186" parent="2" ontop="false" fixed="false" proportional="false" defaulttext="none">
<name>Text Block</name>
<lastupdated>1590079836</lastupdated>
<possize>
<point>
<x>426</x>
<y>161</y>
</point>
<size>
<cx>200</cx>
<cy>80</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<bordereffect>
<borderweight>1</borderweight>
<linestyle>0</linestyle>
<bordercolor>999999</bordercolor>
<outline>0</outline>
</bordereffect>
<html>span.text186Font1 { font-size:16px; font-family:&quot;Arial&quot;, sans-serif; color:#010101;} &lt;p style=&quot;margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;&quot; &gt; &lt;span class=&quot;text186Font1&quot; style=&quot;background-color:transparent&quot; &gt; &amp;nbsp;&lt;/span &gt;&lt;/p &gt; </html>
<rtf>{\rtf1\ansi\deflang1033\ftnbj\uc1\deff1 {\fonttbl{\f0 \froman \fcharset0 Times New Roman;}{\f1 \fswiss Arial;}} {\colortbl\red0\green0\blue0 ;\red255\green255\blue255 ;\red0\green0\blue0 ;} {\stylesheet{\f1\fs24\cf0\cb1\ulc0 Normal;}{\cs1\cf0\cb1\ulc0 Default Paragraph Font;}} {\*\revtbl{Unknown;}} \paperw12240\paperh15840\margl1800\margr1800\margt1440\margb1440\headery720\footery720\deftab360\formshade\aendnotes\aftnnrlc\pgbrdrhead\pgbrdrfoot \sectd\pgwsxn12240\pghsxn15840\marglsxn1800\margrsxn1800\margtsxn1440\margbsxn1440\headery720\footery720\sbkpage\pgncont\pgndec \plain\plain\f1\fs24\ql\par} </rtf>
<raw></raw>
<numoflines>1</numoflines>
<numpubbullets>0</numpubbullets>
<textpublishlang>Inherit</textpublishlang>
<marginsize>0</marginsize>
</text>
<textbutton id="40" parent="2" ontop="true" fixed="false" proportional="false" initdisabled="false">
<name>Button</name>
<lastupdated>1590079302</lastupdated>
<possize>
<point>
<x>160</x>
<y>182</y>
</point>
<size>
<cx>120</cx>
<cy>40</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<autosize>0</autosize>
<type>20100</type>
<linestyle>0</linestyle>
<strokewidth>1</strokewidth>
<strokecolor>0963B1</strokecolor>
<text>Button One</text>
<textcolor>FFFFFF</textcolor>
<fontsize>-16</fontsize>
<fontheight>12</fontheight>
<fontstyle>0</fontstyle>
<textalignment>1</textalignment>
<fontfamily>Lucida Sans Unicode</fontfamily>
<handledata>
<controlpoint value="50" />
</handledata>
<shapefillinfo fillstyle="2" gradientangle="270" bevelheight="0" color="085394">
<gradientstop color="0064BB" value="0.000000" />
<gradientstop color="007CE9" value="0.500000" />
<gradientstop color="1994FE" value="1.000000" />
</shapefillinfo>
<action id="45" parent="40" on="mouseenter">
<name>OnMEnterChange</name>
<lastupdated>1590079273</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<targetstring>Button One</targetstring>
<browserWnd />
</actionitem>
</action>
<action id="1564" parent="40" on="mouseexit">
<name>OnMExitChange</name>
<lastupdated>1590079302</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<browserWnd />
</actionitem>
</action>
<type>20100</type>
</textbutton>
<entryfield id="1068" parent="2" ontop="false" fixed="false" proportional="false" formvar="1071">
<name>Entry_1</name>
<lastupdated>1590079759</lastupdated>
<possize>
<point>
<x>162</x>
<y>482</y>
</point>
<size>
<cx>150</cx>
<cy>24</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<numchars>40</numchars>
<default></default>
<bgcolor>FFFFFF</bgcolor>
</entryfield>
<textbutton id="63" parent="2" ontop="true" fixed="false" proportional="false" initdisabled="false">
<name>Button 2</name>
<lastupdated>1590079755</lastupdated>
<possize>
<point>
<x>160</x>
<y>282</y>
</point>
<size>
<cx>120</cx>
<cy>40</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<autosize>0</autosize>
<type>20100</type>
<linestyle>0</linestyle>
<strokewidth>1</strokewidth>
<strokecolor>0963B1</strokecolor>
<text>Button Two</text>
<textcolor>FFFFFF</textcolor>
<fontsize>-16</fontsize>
<fontheight>12</fontheight>
<fontstyle>0</fontstyle>
<textalignment>1</textalignment>
<fontfamily>Lucida Sans Unicode</fontfamily>
<handledata>
<controlpoint value="50" />
</handledata>
<shapefillinfo fillstyle="2" gradientangle="270" bevelheight="0" color="085394">
<gradientstop color="0064BB" value="0.000000" />
<gradientstop color="007CE9" value="0.500000" />
<gradientstop color="1994FE" value="1.000000" />
</shapefillinfo>
<action id="1586" parent="63" on="mouseenter">
<name>OnMEnterChange</name>
<lastupdated>1590079329</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<targetstring>Button Two</targetstring>
<browserWnd />
</actionitem>
</action>
<action id="1585" parent="63" on="mouseexit">
<name>OnMExitChange</name>
<lastupdated>1590079308</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<browserWnd />
</actionitem>
</action>
<type>20100</type>
</textbutton>
<textbutton id="143" parent="2" ontop="true" fixed="false" proportional="false" initdisabled="false">
<name>Button 3</name>
<lastupdated>1590079752</lastupdated>
<possize>
<point>
<x>160</x>
<y>382</y>
</point>
<size>
<cx>120</cx>
<cy>40</cy>
</size>
</possize>
<cssclasses></cssclasses>
<opacity>100</opacity>
<autosize>0</autosize>
<type>20100</type>
<linestyle>0</linestyle>
<strokewidth>1</strokewidth>
<strokecolor>0963B1</strokecolor>
<text>Button Three</text>
<textcolor>FFFFFF</textcolor>
<fontsize>-16</fontsize>
<fontheight>12</fontheight>
<fontstyle>0</fontstyle>
<textalignment>1</textalignment>
<fontfamily>Lucida Sans Unicode</fontfamily>
<handledata>
<controlpoint value="50" />
</handledata>
<shapefillinfo fillstyle="2" gradientangle="270" bevelheight="0" color="085394">
<gradientstop color="0064BB" value="0.000000" />
<gradientstop color="007CE9" value="0.500000" />
<gradientstop color="1994FE" value="1.000000" />
</shapefillinfo>
<action id="1618" parent="143" on="mouseenter">
<name>OnMEnterChange</name>
<lastupdated>1590079337</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<targetstring>Button Three</targetstring>
<browserWnd />
</actionitem>
</action>
<action id="1617" parent="143" on="mouseexit">
<name>OnMExitChange</name>
<lastupdated>1590079309</lastupdated>
<actionitem actiontaken="changecontents" target="object" targetobject="186">
<browserWnd />
</actionitem>
</action>
<type>20100</type>
</textbutton>
</page>
</title>
</objectdata>
</lectoratitle>

 

tmichael9734

Yessss! It works... Thanks a million Robert and Carl...

The 508 team requested the tips for all tabbed buttons in the header (home, menu, etc.), so I put the OnShow action in the title level, and it worked great on every page.

Many thanks again.  Please take care and stay safe,

Therese

mspencer-2813

What is the purpose of the Entry Field in the FocusAction file? Does it do anything?