Jump to content

[Resolved] Tool Tip


Recommended Posts

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...