Add a ToolTip to Search icon | Community
Skip to main content
V
Vishal33
Level 3
October 26, 2024

Add a ToolTip to Search icon

  • October 26, 2024
  • 5 replies
  • 2285 views

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_

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

5 replies

Dipti_Chauhan
Community Advisor
Dipti_ChauhanCommunity Advisor
Community Advisor
October 28, 2024

Hi

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

Thanks

Dipti

    V
    Vishal33Author
    Level 3
    October 28, 2024

    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
      Community Advisor
      PRATHYUSHA_VPCommunity Advisor
      Community Advisor
      October 28, 2024

      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
        Community Advisor
        PRATHYUSHA_VPCommunity Advisor
        Community Advisor
        October 29, 2024

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

         

        @vishal33 

        Thanks

         

          V
          Vishal33Author
          Level 3
          October 29, 2024

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


           

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            October 28, 2024

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

            Arun Patidar
              EstebanBustamante
              Community Advisor and Adobe Champion
              EstebanBustamanteCommunity Advisor and Adobe Champion
              Community Advisor and Adobe Champion
              October 28, 2024

              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!

              Esteban Bustamante
                kautuk_sahni
                Community Manager
                kautuk_sahniCommunity Manager
                Community Manager
                November 25, 2024

                @vishal33 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!

                Kautuk Sahni
                Terms & ConditionsAccessibility statement

                Loading footer...