[Resolved] Tool Tip

[Claudia M]

Hi,

I just added a tooltip for my PayPal button on the checkout page.   Works as I want, but, I changed the background color of the tooltip box from stock but the little arrow on the top left of the box is still dark - not the same changed color. How do I get the arrow to match the tooltip box?

Thanks in advance for all help,

Claudia

 

[Dirty Butter]

Maybe  .tooltip > .nub in foundation around line 3927???

[Claudia M]

Unfortunately that didn't do it.

[Dirty Butter]

It should be somewhere in that Tooltip section. Or it could be a special button???

I ran into the same issue a long time ago, probably on v4 or v5, but I have no idea what I changed back then. I do remember there was a left side and right side to the pyramid shape.

[Claudia M]

I previously added but it didn't work. 

 .has-tip.tip-left, .has-tip.tip-right {
  background: #CCCCCC;
    float: none !important; }

There's no button mentioned in the code I'm using

{foreach from=$CHECKOUTS item=checkout}
<div class="row">
   <div class="small-12 columns text-right pad"><span data-tooltip aria-haspopup="true" class="has-tip" title="Checkout quickly and easily using your secure PayPal Account">?</span>
{$checkout}</div>

I'll kep messing around and post here if I come up with something - unless you think of something else first.

Thanks,

Claudia

 

[Claudia M]

I've been playing around with this and this is what I have. Changed #333333 to #CCCCCC (the color I want).  Looks okay except on small displays it looks like a square not a pyramid.

@media only screen and (min-width: 40.0625em) {
  .tooltip > .nub {
    border-color: transparent transparent #CCCCCC transparent;
    top: -10px; }
  .tooltip.tip-top > .nub {
    border-color: #CCCCCC transparent transparent transparent;
    bottom: -10px;
    top: auto; }
  .tooltip.tip-left, .tooltip.tip-right {
    float: none !important; }
  .tooltip.tip-left > .nub {
    border-color: transparent transparent transparent #CCCCCC;
    left: auto;
    margin-top: -5px;
    right: -10px;
    top: 50%; }

 

[Dirty Butter]

@media only screen and (min-width: 40.0625em) {

Seems like there should be something similar for smaller width. If it doesn't exist you could copy this section over to cubecart.css. Try creating it for max-width: 40.0624em.

[Claudia M]

That did it!  Thanks!