In the code below the tooltip highlight the whole text relative to it. How can I highlight only word "over".
body {text-align: center}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
The code above was extracted from here: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top
You just need to change your HTML a bit:
body {text-align: center}
.tooltip {
position: relative;
/*display: inline-block; not necessary*/
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div>Hover <span class="tooltip">over<span class="tooltiptext">Tooltip text</span></span> me
</div>
Assuming that you can edit html, you can just wrap the word over with given class.
Hover <div class="tooltip">over<span class="tooltiptext">Tooltip text</span></div> me
Edited:
<div>Hover <span class="tooltip">over<span class="tooltiptext">Tooltip text</span></span> me</div>
Related
Basically, I want to add the purple border for the selected item. I think the ::before pseudo element is the best option here?
I've tried this, but it's not very good at all and it sits right next to the text rather than on the edge of the screen:
#serverList {
li::before {
content: 'a';
height: 5em;
width: 1em;
color: blue;
background-color: blue;
}
}
Thank you!
First, you have to add position relative to father element:
#serverList li{
position: relative;
}
Then, let's work in children element(::before)
#serverList li::before{
content: ''; /* is not necesary any info here */
height: 5em;
width: 1em;
color: blue;
background-color: blue;
position: absolute; /* this is absolute to the father element*/
left: 0; /* we want this in the point 0 of our father element*/
}
You can play with properties top, left, right, bottom and the position absolute.
What about the following? You can use a wrapper and add your content inside of a span which is centered.
.wrapper {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
padding: 12px 12px 12px 40px;
}
.wrapper::before {
content: '';
left: 0;
width: 10px;
height: 100%;
opacity: 0;
background: lightblue;
position: absolute;
transition: 0.5s all ease;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
.wrapper:hover::before {
opacity: 1;
}
<div class="wrapper">
<span>This is a text</span>
</div>
<div class="wrapper">
<span>This is a second text</span>
</div>
<div class="wrapper">
<span>This is another</span>
</div>
EDIT #1
If you want to retain the state:
$( ".wrapper" ).each(function(index) {
$(this).on("click", function(){
$(this).toggleClass("active");
});
})
.wrapper {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
padding: 12px 12px 12px 40px;
box-shadow: 0px 0px 1px grey;
margin-bottom: 6px;
max-width: 200px;
}
.wrapper::before {
content: '';
left: 0;
width: 10px;
height: 100%;
opacity: 0;
background: lightblue;
position: absolute;
transition: 0.5s all ease;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
.wrapper.active::before {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<span>Click here</span>
</div>
<div class="wrapper">
<span>Click here 2</span>
</div>
<div class="wrapper">
<span>Click here 3</span>
</div>
Outline color of title in the input textbox is displaying differently in Google chrome. bottom border line is looking differently.
<input type="text" title="Please fill out this field.">
so i tried with following code:
<span class="pseudo-tooltip-wrapper" data-title="please fill out this field...">
<input type='text' required></span>
sample.css
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: rgb(217, 235, 217);
color: #111;
font-size: 150%;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -1.6em;
left: 100%;
white-space: nowrap;
/* box-shadow: 1px 1px 3px #222222; */
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.pseudo-tooltip-wrapper {
/*This causes the wrapping element to be the same size as what it contains.*/
display: inline-block;
}
so now it's displaying like below. When i make the field as required the default title bar is displaying.
Instead of this approach can we fix the default title bar border.
Please find the code in stackbliz: https://stackblitz.com/edit/angular-pa2lnu
How to achieve this issue.
You can use angular material Input Form fields, they are simpler, comprehensive and decorative. Lt me know if you find
[This Link] (https://material.angular.io/components/form-field/overview) helpful
You can make a custom tooltip handler. See, I used tooltip and tooltiptext class for displaying custom title.
Stackblitz here
HTML
Hover over me
<br/>
<br/>
<div class="tooltip">
<span class="tooltiptext">Required field</span>
<input title="Please fill" type="text" />
</div>
CSS
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
When I hover over the first Div, the tooltip is shown further away than if I hover over the following two divs. Obviously it is because the text inside the div is larger/longer. But I don't want to show the tooltip span not depending on the hover text, but relating to the containing div of the text, so it is shown always at the same position.
jQuery is not an option for anything though but I kind of think, that it's a CSS problem anyway.
.subPhaseContainer {
float: left;
margin: 0 auto;
}
.projectItem {
margin: 4px;
border: 2px solid black;
cursor: pointer;
height: 17px;
}
.projectItem.green {
background-color: green;
color: white;
}
.projectNumber {
position: relative;
display: inline-block;
width: 80px;
}
.projectNumber .tooltiptext {
visibility: hidden;
width: fit-content;
text-align: left;
padding: 5px;
top: -1px;
position: absolute;
z-index: 1;
margin-left: 34px;
transition: opacity 0.3s;
border: 1px solid black;
}
.projectNumber .tooltiptext::after {
content: "";
position: absolute;
top: 20%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.projectNumber:hover .tooltiptext.green {
background-color: green;
color: white;
visibility: visible;
opacity: 1;
}
.projectNumber:hover .tooltiptext.yellow {
background-color: yellow;
visibility: visible;
opacity: 1;
}
.projectNumber:hover .tooltiptext.red {
background-color: red;
color: white;
visibility: visible;
opacity: 1;
}
<div class="subPhaseContainer">
<div class="projectItem green">
<div class="projectNumber"><span>AAAA-00</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
<div class="projectItem green">
<div class="projectNumber">
<span>BBB-11</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
<div class="projectItem green">
<div class="projectNumber">
<span>CCC-22</span>
<span class="tooltiptext green">Tooltip Sample</span>
</div>
</div>
</div>
You need to specify either a 'left' or 'right' position for your tooltiptext span, otherwise its left/right position will be the same as it would have been had you kept the tooltiptext span positioned relative.
So just update your CSS for the tooltiptext to this:
.projectNumber .tooltiptext {
visibility: hidden;
width: fit-content;
text-align: left;
padding: 5px;
top: -1px;
right: -100%;
position: absolute;
z-index: 1;
margin-left: 34px;
transition: opacity 0.3s;
border: 1px solid black;
}
I have a tooltip and I have it on an h1 and an h4. Here is what it looks like on the h4:
And here is what an h1 looks like:
The tooltip is much higher up on the h1 than the h4. Basically, I want both of them to look exactly the same.
Here is my code:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
font-size: 16px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class = "tooltip"><span id = "htmlHub" class = "contact">programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id = "rockPaperScissors" class = "programs tooltip"><h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Thanks in advance!
This is mostly because the h1 has a large top/bottom margin, but also affecting the position is the line-height. To have it match the way it displays over your span, just set the margin to 0 and optionally, the line-height to 1 or whatever works for your layout.
h1 {
margin: 0;
line-height: 1;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
font-size: 16px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class = "tooltip"><span id = "htmlHub" class = "contact">programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id = "rockPaperScissors" class = "programs tooltip"><h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Instead of using both left and bottom as percentages, I'd recommend simply using a negative pixel-based top. I've gone with -35px in my example.
Note that depending on where exactly you want the tooltip to sit horizontally, you will need to use margin-left. I've just gone with -100px here, but you might want to make that relative.
This will make the <h1> tooltip slightly higher than the <h4> tooltip:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
margin-left: -100px;
font-size: 16px;
top: -35px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class="tooltip"><span id="htmlHub" class="contact">Programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id="rockPaperScissors" class="programs tooltip">
<h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Optionally, you can use the line-height attribute to override the differing line heights for the headings. Setting this to 0 for both elements ensures that the tooltip will remain at the same height for both headings:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
width: 150px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
margin-left: -100px;
font-size: 16px;
top: -35px;
}
.tooltip:hover {
cusor: pointer;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
h1,
h4 {
line-height: 0;
}
<p></p>
<p></p>
<p></p>
<p></p>
<center>
<!-- h4 tooltip -->
<div class="tooltip"><span id="htmlHub" class="contact">Programs</span><span class="tooltiptext">Go to the Programs tab</span></div>
<!-- h1 tooltip -->
<div id="rockPaperScissors" class="programs tooltip">
<h1>Rock Paper Scissors</h1><span class="tooltiptext">Go to the Rock Paper Scissors program</span></div>
</center>
Hope this helps! :)
I try to make a tooltip (hide/unhide span) when a div is hovered.
I don't know where is the problem because the span is always visible and if i add display:none, all content will be hidden.
Thank you very much!
CSS:
.tooltip {
display:relative;
}
.tooltip span:before {
content:'';
display:none;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
position:absolute;
z-index:8;
font-size:0;
line-height:0;
width:0;
height:0;
top: 30%;
left: 83%;
}
.tooltip span:after {
display:none;
position:absolute;
top:0%;
left:89%;
padding:5px 8px;
background: #000000;
color:#fff;
z-index:9;
font-size: 0.75em;
height:auto;
opacity: 0.8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space:nowrap;
word-wrap:normal;
}
.tooltip span:hover:before,
.tooltip span:hover:after {
display:block;
}
HTML:
<div class="tooltip">
<span>tooltip text</span>
<input type="button" class="button active" value = "HOVER ME" >
</div>
https://jsfiddle.net/dy6bjvbm/1/
Start with something like the following:
.tooltip {
position: relative;
display: inline-block;
}
.tooltip span {
display: none;
position: absolute;
top: 30px;
border: 1px solid #ccc;
padding: 5px;
background: #eee;
}
.tooltip:hover span {
display: block;
}
<div class="tooltip">
<span>tooltip text</span>
<input type="button" class="button active" value = "HOVER ME" >
</div>
See this fork of your fiddle: https://jsfiddle.net/b60fcyu1/
If you're up for a JavaScript/jQuery solution, you can use mouseover and mouseout with hide() and show() element.
$(document).ready(function() {
$("input.button").mouseover(function() {
$('div span').hide();
});
$("input.button").mouseout(function() {
$('div span').show();
});
});
.tooltip {
display: relative;
}
.tooltip span:before {
content: '';
display: none;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
position: absolute;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
top: 30%;
left: 83%;
}
.tooltip span:after {
display: none;
position: absolute;
top: 0%;
left: 89%;
padding: 5px 8px;
background: #000000;
color: #fff;
z-index: 9;
font-size: 0.75em;
height: auto;
opacity: 0.8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
word-wrap: normal;
}
.tooltip span:hover:before,
.tooltip span:hover:after {
display: block;
}
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<div class="tooltip">
<span>tooltip text</span>
<br>
<input type="button" class="button active" value="HOVER ME">
</div>
If you have constant values, you can do it like this. (for more effective with multiple rows)
.tooltip {
position: relative;
width: 300px;
height: 30px;
}
.tooltip span {
opacity: 0;
pointer-events: none;
transition: 0.3s;
width: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
line-height: 30px;
bottom: 40px;
border-radius: 5px;
padding: 0 5px;
}
.tooltip span:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: rgba(0, 0, 0, 0.6);
border-width: 6px;
margin-left: -6px;
}
.tooltip:hover span {
opacity: 1;
pointer-events: inherit;
}
<p style="height:100px;">
<!-- for seperate -->
</p>
<div class="tooltip">
<span>tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text tooltip text</span>
<input type="button" class="button active" value="HOVER ME" style="width:100%;height:30px">
</div>