I am displaying a tooltip on an input field using css and surrounding the inPut within DIV. Basically the style is applying on DIV. The style gets applied on hover of the input field now.I want to display the tooltip as soon as the user tabs into that field. I see that DIV doesn't work on :focus. Any thoughts on how to show as soon as user focus on the field. I am using angular, can we apply some the class of the parentNode or any other way of doing it.
test(e: Event) {
if (this.inputfield.nativeElement.parentNode.tagName.toString().toLowerCase() === 'div') {
// apply the class to the parentNode
}
}
.tooltipmain {
position: relative;
display: inline-block;
}
.tooltipmain .tooltiptext {
visibility: hidden;
width: 185px;
background-color: #fff;
color: #000;
text-align: center;
}
.tooltipmain .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
}
.tooltipmain:hover .tooltiptext {
visibility: visible;
}
<div class="tooltipmain">
<input #inputfield onFocus="test($event)"> </input>
<div class="tooltiptext">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
</div>
You can make use of focus, blur, mouseenter and mouseleave to track events triggered by the input field. Each of these events will be calling a function which will update the isFocussed variable.
<input
(blur)="focusChanged(false)"
(focus)="focusChanged(true)"
(mouseenter)="focusChanged(true)"
(mouseleave)="focusChanged(false)"
type="text">
On the element you want to toggle visibility you can make use of [class.<className>="<expression>"]. This will add/remove a class on the element based on the expressions.
<div [class.isActive]="focussed" class="tooltiptext">
Stackblitz example here
Related
I have a button that I want to perform the action generated by a file_field in Rails. Here is the erb code I have right now:
<label for='file-input'>
<span class='btn btn-success' style='max-width: 300px;'>
<img src=<%= image_path('button-upload-white.svg')%>></img> Upload from computer
</span>
</label>
<%= f.file_field :files, multiple: true, name: 'attachment[file]', id: 'file-input'%>
I was following the pattern in this question with the associated CSS:
.file-input > input
{
display: none;
}
.file-input > label{
cursor: pointer;
}
but it does not seem to work and generates the following:
Desired output would be the same with the choose files input hidden or somehow connected to the button itself. Thanks, please let me know if I should post more code or I'm thinking about this in the wrong way.
Try this to 'hide' the input element
Width and height are set to 0.1px instead of just 0px. Setting the property values to zero ends up throwing the element out of tab party in some browsers. And position: absolute guarantees the element does not interfere with the sibling elements.
.file-input > input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
Credit
Just wondering if a div can be called without using javascript.
such as
my_div:hover{ add new layout}
is there a version for click eg
my_div:click{add new layout}
Thanks
Yes, if you add tabindex="0" to your div, you make it clickable and can then use the :focus pseudo-class to apply styles.
<div class="clickable" tabindex="0"></div>
.clickable {
height: 100px;
background: blue;
}
.clickable:focus {
background: red;
}
Codepen example. Clicking the div should give it focus and apply the :focus CSS to it. Clicking away from it will unfocus (blur) it and reset the default styles.
Not directly, but you can fake it using checkboxes:
input[type=checkbox] {
display: none;
}
.content {
display: none;
padding: 20px;
background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
display: block;
}
<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
<h3>Content</h3>
<p>lorem20</p>
</div>
I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.
I have used CSS like this but not working:
td > div> div.colorMe {
background-color:yellow;
}
Can you please tell me how I can color my td using css?
There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.
I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.
Here is a small example of changing a parent div's color on a click event
var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
this.parentNode.style.backgroundColor = "white";
});
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
.color1 {
background-color: red;
}
.color2 {
background-color: rebeccapurple;
width: 50px;
height: 20px;
}
<div class="color1">
<div class="color2"></div>
</div>
You can kind of emulate the behavior you need with the following trick:
td {
position: relative; /* make the cell a container for positioned children */
}
.colorMe::before { /* cover this container with colored pseudo element */
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color:yellow;
z-index: -1;
}
table { /* just to make the example prettier :) */
width: 100%;
height: 100px;
table-layout: fixed;
}
<table>
<tr>
<td>
Just a TD
</td>
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
<td>
Just a TD again
</td>
</tr>
</table>
It won't work, however, if you need to position something absolutely from the .colorMe element itself.
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
I'm a beginner in CSS and already hate it :(. When the user will click outside of the calendar, I want the calendar to disappear.
Here is the html code for the calendar:
<div id="ctl00_MainContent_EventsCalendar" class="RadScheduler RadScheduler_Default" style="overflow-y:visible;">
<div class="rsTopWrap rsOverflowExpand" style="width: 1157px; ">
<div class="rsHeader">
<div class="rsDatePickerWrapper" style="overflow-x: visible; overflow-y: visible; ">
<div id="ctl00_MainContent_EventsCalendar_SelectedDateCalendar_wrapper" style="position: absolute; width: 220px; height: 176px; overflow-x: hidden; overflow-y: hidden; ">
<table id="ctl00_MainContent_EventsCalendar_SelectedDateCalendar" summary="Calendar" cellspacing="0" class="RadCalendar RadCalendar_Default rsDatePickerCalendar">
I tried:
.RadCalendar_Default .rsHeader a.rsDatePickerCalendar:hover
{
visibility:hidden !important;
}
But it's not working.
First, instead of visibility: hidden;, I recommend to use display: none; to hide elements. Otherwise you may have undesired side-effects.
Then, the :hover pseudo-class doesn't handle click events, it's just active, if the user (as the name suggests) is hovering the element with the cursor. To change the appearance of an element on a click, use jQuery like this:
$('body').bind('click', function() {
$(".RadScheduler", this).addClass("hide");
});
and have a css rule like this:
.hide { display: none; }