tootl tip css for wordpress

Hi
Require Assistance
tool tip css

.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px 0px;
position:absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -60px;
}

I got the width and padding done but the black arrow of tooltip does not align with the blue i , also is it possible to have the tool tip info above the blue i

Also the tol tip which pulls from details tool tip how can i assign one for each separate page as north island , south and total at the moment it shows same in all tours

  • Nithin
    • Support Wizard

    Hi Sunita,

    Hope you are doing good today. :slight_smile:

    I got the width and padding done but the black arrow of tooltip does not align with the blue i , also is it possible to have the tool tip info above the blue i

    The easiest would be to align it with the blue, if we are moving the info to the top, the tool tip arrow will also have to be changed to reflect this:

    .tooltip .tooltiptext {
        margin-left: -7.7em;
     }

    Please try the above code, it should help align your tooltip box. If the above, doesn't work, please try adding !important in it. Ie: margin-left: -7.7em !important. However the use of !important declaration is not something which I would recommend, but in some cases's it's necessary to apply these rules to overwrite the existing styles.

    Also the tol tip which pulls from details tool tip how can i assign one for each separate page as north island , south and total at the moment it shows same in all tours

    Not sure whether I'm following your question exactly, did you meant that you want different texts in the tooltip for each page? I'm not sure how that tooltip is executed, it seems like the tooltip is part of your theme.

    Could you please mention where the content of the tool tip is added? So, that I could give a closer look. Since, it's a premium theme, I'm not sure how exactly that's handled, would recommend you to get in touch with the themes support in order to solve this faster.

    Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Rupok
    • Support Ninja

    Hi Sunita,

    You you want to hide all blue i icon which shows tooltip from your site? You can do that with the following custom CSS Code:

    #detail-info-tooltip {
      display: none;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Please let us know if you have any further query. We will be glad to help furhter.

    Have a nice day. Cheers!
    Rupok

  • Sunita
    • The Incredible Code Injector

    Hi Rupok

    you had given me this #detail-info-tooltip {
    display: none;
    }

    which worked well but my client :confused : wants to remove the tootip from his tours as shown in the screenshot

    If it is possible or any other tootip plugin I can use removing the earkier one completely

    Regards
    Sunita

  • Nithin
    • Support Wizard

    Hi Sunita,

    Hope you are doing good today. :slight_smile:

    Not sure whether I'm following you, I checked the above CSS, and the CSS will only remove the blue i icon, from the DETAILS tab. The code doesn't remove the blue i icon from the DATES & PRICES from your page, ie the above code seems to work fine, as described in your screenshot. Are you saying you want to implement the same code for blue i from the DETAILS tab, to DATES & PRICES tab?

    Could you please advise what I'm missing?, so that we could guide you better.

    If you are looking for other tool tip plugins, you might check the following plugin, but not sure whether it would fit to your requirements, please test, and see whether it works fine:
    https://wordpress.org/plugins/wordpress-tooltips/
    https://wordpress.org/plugins/simple-tooltips/

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.