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

[PRATHYUSHA_VP]

It's part of coralui3 categories. Please check for further action

@Vishal_Jain03 

Thanks

[Vishal_Jain03]

Thanks for your reply @PRATHYUSHA_VP 
If I add coralui3 category in custom client-libs under ex: /apps/project/custom-clientlibs.
below code will work fine correct?

#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;
}

 

[PRATHYUSHA_VP]

Yes that should work. Please update if any issue

[Vishal_Jain03]

Hi @PRATHYUSHA_VP 
I have tried by adding coralui3 but its not working in dev environment in local-sdk its working fine

[PRATHYUSHA_VP · Accepted solution]

Probably issue with CSS as you mentioned elements are different in local-sdk and dev environment

[Vishal_Jain03]

Ya Actual issue is that only

[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,

[EstebanBustamante]

Hi,

First of all, it doesn’t make sense to customize a search icon; it should be understandable enough without needing an extra description. Anyways, as Arun suggested, you can check the network tab to see which categories are loading. I think the granite.ui.shell category will work.

Hope this helps!