Add a ToolTip to Search icon

[Vishal_Jain03]

Hi
we have requirement to add a tooltip to search button icon.

#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.

@EstebanBustamante 
@arunpatidar 
@Harwinder-singh 
@sravs 
@abhishekanand_

[Dipti_Chauhan]

Hi

 Search icon already have a tooltip. You want to change the text or you want to change the styling?

Thanks

Dipti

[Vishal_Jain03]

Hi @Dipti_Chauhan 

Thank you for your reply

Actually, the search implementation is different for local-sdk and cloud-environment
In local-sdk it implemented using coral class and in dev its implemented using react-spectrum.

And In dev environment it does not have a tooltip but in local environment it has.

So can you please help us solve how to add tool tip in dev environment for search icon.

@EstebanBustamante 
@arunpatidar 
@Harwinder-singh 
@sravs 
@abhishekanand_

[PRATHYUSHA_VP]

If you want to change the styling for AEM home screen / search icon, it's part of coralui3.css from foundation granite clientlibs.

It is not recommended to override the coralui3.css instead you can create your custom client libs css files to override the search icon css properties and add those client lib in the page screen

Hope this helps

Thanks

[arunpatidar]

Hi @Vishal_Jain03 
You can check the loaded clientlibs from network tab of browser and use one of the category related to console etc,