Tool Tips on Focus

tmichael9734
tmichael9734 Community Member Posts: 100 ☆ Roadie ☆
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

Comments

  • raungnaing
    raungnaing Community Member Posts: 35
    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
    tmichael9734 Community Member Posts: 100 ☆ Roadie ☆
    Thank you Robert.  Could you please send me the JS as text here?  I cannot unzip the file.
  • carlfink
    carlfink Community Member Posts: 842 ☆ Superstar ☆
    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
    raungnaing Community Member Posts: 35
    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
    tmichael9734 Community Member Posts: 100 ☆ Roadie ☆
    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
    mspencer-2813 Community Member Posts: 10 ☆ Roadie ☆
    What is the purpose of the Entry Field in the FocusAction file? Does it do anything?
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!