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]

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

[Vishal_Jain03]

Ya Actual issue is that only

[Vishal_Jain03]

Hi @PRATHYUSHA_VP 
Adobe team has suggested to go with below approach:

Define the custom-client libs under /apps/project/custom-clientlibs
add the a custom category ex:example.clientlib in the .content.xml

Include the Client Library in Your Page:

• In your page component, include the client library category using: <cq:includeClientLib categories="example.clientlib"/>
• Ensure this is added in the appropriate HTL/Sightly script of your page.
  
  

Where to add " <cq:includeClientLib">?
can you please help?

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

[arunpatidar]

The <cq:includeClientLib> tag is a JSP directive for including client libraries, but since the landing page is an OOTB page (not custom), you’ll need to override the OOTB page to add additional clientlibs.

The OOTB page could also be implemented with JSP.

[Vishal_Jain03]

Thanks for the reply @arunpatidar 
can you please say which path it is
it will be really helpful
Thanks

[EstebanBustamante]

@Vishal_Jain03 

The problem is not the category, in my first response I think I named a category that will allow you to run CSS/JS in the console you need to do the customization, the problem is the CSS and the scope where this is executed, this CSS/JS will be available within an iframe, so you need to look in the upper container to do the customization. Something like this would work: https://stackoverflow.com/questions/935127/how-to-access-parent-iframe-from-javascript 

Hope this helps.

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

[kautuk_sahni]

@Vishal_Jain03 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!