JFIDDLE DEMO
As you can see on the jsfiddle link, I have a button with tooltip display on mouse hover. The problem is that tooltip area isn't overlaying the parent div and will display only inside the div.
I know that if I remove .panel-heading {
overflow:hidden;
} this will work but I need this css to stay for some of the responsive issues. I have tried adding .toolt {
overflow:visible;
} to tooltip div but it won't work.
You can change container of tooltip
$('.toolt span').tooltip({container:'body'});
Related
I want to display scrollbar while the mouse hover the container, if the contents inside the container overflows the container.
The below code works good in chrome but doesn't work in firefox, because it doesn't suppport overlay property.
<style type="text/css">
.container {
overflow:hidden;
}
.container:hover {
overflow:overlay;
}
</style>
<div class="container">
contents
</div>
I tried using overflow:auto on hover but it changes the alignment of text inside the container while mouse hovers.
Is there any way to achive my need in all browsers?
Add scrollbar-gutter:stable to .container and this should do the trick. More info here and here.
Hello I am trying to make an invisible button (still functional and clickable), because my buttons styles are embedded in the background and I don't want to slice them, and do it all from beginning.
So I just want to make a button, put it on the part of the background where the button should be and make it invisible so the background button image can be seen and clicked.
Any suggestions? Thank you very much!
you must use the following properties for a button element to make it transparent.
Transparent Button With No Text
button {
background: transparent;
border: none !important;
font-size:0;
}
Transparent Button With Visible Text
button {
background: transparent;
border: none !important;
}
and use absolute position to position the element.
For Example
you have the button element under a div. Use position : relative on div and position: absolute on the button to position it within the div.
here is a working JSFiddle
here is an updated JSFiddle that displays only text from the button.
You can use CSS to hide the button.
button {
visibility: hidden;
}
If your <button> is just a clickable area on the image, why bother make it a button? You can use <map> element instead.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Give the height and width with respect to the image in the background.This removes the borders and color of a button.You might also need to position it absolute so you can correctly place it where you need.I cant help you further without posting you code
To make it truly invisible you have to set outline:none; otherwise there would be a blue outline in some browsers and you have to set display:block if you need to click it and set dimensions to it
HTML
<input type="button">
CSS
input[type=button]{
background:transparent;
border:0;
}
Use CSS background:transparent; to your button/div.
JSFiddle
up I am able to add the scroll to the pop up if it is bigger than the screen but I am having issue with the overlay I am not able to click on it..if you double click on overlay you will notice the cross button get the selection but the at the bottom left side powered by should get the selection
.booklyng-modal-body .popup-box-wrapper {
overflow-x: hidden !important;
max-height: 100%;
overflow-y: auto !important;
z-index:222;
}
This code is to add the scroll for my div kindly check the following link
if you can help click here
z-index property only works on positioned elements. So try adding position: relative; to your selector.
Source: https://www.w3schools.com/cssref/pr_pos_z-index.asp
For adding z-index on specific part or div, you have to clarify the z-index of overlay area.For eg. if you want to add z-index for image card over parent div then you have to add z-index:-1 for parent div and for child element z-index:1;
I've tried using the scenario in the link below too show hidden text when mouse over text. It works fine with text but what my client is needing is to hide the webbot HitCounter and show it when they place the mouse over. Any help would be greatly appreciated.
Show hidden text on hover (CSS)
<div id="DivForHoverItem">
<div id="HiddenText"><p class="auto-style4">
<!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
</div>
</div>
CSS Code:
/* Div for hover item */
#DivForHoverItem {
height: 50px;
width: 300px;
background-color: black;
text-align:center;
}
#HiddenText {
display:none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
Remember that display:none "removes" element (div do not occupy space) from layout. So You have nothing to point with cursor (without creating another wrapping div/divs with fixed size, or gettinng into js and conditions of another element) to start the hover effect.
So maybe outer wrapper div?
Maybe visibility: hidden in place display:none?
Maybe Changing the Z-Index?
Or another div on top of counter (covering it with background solid color) with alpha transparency change on hover (even fading out css animation) ?
Hello I am trying to make an invisible button (still functional and clickable), because my buttons styles are embedded in the background and I don't want to slice them, and do it all from beginning.
So I just want to make a button, put it on the part of the background where the button should be and make it invisible so the background button image can be seen and clicked.
Any suggestions? Thank you very much!
you must use the following properties for a button element to make it transparent.
Transparent Button With No Text
button {
background: transparent;
border: none !important;
font-size:0;
}
Transparent Button With Visible Text
button {
background: transparent;
border: none !important;
}
and use absolute position to position the element.
For Example
you have the button element under a div. Use position : relative on div and position: absolute on the button to position it within the div.
here is a working JSFiddle
here is an updated JSFiddle that displays only text from the button.
You can use CSS to hide the button.
button {
visibility: hidden;
}
If your <button> is just a clickable area on the image, why bother make it a button? You can use <map> element instead.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Give the height and width with respect to the image in the background.This removes the borders and color of a button.You might also need to position it absolute so you can correctly place it where you need.I cant help you further without posting you code
To make it truly invisible you have to set outline:none; otherwise there would be a blue outline in some browsers and you have to set display:block if you need to click it and set dimensions to it
HTML
<input type="button">
CSS
input[type=button]{
background:transparent;
border:0;
}
Use CSS background:transparent; to your button/div.
JSFiddle