<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4395001811813685541&zx=0a47c205-def1-4f54-a0c3-db7de497921b' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=4395001811813685541&zx=0a47c205-def1-4f54-a0c3-db7de497921b' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7224108819422531&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-7224108819422531 -->

</head><body>

Make Tooltips Responsive

Admin

May 21, 2025

Make Tooltips Responsive - Make Tooltips Responsive

Image: uidesign.tips

The classic tooltip is activated once the user hovers over the element...

On desktop, this works perfectly!

However mobile devices don't support the hover effect

To deal with this, add a clickable help icon next to your button. When the mobile user taps on the icon, show the complementary tooltip text.

Like this article? Invite your friends to read :D

Post a Comment

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4WaAqddDKcSibnVFZg_BOq1tsGJQ:1748913862515';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4395001811813685541','//www.rawandev.top/2025/05/make-tooltips-responsive.html','4395001811813685541');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4395001811813685541', 'title': 'rawandev.top', 'url': 'https://www.rawandev.top/2025/05/make-tooltips-responsive.html', 'canonicalUrl': 'https://www.rawandev.top/2025/05/make-tooltips-responsive.html', 'homepageUrl': 'https://www.rawandev.top/', 'searchUrl': 'https://www.rawandev.top/search', 'canonicalHomepageUrl': 'https://www.rawandev.top/', 'blogspotFaviconUrl': 'https://www.rawandev.top/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22rawandev.top - Atom\x22 href\x3d\x22https://www.rawandev.top/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22rawandev.top - RSS\x22 href\x3d\x22https://www.rawandev.top/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22rawandev.top - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4395001811813685541/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22rawandev.top - Atom\x22 href\x3d\x22https://www.rawandev.top/feeds/690684069111507654/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-7224108819422531', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a613144e6ffe5c7e', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '690684069111507654', 'postImageUrl': 'https://storage.googleapis.com/brandflow-bucket/ui-design-tips/fullsize/responsive%20tooltips.jpg', 'pageName': 'Make Tooltips Responsive', 'pageTitle': 'rawandev.top: Make Tooltips Responsive'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Make Tooltips Responsive', 'description': 'Image: uidesign.tips   The classic tooltip is activated once the user hovers over the element...  On desktop, this works perfectly!  However...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sfOLeXWEL3UWzn2MgiEkugAVfYBmRYnpddZtwz6cgd7H0AcZanaL2BoD5svxsFzOfLSqXYPEuQ2-5z5kAN7rrsEGFa2e5Hjt_vLh1SZfYX5QflhAmXsMHmvnjNCoN0wIETWoriLxq_9cgxYJqCaKSNt-VgHnZp6I-lHem5R9o6OSPX5nw', 'url': 'https://www.rawandev.top/2025/05/make-tooltips-responsive.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 690684069111507654}}, {'name': 'widgets', 'data': [{'title': 'Template Code (Do not disable)', 'type': 'HTML', 'sectionId': 'settings', 'id': 'HTML45'}, {'title': 'rawandev.top (Header)', 'type': 'Header', 'sectionId': 'header', 'id': 'Header1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'section', 'id': 'LinkList1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'cta_button', 'id': 'LinkList2'}, {'title': 'Static Page', 'type': 'PageList', 'sectionId': 'footer_widgets', 'id': 'PageList1'}, {'title': 'Social Media', 'type': 'LinkList', 'sectionId': 'footer_widgets', 'id': 'LinkList3'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'footer_widgets', 'id': 'HTML1'}, {'title': '', 'type': 'LinkList', 'sectionId': 'custom_widget_1', 'id': 'LinkList6'}, {'title': '', 'type': 'HTML', 'sectionId': 'billboard_ads', 'id': 'HTML2'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'main', 'id': 'Blog1', 'posts': [{'id': '690684069111507654', 'title': 'Make Tooltips Responsive', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sfOLeXWEL3UWzn2MgiEkugAVfYBmRYnpddZtwz6cgd7H0AcZanaL2BoD5svxsFzOfLSqXYPEuQ2-5z5kAN7rrsEGFa2e5Hjt_vLh1SZfYX5QflhAmXsMHmvnjNCoN0wIETWoriLxq_9cgxYJqCaKSNt-VgHnZp6I-lHem5R9o6OSPX5nw', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}, {'name': 'comments', 'label': 'Post a Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': 'Oleh'}, {'name': 'timestamp', 'label': 'pada tanggal'}, {'name': 'comments', 'label': 'Post a Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': ''}]}, {'title': 'Advertisement', 'type': 'HTML', 'sectionId': 'top_ads', 'id': 'HTML90'}, {'title': 'Advertisement', 'type': 'HTML', 'sectionId': 'bottom_ads', 'id': 'HTML94'}, {'title': 'Advertisement', 'type': 'HTML', 'sectionId': 'matched_content_ads', 'id': 'HTML75'}, {'title': '', 'type': 'LinkList', 'sectionId': 'custom_widget_2', 'id': 'LinkList5'}, {'title': 'Categories', 'type': 'Label', 'sectionId': 'sidebar', 'id': 'Label1'}, {'title': 'Trends for you', 'type': 'PopularPosts', 'sectionId': 'sidebar', 'id': 'PopularPosts1', 'posts': [{'title': 'How to Apply the Brand Color', 'id': 7372777770210873997}, {'title': 'Testimonials In Signup Forms', 'id': 3554453254351334319}, {'title': 'User Hate Surprises', 'id': 3784122555377951738}, {'title': 'Social Login', 'id': 8719518350662877967}, {'title': 'Preview Product\x27s Value near the CTA', 'id': 4238972292613784141}, {'title': 'Upgrade The Login Screen', 'id': 4747945195806347863}, {'title': 'Inform Users Beforehand', 'id': 223126578656697145}, {'title': 'Prompt User to Scroll', 'id': 7650444305975272289}, {'title': 'Use Real Mockups', 'id': 8509610511267138599}, {'title': 'Prioritize UX', 'id': 2746680487393877261}]}, {'title': 'Recent Posts', 'type': 'HTML', 'sectionId': 'sidebar', 'id': 'HTML3'}, {'title': '', 'type': 'HTML', 'sectionId': 'sticky_sidebar', 'id': 'HTML4'}]}]);
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML45', 'settings', document.getElementById('HTML45'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'section', document.getElementById('LinkList1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'cta_button', document.getElementById('LinkList2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'footer_widgets', document.getElementById('PageList1'), {'title': 'Static Page', 'links': [{'isCurrentPage': false, 'href': '#', 'title': 'About'}, {'isCurrentPage': false, 'href': '#', 'title': 'Terms'}, {'isCurrentPage': false, 'href': '#', 'title': 'Privacy'}, {'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList3', 'footer_widgets', document.getElementById('LinkList3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer_widgets', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList6', 'custom_widget_1', document.getElementById('LinkList6'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'billboard_ads', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML90', 'top_ads', document.getElementById('HTML90'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML94', 'bottom_ads', document.getElementById('HTML94'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML75', 'matched_content_ads', document.getElementById('HTML75'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList5', 'custom_widget_2', document.getElementById('LinkList5'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'sidebar', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML4', 'sticky_sidebar', document.getElementById('HTML4'), {}, 'displayModeFull'));
</script>
</body>