style specific tooltip popup in foundation - css

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

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.

Related

I'm implementing a background gradient overlay over a bootstrap card, but the title text gets the background overlay as well

The following is my HTML markup where I add the title as a prop for Bootstrap card. I've tried z-index as well, but I wasn't able to achieve the desired result.
<b-col>
<div class="card-container">
<b-card
overlay
img-src="/images/ajm.jpg"
img-alt="Card Image"
class="product-card"
title="Linear Motors"
title-tag="h5"
align="center"
></b-card>
</div>
</b-col>
CSS ----->
.product-card {
height: 353px;
border-radius: 0px;
border: 0;
color: #0c1c35;
}
.card-container {
width: 100%;
height: 100%;
:hover {
background: -webkit-linear-gradient(
90deg,
hsla(217, 100%, 50%, 1) 0%,
hsla(186, 100%, 69%, 1) 100%
);
opacity: 0.8;
color: white;
}
}
Another thought I had was that the opacity field actually effects child elements as explained in w3 schools:
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
From seeing your CSS I see you're using opacity, so this might work if you use the RGBA - CSS.
.card-container {
background-color: rgba(255, 255, 255, 0.5);
}
Hope this helps

How to change side menu background color in ionic 4?

I want to change the side menu background color, I tried a few things but not working.
ion-menu{
ion-content{
background-color: transparent !important;
}
.inner-scroll {
--background: var(--ion-menu-background);
}
}
Does anyone know how I can change background color in ionic 4?.
Try this
.inner-scroll {
background: green;
}
.inner-scroll .item-native{
background: green;
}
In cases where there are gradients and shades of colors, you can try this. This is particularly useful if you want the entire side-menu to have a gradient, without any borders, separating the toolbar, content and items.
// In variable.scss file you can create your Ionic css variables
:root
{
--custom-menu: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(246, 133, 133, 1) 16.3%,
rgba(172, 131, 241, 1) 90%
);
}
// In the app.component.scss file you would need to reference the variable that you created
ion-menu {
--ion-background-color: var(--custom-menu);
ion-toolbar {
--background: transparent;
}
ion-list {
background: transparent;
}
ion-item {
color: rgb(255, 255, 255);
--background: transparent;
}
ion-content {
--background: transparent;
}
}
// In the appcomponent.html file, ensure that you specify the no-border directive
<ion-header no-border>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
This is the output

CSS Gradient link text jumps on hover

I am using gradient text color for my links on hover, however a strange jump effect is occurring ever since I added the css class. Whenever I hover the link it jumps like 2px-4px up.
When I remove the gradient color class all is normal again. Is there any fix to this? The custom code I added:
.bg-gradient-ligth {
background-color: $white;
background-image: linear-gradient(315deg, $white 0%, $ligth-grey 74%);
}
a {
color:$green
}
a:hover {
background: -webkit-linear-gradient($gradient1, $gradient2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heading-gradient {
background: -webkit-linear-gradient($gradient1, $gradient2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The rest is just plain Bootstrap and theme CSS. Which worked fine before. By the way it also cuts off the text of a gradient h1 title at the bottom.

Cannot remove gradient

I'm trying to remove gradient overriding this:
-webkit-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -moz-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: -o-linear-gradient(right,#1a5cce, #00c7ce 85%);
background: linear-gradient(right,#1a5cce, #00c7ce 85%);
I tried with:
background: -webkit-linear-gradient(none);
background: -moz-linear-gradient(none);
background: -o-linear-gradient(none);
background: linear-gradient(none);
I'm not a css expert, what I want to do is remove completely the gradient, is this possible?
Just set background: initial.
All CSS properties allow initial value to revert their value to initial state. Use this property what you don't want to bother about particular property defaults.
Also you can use background: none for background property.
Gradient background reset that you'll need to set background: none #color;
Example:
.your-class {
background: none #157FCC;
color: #FFFFFF;
}

How do I utilize this semi-transparent png so the caption is easier to read in my Jquery slider? (w/ pic)

I have this Jquery slider plugin for Wordpress, and it's just the jquery cycle plugin by Malsup.
Anyway, I added a caption in each slide. I just can't find a color that shows clearly in each slide. So I made a semi-transparent (50% opacity) png in Photoshop, 5px x 5 px. Currently, my CSS looks like this:
.homepage-slides p {
background: transparent url('images/title-bg.png') repeat top left;
bottom: 0;
left: 0;
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 5px;
position: absolute;
text-align: left;
width: 100%;
}
I also tried using an absolute path to the png, but no go. Here's the result:
As you can see, the caption in the bottom is almost impossible to read. It'd be cool if I could find a way to have like ... this semi-transparent, yellow rectangular box and then have the black caption inside that box, so you could read the caption. Any help with this would be truly appreciated!
Mr.Jason
Try this Html and Css,
<body>
<div class="stroke-effect">
This text should have a stroke in some browsers
</div>
</body>
Css
body{
background-color:#000;
}
.stroke-effect{
font-weight:bold;
color: #000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
Check this http://jsfiddle.net/VqDKp/
Good Luck!
I'd recommend not using images. One reason is that png images with transparent backgrounds don't have transparency in some browsers (I know it maybe only older browsers but still).
Another reason. The image wont be positioned 100% of the background in your script.
I personally like using CSS made backgrounds as they pretty much cover all browsers types. Here's my background example for you :)
background:rgba(200,200,200,0.5); //50% silver-ish background.
You could use an opacity. But I wouldn't recommend that as it would effect the content in your p element as well as. I believe using an alpha filter would do the same but it's been a while since I've used them.
Here's a further example for you :)
background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(70,70,70,0.5) 30%, rgba(200,200,200,0.5) 100%);
//from top to bottom 100% transparent black.
//Very dark grey 50% transparent at 30% from the top of the element.
//Silver-ish 100% at the bottom at 50% transparency.
using the webkit extensions respectively for the above example :)
I hope this helps.

Resources