Level 3

Solved

Add a ToolTip

Forum|Forum|1 year ago
October 10, 2024
1 reply
896 views

Hi Team

I have added a tooltip when I mouseover on the dropdown using the below code

<coral-tooltip placement="left" target=".cq-dam-searchContextDropdown">
This is a tooltip
</coral-tooltip>

Similar tooltip I need to add at the Filter button
please help me solve the requirement

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by EstebanBustamante

Hi,

Unfortunately, the "Filters" button cannot be overlaid because the logic for building the button is located within a granite:InternalArea (specifically, in /libs/granite/ui/components/shell/omnisearch/searchresults/searchresults.jsp). As a result, you cannot simply add another element or HTML there to include a tooltip.

However, you could work around this limitation using CSS, as shown below. While this option may not have the exact same look and feel as the other tooltip, it’s still worth considering. If you need to maintain the appearance of the original tooltip, you could add extra HTML and CSS via a custom JS snippet.

Here’s what I did with only CSS, and it works fine:

#granite-omnisearch-result-rail-toggle {
    position: relative;
    display: inline-block;
    color: blue;
    cursor: pointer;
}

#granite-omnisearch-result-rail-toggle::after {
    content: "This is a tooltip"; /* Tooltip text */
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

#granite-omnisearch-result-rail-toggle:hover::after {
    visibility: visible;
    opacity: 1;
}

Learn more about areas that are not supposed to overlay: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/deploying/upgrading/sustainable-upgrades

Hope this helps

EstebanBustamante

Accepted solution

Community Advisor and Adobe Champion

Hi,

Unfortunately, the "Filters" button cannot be overlaid because the logic for building the button is located within a granite:InternalArea (specifically, in /libs/granite/ui/components/shell/omnisearch/searchresults/searchresults.jsp). As a result, you cannot simply add another element or HTML there to include a tooltip.

However, you could work around this limitation using CSS, as shown below. While this option may not have the exact same look and feel as the other tooltip, it’s still worth considering. If you need to maintain the appearance of the original tooltip, you could add extra HTML and CSS via a custom JS snippet.

Here’s what I did with only CSS, and it works fine:

#granite-omnisearch-result-rail-toggle {
    position: relative;
    display: inline-block;
    color: blue;
    cursor: pointer;
}

#granite-omnisearch-result-rail-toggle::after {
    content: "This is a tooltip"; /* Tooltip text */
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

#granite-omnisearch-result-rail-toggle:hover::after {
    visibility: visible;
    opacity: 1;
}

Learn more about areas that are not supposed to overlay: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/deploying/upgrading/sustainable-upgrades

Hope this helps

Esteban Bustamante

V

Vishal33Author

Level 3

Thank you so much @estebanbustamante for instant response.

V

Vishal33Author

Level 3

Hi @estebanbustamante
we have a similar requirement to add a tool-tip to search button

#custom-search {
    position: relative;
    cursor: pointer;
}
 
#custom-search::after {
    content: "This is a tooltip text"; /* Tooltip text */
    visibility: hidden;
    width: 120px;
    background-color: #747474;
    color: #fff;
    font-size: 15px;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 150%;
    transform: translateX(-50%);
    margin-left: 100px;
    opacity: 0;
    transition: opacity 0.3s;
}
 
#custom-search:hover::after {
    visibility: visible;
    opacity: 1;
}

If i add the above css code in the custom-client-lib file under /apps/example-projects/clientlibs/custom-client-lib then under which clientlib categories it need to be added?
please help us solve the requirement

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded