Hi I use a lot of tooltips in my website, and I recently want to add a tooltip in the footer, the website has white skin so tooltips in the body are black backround but the footer has black background so I need the tooltip to has a white background, but only the tooltip that is placed in the footer.
I tried to look for a class where I can style separately but I could not find it.
<span data-tooltip aria-haspopup="true" class="has-tip tip-top tip-footer" title="Llámanos al (+57)(7)440342">Preguntas?</span>
This is the tooltip and the generated popup is
<span data-selector="tooltip-i672cwnm0" id="tooltip-i672cwnm0" class="tooltip tip-top" role="tooltip" style="visibility: visible; display: none; width: auto; top: 387.375px; bottom: auto; left: 865px; right: auto;">Llámanos al (+57)(7)440342<span class="nub"></span></span>
I cannot select it by id because the id dinamic so it changes and I also cant select it by .tip-top as I have tip-tops in all the website so it would change all those.
any idea? how to pass a custom class to the popup?
I have just edited the CSS, in my app.css file, using this...
.tooltip{background:#000;color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.opened{border-bottom:dotted 1px #FFF !important;color:#FFF !important}
.tap-to-close{color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.tip-top>.nub{border-color:#FFF transparent transparent transparent}
.tooltip.tip-left>.nub{border-color:transparent transparent transparent #FFF}
.tooltip.tip-right>.nub{border-color:transparent #FFF transparent transparent}
If you have an id or class assigned to your footer try adding that before the code to style the tool-tip just in that section of the site. i.e.
#yourid .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}
or
.yourclass .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}
Play around with these settings to get what you want. The .nub is the triangle. Hope this helps?
Cheers G
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments