{"id":38593,"date":"2021-08-08T17:55:31","date_gmt":"2021-08-08T15:55:31","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/dynamic-ooo-tooltip-extension\/"},"modified":"2023-08-29T22:49:56","modified_gmt":"2023-08-29T20:49:56","slug":"dynamic-ooo-tooltip-extension","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/dynamic-ooo-tooltip-extension\/","title":{"rendered":"Dynamic ooo Tooltip extension"},"content":{"rendered":"\n<p>Add a Tooltip to any widget. Tooltips are a great way to provide additional information about an object without taking up a lot of space. They have become popular in recent years as designers and developers have sought ways to reduce the amount of clutter on their pages.<\/p>\n\n\n\n<p>Tooltips can be used in several cases, such as:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>To reduce the length of a text by a shorter one so that more information is displayed on mouse over.<\/li>\n\n\n\n<li>Provide more information about an element on mouseover.<\/li>\n\n\n\n<li>Help users with additional support content.<\/li>\n\n\n\n<li>Inform users about specific actions.<\/li>\n\n\n\n<li>Display information about the actions performed by the icons or buttons.<\/li>\n<\/ol>\n\n\n\n<p>You can add a tooltip to any widget from the <strong>Advanced<\/strong> tab at <strong> &gt; Tooltip<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"400\" height=\"520\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Elementor Tooltip by Dynamic ooo\" class=\"wp-image-16689\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 400w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-231x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 231w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=80 80w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=160 160w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=320 320w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><\/figure>\n\n\n\n<p>You can enable a Tooltip for any widget and even assign a dynamic text for the Tooltip. The following are the options available for Tooltip:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tooltip:<\/strong> from this switch we can activate or deactivate the Tooltip in a widget.<\/li>\n\n\n\n<li><strong>Arrow<\/strong>: this will show or hide the small arrow in the Tooltip design.<\/li>\n\n\n\n<li><strong>Follow Cursor<\/strong>: you can select a cursor following effect when hovering the mouse pointer over the widget.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"360\" height=\"242\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Elementor Tooltip - Follow cursor\" class=\"wp-image-16693\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 360w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor-300x202.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=72 72w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=144 144w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-follow-cursor.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=216 216w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Max Width<\/strong>: you can easily adjust the width of the balloon. If your text is longer, you can adjust the width to make it on two lines or on one inside the Tooltip.<\/li>\n\n\n\n<li><strong>Touch Devices<\/strong>: you can decide whether to enable or disable tooltips on touch devices. There is also an option that requires you to press and hold the screen to display it.<\/li>\n\n\n\n<li><strong>Background Color<\/strong> &#8211; choose the background color of the Tooltip.<\/li>\n<\/ul>\n\n\n\n<p><strong>Text Color<\/strong> &#8211; choose the text color you want for the Tooltip.<\/p>\n","protected":false},"featured_media":31197,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-38593","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/Elementor-Tooltip-dynamic-ooo.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Add a Tooltip to any widget. Tooltips are a great way to provide additional information about an object without taking up a lot of space. They have become popular in recent years as designers and developers have sought ways to reduce the amount of clutter on their pages. Tooltips can be used in several cases,&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/38593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/31197"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=38593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}