开发者

Tooltip in Android not working

开发者 https://www.devze.com 2023-04-11 06:57 出处:网络
Sample line from my JSP is given开发者_开发百科 below: <td> <img id=\"my_info\" src=\"<%=image_path%>/myimage.png\" title=\"<s:property value=\"getText(\'MY_TOOLTIP\')\" escape=\"fa

Sample line from my JSP is given开发者_开发百科 below:

<td>
  <img id="my_info" src="<%=image_path%>/myimage.png" title="<s:property value="getText('MY_TOOLTIP')" escape="false" />" style="margin: 0 0 -5px 10px">
</td>

The above title attribute shows tooltip without any issues in Windows platform on IE & Firefox browser. However, when I try it in Android platform on Samsung Galaxy tablet 10.1, it does not show the tooltip...Basically, the image appears & when I click on it, it does not do anything...

How can I make this tooltip work in Android tablet?

Thanks!


Since you can't technically hover over a link without a mouse, the tablet will not show tooltips. You can, however, check user agent with JavaScript, and change your tooltip's behavior so that on Android it is shown on click rather than on hover.

Edit: here's an example (using jQuery, so if you don't have it already, add it). First, the HTML part (note then you should also style the tooltip div):

<td>
    <img id="my_info" src="<%=image_path%>/myimage.png" title="<s:property value="getText('MY_TOOLTIP')" escape="false" />" style="margin: 0 0 -5px 10px">
    <div id="tooltip" style="display:none;">Your tooltip text goes here!</div>
</td>

Then JavaScript:

jQuery('#my_info').click(function() {
    if ((navigator.userAgent.match(/Android/i)) {
        jQuery('#tooltip').toggle();
    }
}

When you click on the image, it shows the hidden div if the user agent is Android. Hope that made it clearer.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号