CODEWITHSUNDEEP
csstooltipzurb-foundation
svelandiag
svelandiag

Reputation: 4320

style specific tooltip popup in foundation

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?

Upvotes: 2

Views: 3105

Answers (2)

Jeff Mattson
Jeff Mattson

Reputation: 393

This has changed for Foundation 6.6.3. After spending some time trying to get this, because the tool tip doesn't stay visible. I was able to get to style the triangle(nub) with this:

.tooltip.top:before {
  border-color: $yourColor transparent transparent;
}
.tooltip.bottom:before {
  border-color: transparent transparent $yourColor;
}
.tooltip.right:before {
  border-color: transparent $yourColor transparent;
}
.tooltip.left:before {
  border-color: transparent transparent transparent $yourColor;
}

I was using sass with some variables so mine looked like this:

.tooltip {
  background: $tooltip-background !important;
  width: auto !important;
  max-width: 80vw !important;
  &.top:before {
    border-color: $tooltip-background transparent transparent !important;
  }
  &.bottom:before {
    border-color: transparent transparent $tooltip-background !important;
  }
  &.right:before {
    border-color: transparent $tooltip-background transparent  !important
  }
  &.left:before {
    border-color: transparent transparent transparent $tooltip-background !important;
  }
}

The !importants are not good practice but in the situation I was in with this, they were necessary.

Upvotes: 1

WOWDesign
WOWDesign

Reputation: 56

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

Upvotes: 1

Related Questions