Issue
I added the content
property to .tooltip::after
all the elements that have the tooltip class, now I want to assign different values to the content
property of all the elements that have the tooltip class without repeating the rest of the attributes that I set for the tooltip class
So how do I do this.
.tooltip::after {
content: "";
color: #303030;
width: 140px;
height: 39px;
border-radius: 4px;
position: absolute;
top: -46px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0px 12px 14px 0px #eee;
background-color: white;
display: none;
align-items: center;
justify-content: center;
display: none;
font-size: 14px;
font-weight: 200;
}
<div class="list list-one">
<h2>Demo 1 <span>- Default Dashboard</span></h2>
<button class="tooltip html">HTML</button>
<button class="tooltip vuejs">VueJS</button>
<button class="tooltip react">React</button>
<button class="tooltip angular">Angular</button>
<button class="tooltip laravel">Laravel</button>
<button class="tooltip rtl">RTL</button>
<img src="images/demo1.png">
</div>
Solution
Use data attributes and attr()
.
.tooltip {
position: relative;
}
.tooltip:hover::after {
content: attr(data-label);
color: #303030;
width: 140px;
height: 39px;
border-radius: 4px;
position: absolute;
top: -49px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0px 12px 14px 0px #eee;
background-color: white;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 200;
}
<div class="list list-one">
<h2>Demo 1 <span>- Default Dashboard</span></h2>
<button data-label="HTML" class="tooltip">HTML</button>
<button data-label="VueJS" class="tooltip">VueJS</button>
<button data-label="React" class="tooltip">React</button>
<button data-label="Angular" class="tooltip">Angular</button>
<button data-label="Laravel" class="tooltip">Laravel</button>
<button data-label="RTL" class="tooltip">RTL</button>
</div>
Answered By - Felipe Saldanha
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.