Add a ToolTip

[Vishal_Jain03]

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 

[EstebanBustamante · Accepted solution]

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/upgr... 

Hope this helps

[Vishal_Jain03]

Thank you so much @EstebanBustamante for instant response.

[Vishal_Jain03]

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