I have multiple tooltips on my website which I created using data-tooltip. The problem is that it's an attribute so I can't just apply a class in front of it and use it. So what I want is for instance different width for one tooltip or different color etc.
This is an example in the css for the "data-tooltip"
[data-tooltip] {
position: relative;
z-index: 2;
cursor: pointer;
}
Can you please provide some additional html?
It's possible to use a class:
.my-class-1[data-tooltip] {
width: 100px;
}
.my-class-2[data-tooltip] {
width: 200px;
}
<div class="my-class-1" data-tooltip="true">...</div>
<div class="my-class-2" data-tooltip="true">...</div>
or you could also use another data-attribute:
[data-tooltip][data-tooltip-small] {
width: 100px;
}
[data-tooltip][data-tooltip-big] {
width: 200px;
}
<div data-tooltip="true" data-tooltip-small="true">...</div>
<div data-tooltip="true" data-tooltip-big="true">...</div>
Related
I have an html element like so:
<div className="sidebar-nav-main-links">
<Link to="/home">
<i><div id="home-icon"></div></i>
<p>Home</p>
</Link>
</div>
And my css looks like this:
i {
#home-icon {
background-image: image_url('clear-home-icon.png');
width: 20px;
}
}
But I can't get the image to display, let alone do a hover effect. Any ideas as to why this is? Also I'd like to change the image upon hover.
It's better to use content instead of background-image.
Example:
<i id="home-icon"></i>
css:
#home-icon {
content: url("https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png");
width: 20px;
}
#home-icon:hover {
content: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQjhOBG4ztvrvf0Jw6p_J3lMhnnKZ4TupbpIDVNy9OM38skvpi4");
width: 20px;
}
jsfiddle: https://jsfiddle.net/2pb1oevj/
You can use the following CSS with your HTML:
#home-icon {
background: url("abc.jpg");
width: 20px;
height: 16px;
display: block;
}
#home-icon:hover {
background: url("xyz.jpg");
width: 20px;
height: 16px;
display: block;
}
You can adjust height/width of the icon accordingly.
Reference: Adding Custom icon to HTML Page
Is there a way where I could dynamically add the styles in css/less file by just passing in class name ?
For example:
<div class="xyz_20"></div>
<div class="xyz_40"></div>
Instead of writing:
.xyz_20 {width:20px;} .xyz_40 {width:40px;}
Is there a way where i could write a single class .xyz_i and width be automatically added based on the i value, like .xyz_i {width: i px;}` without involving javascript.
If so, Please suggest.
This is not possible, as far as I know, however this is a great use case for inline styling:
<div class="xyz" style="width:20px"></div>
If you wanted to support a finite number of widths, then you can use recursion to generate classes:
.widthgen(#count) when (#count > 0) {
.widthgen((#count - 10));
.xyz_#{count} {
background-color: red;
width: #count * 1px;
}
}
.widthgen(50);
Output:
.xyz_10 {
background-color: red;
width: 10px;
}
.xyz_20 {
background-color: red;
width: 20px;
}
.xyz_30 {
background-color: red;
width: 30px;
}
.xyz_40 {
background-color: red;
width: 40px;
}
.xyz_50 {
background-color: red;
width: 50px;
}
Lists Plugin
You could use the lists plugin (to install: npm install -g less-plugin-lists) if your widths you want to support are not easily captured in a linear pattern:
#widths: 10, 20, 40, 50;
.for-each(#i in #widths) {
.xyz_#{i} {
background-color: red;
width: #i * 1px;
}
}
You would compile that with:
lessc --lists in.less out.css
And you would get:
.xyz_10 {
background-color: red;
width: 10px;
}
.xyz_20 {
background-color: red;
width: 20px;
}
.xyz_40 {
background-color: red;
width: 40px;
}
.xyz_50 {
background-color: red;
width: 50px;
}
No.
There is no way to write classes and expect the browser to infer meaning from them.
The only way to accomplish something similar to this would be with javascript (which OP said they did now want to use).
Sorry if the question is not really relevant, I'm french and I don't know the right terms of what I am asking exacly :)
Here is the 'thing' (module?) I've created to create a circle.
.fake-avatar {
width: 70px;
height: 70px;
}
But I want to outline this one without creating this :
.fake-avatar-outline {
width: 72px;
height: 72px;
}
Here is where I use it :
.fake-avatar-outline.rounded.flex-center.b-success.m-auto.bg-pink
.fake-avatar.rounded.flex-center.b-success.text-xl.m-auto.bg-pink-light.icon-star
so the goal is to have only fake-avatar and change manually the size. How is it possible? Should I do something like that :
.fake-avatar.rounded.flex-center.b-success.m-auto.bg-pink(width='72px')
.fake-avatar.rounded.flex-center.b-success.text-xl.m-auto.bg-pink-light.icon-star
Thank you,
Nicolas
If I am understanding this correctly you are looking for a border
.fake-avatar {
width: 70px;
height: 70px;
/* Add this*/
border: 2px solid #FFF; /* color can go here */
/* If you wanted a circle */
border-radius: 50%;
}
EDIT: As stated in the comments, the poster was also looking for a way to change the width of the element without having to change the class in the css file. I said he could use inline-styles.
<div class="fake-avatar" style="width: 72px"></div>
I also noted that setting styles this way is usually frowned upon as it makes css maintenance a nightmare.
Expanding on #DavidLee's answer, here a snippet with running code for both options.
.fake-avatar {
width: 70px;
height: 70px;
border: 2px solid white;
border-radius: 50%;
background-color:blue;
}
.fake-avatar-outline {
width: 70px;
height: 70px;
border: 1px solid red;
border-radius: 50%;
}
<div class="fake-avatar"></div>
<div class="fake-avatar-outline"></div>
I would like to put a "vote" button on a webpage with a counter. The vote buttons come with a counter of current votes. If it is not clicked, the count displayed is the current number of votes. When clicked, the current number of votes is incremented of one (and the button change its state or appeareance).
Is there a way to do this in pure HTML5/CSS3?
The button and it's interaction can be done on the user-side with pure CSS given you generate a small style tag in your document server-side. Needless to say that you can't record the result in your database if you don't use Javascript or a post back, though.
#container {
width: 100px;
height: 20px;
position: relative;
text-align: center;
}
#like {
position: absolute;
display: block;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
#like:checked {
counter-increment: likes;
}
#button {
display: block;
width: 100%;
height: 100%;
background: green;
}
#like:checked ~ #button {
background: blue;
}
#count:before {
content: counter(likes);
}
<!-- Create this style tag server-side -->
<style>
body {
counter-reset: likes 7; /* Initial number of likes */
}
</style>
<div id="container">
<input id="like" type="checkbox" name="like" value="like" />
<span id="button">Like <span id="count"></span></span>
</div>
See this visualization here where the color of the image is changed when you mouse hover the image:
http://thebandcalledboy.com/
I'm trying to replicate the same behavior. Any clues?
You can use the ":hover" pseudo-class to give a different style to an element that is hovered over. For example, if you have an element like this:
<div class="my-element">Content</div>
You can style the element differently when it is hovered over:
.my-element {
background: green;
}
.my-element:hover {
background: red;
}
The code above gives the element a red background on hover but a green background otherwise. You can use a similar technique (albeit with different CSS properties) to either select two different background images or to reuse the same image but apply a different color mask on top of it.
If you are using chrome, right on the image->inspect element. What you will get is this:
HTML:
</div>
<img src="sites/all/themes/boy/images/boy_logo.png" class="logo" alt=""/>
</div>
CSS:
element.style {
}
thebandcalledboy.com/media="all"
#center .black {
width: 96%;
height: 97%;
margin: 2%;
background: #000;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body
Style Attribute {
font-size: 7.9375px;
}
thebandcalledboy.com/media="all"
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family:'PerpetuaRegular',arial,sans-serif;
font-size: 20px;
}
Inherited from html.js.textshadow.fontface.audio.svg
thebandcalledboy.com/media="all"
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'PerpetuaRegular',arial,sans-serif;
font-size: 20px;
}
Similarly see
computed
and
event listeners there.
I think I would draw the colors onto a off screen PGraphic object and use something like the PImage blend function to mask it onto the template of the boy's face.