I was wondering is it possible to give each tooltip a different background color in materialize.css framework?
When the tooltip is activated I don't see any additional markup generated in the inspector, therefore can not target with CSS.
Tooltip color can be changed using css. You have to override default css as follow. Assign your color code to background-color in backdrop class.
<style>
.backdrop{
background-color: purple;
}
</style>
Following is sample working code snippet for 4 buttons which show tooltip.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS for tooltip-->
<style>
.backdrop{
background-color: purple;
}
</style>
</head>
<body class="row">
<div class="col s12" >
<div class="col s12"> <h4> Click following</h4> </div>
<!-- data-position can be : bottom, top, left, or right -->
<!-- data-delay controls delay before tooltip shows (in milliseconds)-->
<a class="btn tooltipped col s2" data-position="bottom" data-delay="50" data-tooltip="I am tooltip"> Bottom</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="top" data-delay="150" data-tooltip="I am tooltip"> Top</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="left" data-delay="250" data-tooltip="I am tooltip"> Left</a>
<p class="col s1"></p><!--for making space-->
<a class="btn tooltipped col s2" data-position="right" data-delay="550" data-tooltip="I am tooltip"> Right</a>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</body>
</html>
Tooltips appear like this in materialize:
I guess if you figure out the ID of the tooltip you want to change the background of you can do something like this: #TOOLTIP-ID.backdrop {background-color: red;}
You can customise a tooltip with the following css (Materialize 1.0.0)
.material-tooltip {
padding: 10px 8px;
font-size: 1rem;
z-index: 2000;
background-color: transparent;
border-radius: 2px;
color: #fff;
min-height: 36px;
line-height: 120%;
opacity: 0;
position: absolute;
text-align: center;
max-width: calc(100% - 4px);
overflow: hidden;
left: 0;
top: 0;
pointer-events: none;
visibility: hidden;
background-color: #323232;
font-family: "Roboto Mono";
font-size: 0.8em;
font-weight: 700;
}
To specify diffrent color for each tooltip you can do it like this:
while initializing tooltips add this function:
$('.tooltipped').tooltip({delay: 50}).each(function () {
var background = $(this).data('background-color');
if (background) {
$("#" + $(this).data('tooltip-id')).find(".backdrop").addClass(background);
}
});
and then on your tooltip specify it like this:
<a href="#!" class="tooltipped"
data-position="bottom"
data-delay="50"
data-tooltip="I'm a tooltip"
data-background-color="red lighten-3">
as you can see I'm changing the class attribute so you can use materialize-css colors
I solved it like this
$('.tooltipped').tooltip({delay: 50});
.material-tooltip .backdrop{
background-color: #DB0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css" rel="stylesheet"/>
<div class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip" >
Test Tooltip
</div>
For current version of materialize.css (1.0.0) you should style .material-tooltip and .tooltip-content
like this (sass):
.material-tooltip
background-color: white
border-color: gray
border-style: solid
border-width: 1px
.tooltip-content
padding: 3px
font-size: .8rem
background-color: transparent
color: #000
max-width: 250px
Updated Answer for 1.0
To style the tooltip's background etc:
.material-toolip {
background:#000;
}
To style the actual text within the tooltip use the following:
.material-tooltip .tooltip-content
{
font-size:12px;
}
Related
I am working on various contact form 7 controls.
The one that I am having issues with so far is making a radio button bigger, changing the background color and adding a huge gap between the label and the button.
I have looked on the suggested popups here including the subject Make radio button bigger but none seems to make any difference.
Here is a screenshot that contains two images, top image is the out I am getting from my version.
The image below is my preferred version.
Here is what I have tried so far.
I made an ID code of customized-radio in the ID attribute of the radio button control I am using.
On my form, I added the id attribute:
[radio rehireable id:customized-radio label_first "Yes"]
Then custom CSS:
#cuustomized-radio {
background-color:#f1f1f1 !important;
gap: 3.3em; /* space between label and button */
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 50%;
}
Any ideas what I could do differently to make this work?
I hope this simple CSS code will work for you
#cuustomized-radio {
background-color:#f1f1f1 !important;
background-color: #fff;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
float:right;
margin:5px;
}
.divdiv {
width:50%;
margin-top:10px;
padding:10px;
background-color:#f1f1f1;
border:1px dashed #000;
border-radius: 5px;
font-size:18px;
}
body {
padding:5%;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<h4>SUBJECT TO REHIRE? <span style="color:red;">*</span></h4>
<div class="divdiv">
<label> Yes </label>
<input id="cuustomized-radio" type="radio" name="test">
</div>
<div class="divdiv">
<label> No </label>
<input id="cuustomized-radio" type="radio" name="test">
</div>
</body>
I am trying to adapt Bootstrap 4 tooltip to display images.
<img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'>
In order to do it I had to add a custom CSS to allow tooltip scale to the width of the image.
.tooltip-inner {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
It works great, however all my regular text tooltips also scale. I would like the text tooltips act as they were. I tried adding class to my code but the issue is actually in the tooltip code that is generated on hover. Is there a way to use my custom CSS only for images?
I think that tooltip's template option could help you to do what you want.
For example, you could create a specific template only for your image, using a specific class to format only its tooltip.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip-image"]').tooltip({
template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner image"></div></div>'
});
});
.tooltip-inner.image {
max-width: 100%;
}
.tooltip.show {
opacity: 1;
}
.tooltip img {
margin: 5px 0;
background-color: #333;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<p>Hover over me</p>
<p><img src="https://picsum.photos/500/300" data-toggle="tooltip-image" data-html="true" title='<img src="https://picsum.photos/500/300" class="d-block">'></p>
</div>
I am trying to make a website in local using React.
It is my codes, I surrounded those two elements with a div tag and applied border css looking like related elements, but when I applied a Link tag to go to another page to the div elements, the border started not surrounding under the element. In shortly, how can I use the css file that before apply Link tag?
Here is my code.
div{
border: 1px black solid;
width: 250px;
height: 300px;
}
.p {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<Link to='/tests/'>
<div>
<i class='fas fa-check fa-5x'></i>
<p>take tests</p>
</div>
<Link>
You have to add a class to the div and fix your CSS.
.tests{
border: 1px black solid;
width: 250px;
height: 300px;
}
.p {
text-align: center;
}
The jsx
<Link to='/tests/' style={{ textDecoration: 'none' }}>
<div className="tests">
<i class='fas fa-check fa-5x'></i>
<p>take tests</p>
</div>
<Link>
I just get stucked on a quite simple thing:
I'm using <i class="glyphicon glyphicon-remove-sign"></i> which I want to add to the upper right corner of an image:
<div class="relative">
<i class="glyphicon glyphicon-remove-sign"></i>
<img src="anything.jpg">
</div>
But the X is transparent. So if I change the background-color to white, the square space around the icon also gets white - which shouldn't.
I just want to get a black Icon with an white X - and if possible a white border around the circle.
So I also tried to use glyphicon glyphicon-remove-circle and set the color to white. But if I set the background color to black, I'm getting the same problem
Finally I did it, I hope I've got it right.
container{
position: relative;
}
i{
left: 240px;
top: 0;
color: white;
background: black;
border-radius: 50%;
padding: 5px;
border: 2px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<img src="http://wallpaper.sc/en/ipad/wp-content/uploads/2014/10/ipad-2048x2048-thumbnail_00286-256x256.jpg" alt="">
<i class="glyphicon glyphicon-remove" style="position:absolute"></i>
</div>
Use a border radius with the same size as the font size.
.glyphicon-remove-sign {
background: white;
border-radius: 12px;
font-size: 12px;
padding: 5px;
}
In the project that i am making i used ion-scroll two times and works perfect (vertical mode) but now i am trying to do an horizontal scroll and is not working, the scroll appear but i can't scroll nothing.
The HTML code is simple:
<ion-scroll direction="x" class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</ion-scroll>
and CSS:
.box {
width: 60vw;
height: 10vh;
border: 1px solid black;
}
.box > * {
display: inline-block;
margin-right: 4vw;
width: 20vw;
height: 10vh;
background: red;
}
Any suggestion? i am doing something wrong? i am missing something?
Thanks in advance
View this codepen example, edit it and change it to your style.
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.data = {
isLoading: false
};
}]);
.wide-as-needed {
overflow: scroll;
white-space: nowrap;
}
.scroll {
min-width: 100%;
}
.bar.bar-loading {
display: block;
height: 24px;
/* starts right below a normal header */
top: 44px;
/* make the text centered vertically and horizontally */
text-align: center;
padding: 0;
line-height: 24px;
/* transition 'sliding down' (check below)*/
-webkit-transition: 200ms all;
}
/*
* make the content's top changes animate.
* might not always look good, but looks
* good when our loader is added & removed
*/
.has-header {
-webkit-transition: 200ms top;
}
.has-header.has-loading {
/* 44px (header) + 24px */
top: 68px;
}
/* make loading bar slide up/down */
.bar-loading.ng-enter,
.bar-loading.ng-leave.ng-leave-active {
height: 0;
border-width: 0px;
}
.bar-loading.ng-enter.ng-enter-active,
.bar-loading.ng-leave {
height: 24px;
border-width: 1px;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Modal</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello!</h1>
</ion-header-bar>
<ion-header-bar class="bar-subheader">
<ion-scroll direction="x" class="wide-as-needed">
<a class="button inline-button">this is a button : 1</a>
<a class="button">this is a button : 2</a>
<a class="button">this is a button : 3</a>
<a class="button">this is a button : 4</a>
<a class="button">this is a button : 5</a>
<a class="button">this is a button : 6</a>
<a class="button">this is a button : 7</a>
<a class="button">this is a button : 8</a>
<a class="button">this is a button : 9</a>
<a class="button">this is a button : 10</a>
<a class="button">this is a button : 11</a>
<a class="button">this is a button : 12</a>
<a class="button">this is a button : 13</a>
<a class="button">this is a button : 14</a>
<a class="button">this is a button : 15</a>
<a class="button">this is a button : 16</a>
</ion-scroll>
</ion-header-bar>
<div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
Loading...
</div>
<ion-content ng-class="{'has-loading': data.isLoading}">
<ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
</ion-content>
</body>
</html>
I had the same problem- horizontal scroll worked fine on iOS but not at all on android. It seems this is a bug with ionic:
https://github.com/driftyco/ionic-v1/issues/193
I'm using ionic 1.3.2, but it looks like it's still an issue in 2.x as well.
I was able to fix it by adding adding overflow-scroll="false" to the ion-scroll element.