--- title: "Tooltip" description: "The Tooltip can be used to display a Tooltip as an Info Icon on a lot of Components, like on Headline, Text, Link, Bullet List, and on most Form Elements and so on." path: https://www.eonshowroom.eon.com/en/content-elements/tooltip.html lastModified: 2025-02-03T09:54:43.023Z --- # Tooltip # Tooltip #### Open Tooltip by Click on Info Icon [Info Icon Key: info-icon-1] [Info Icon Aria Label: Click] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ##### Opening on Click This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-1] [How to Configure](#how-to) ### Description The Tooltip can be used to display a Tooltip as an Info Icon on a Lot of Components, like on [Headline](/content/foundationNG/en/content-elements/headline.html), [Text](/content/foundationNG/en/content-elements/text.html), [Link](/content/foundationNG/en/content-elements/link.html), [Bullet List](/content/foundationNG/en/content-elements/bullet-list.html), and on most [Form Elements](/content/foundationNG/en/specials/form-elements.html) and so on. - Can be open on Click or on Hover - Can have Headline, Abstract, Description, and Link - Also features an Image [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/dialogues-tooltip--interactive) ### Inspirations #### On Hover is also an Option [Info Icon Key: info-icon-2] [Info Icon Aria Label: Hover] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-2] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. [Info Icon Key: info-icon-3] [Info Icon Aria Label: Tooltip with Image] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-3] ![Title](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/abstract_pattern_network_red_blue-1?fmt=webp) ##### Opening on Hover with Image This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-3] ### Usage Rules & Features ##### Features - Tooltip can be attached to a Lot of Componets - Image can be added in Top of Tooltip ##### Properties - For each Tooltip Headline, Abstract, and Link can be optional configured - Tooltip can either be opened on Click or on Hover - Tooltip is configured as Experience Fragment ##### Design - Tooltip Color can be Neutral 300 (default), Neutral 100, or Red 500 ##### In which Grid Columns does it fit? This depends on the Component Tooltip is attached to. If this Component fit, Tootip also fits to it. ##### DO's - Always crop the Image if used ##### DONT's - Do not add to many Tooltips per Page as it should be a short additional User-Info ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tooltip_add%3A2-1?fmt=webp) ### Add Tooltip Inside Experience Fragment Parsys, Editor can add Tooltip Component. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tooltip_content%3A3-4?fmt=webp) ### Define Content Beside choosing if opening the Tooltip on Click or on Hover, Editor can add different Content Parts: - Headline Enter Headline Text. **** - HTML-Tag for SEO Choose an HTML-Tag for SEO of Headline. - Abstract Enter Abstract Text. - Description Enter Description Text. - Link Attributes Enter Link Text and Title, as well as select URL where to link to. Furthermore, it can be choosen to open the Link in a new Window and / or to show an Download Icon. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tooltip_image%3A1-1?fmt=webp) ### Add an optional Image Editor can add an Image in Image Tab by dragging it from the Side Bar as far as those Images are already uploaded. Then, Editor needs to crop the Image. Possible cropping Formats are: - 16:9 (Landscape) - 2:1 (Landscape) - 4:3 (Landscape) - 3:1 (Landscape) - 1:1 (Squared) - 2:3 (Portrait) - 3:4 (Portrait) - 1:2 (Portrait) - 1:3 (Portrait) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/tooltip_style%3A4-3?fmt=webp) ### Choose a Color In Style Tab, Editor can select to adjust Color Scheme and choose a Color Scheme for the Background of the Tooltip, from those Colors: - Neutral300 - Neutral100 - Red500 [Info Icon Key: info-icon-4] [Info Icon Aria Label: Neutral 300 Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-4] ##### Neutral 300 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-4] [Info Icon Key: info-icon-5] [Info Icon Aria Label: Neutral 100 Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-5] ##### Neutral 100 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-5] [Info Icon Key: info-icon-6] [Info Icon Aria Label: Red 500 Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-6] ##### Red 500 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-6] ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/how-to/its-on-us/content-elements/tooltip/tooltip-in%252520-component.jpg/_jcr_content/renditions/cq5dam.web.768.768.jpeg) ### Adding Tooltip to a Component For adding a Tooltip to a Component activate Info Icon and go to Info Icon Tab of that Component. There Aria Label and the Modal ID can be entered. Furthermore, Editor chooses Experience Fragment Path for the Tooltip. This is currently only available for: [Content Header | Brand Evolution](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header.html) [Flexibel Offset Teaser | Brand Evolution](https://www.eonshowroom.eon.com/en/teasers-and-highlights/flexible-offset-teaser.html) [Text Teaser - Offset | Legacy](https://www.eonshowroom.eon.com/en/teasers-and-highlights/text-teaser-offset.html) [Text Teaser](https://www.eonshowroom.eon.com/en/teasers-and-highlights/text-teaser.html) [Card Teaser](https://www.eonshowroom.eon.com/en/teasers-and-highlights/card-teaser.html) [Headline](https://www.eonshowroom.eon.com/en/content-elements/headline.html) [Text](https://www.eonshowroom.eon.com/en/content-elements/text.html) [Link](https://www.eonshowroom.eon.com/en/content-elements/link.html) [Bullet List (per Item)](https://www.eonshowroom.eon.com/en/content-elements/bullet-list.html) [and for a Lot of Form Elements](https://www.eonshowroom.eon.com/en/specials/form-elements.html)