I have a requirement where i have multiple tables in a page and when i mouse over on one column it has to show tooltip at the top position with some data in it. Issue is tooltip is showing on the top of the page but at some random position.
Please suggest. Thanks in advance.
Try to change CSS to:
a.tooltip:hover span {
position: absolute;
bottom: 10px;
display: block;
width: 240px;
color: white;
border: 0px solid black;
padding: 5px;
}
See updated jsFiddle -> http://jsfiddle.net/Afa3f/3/
Related
I'm still a bit new to HTML and CSS and need some help.
I have a div and inside that, I have an telephone input element. The input is using a library that allows the user to select a country code.
The problem is, that when I click on the country code it stays inside the parent div, which is not what I want.
As you can see on the image the desired behaivour is to have the red box outside of the blue one. I have set the parent elements position property to 'relative' (the blue box) and the country code container (the red one) to 'absolute', but it doesn't help. I've also tried changing the z-index without luck.
The red box as shown on the picture has the following styles:
.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
padding: 0;
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
background-color: white;
border: 1px solid #CCC;
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
And the blue one:
.drag-container {
display: grid;
max-height: 600px;
overflow-y: auto;
padding: 10px;
position: relative;
}
I can almost get the desired output by setting position to 'fixed', but thats not good when resizing the page as it stays in its position.
I think the problem is in .drag-container class ... remove overflow:auto or change it to overflow:unset
you can try using the select2.js plugin for select, it creates a dropdown at the end of the body element regardless of the parent's location
I try to have a sticky navbar with a dropdown-menu.
But the dropdown-menu is not showing.
I player around with this for too long now i guess.. and the biggest problem: in jsfiddle the dropdown-menu is now showing at all. However at my pc the dropdown-menu is showing as long as the 'sticky' class is not added, then becomes invisible, too.
Here in stackoverflow I read about overflow:hidden in the navbar causing the problem. Deleting that makes the dropdown-menu work but the navbar disappears.
-> dropdown-menu invisible
https://imgur.com/JYcswYq
-> navbar not shown
https://imgur.com/Gk5P6gN
I assume the error somewhere here but couldnt figure it out..
#navbar{
overflow: hidden;
font-size: 25px;
background-color: #333333;
}
main{
padding-top: 30px;
padding-bottom: 30px;
}
.dropdown-content {
right:0;
display: none;
position: absolute;
background-color: #333333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 48px;
}
There you can find a reduced part of my code. Here the dropdown doesnt show at all. (at my pc it at least shows as long as the sticky-class isnt added)
https://jsfiddle.net/xncjazky/3/
Hopefully i can get any advice on how to make the dropdown-menu popup even with the sticky-navbar.
Thank you.
Remove the overflow:hidden as you found out yourself, and add a height or min-height property to the #navbar selector, like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
min-height: 48px;
}
The problem occurs because of the use of floats in your navigation items.
So another way to solve the issue without setting a fixed height to the #navbar, is changing your navigation items from float:left to display:inline-block.
Like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
}
.lnav{
//float: left;
//display: block;
display: inline-block;
padding: 10px;
text-align: center;
color: #d9d9d9;
text-decoration: none;
cursor: pointer;
}
Hope this helps.
Cheers, Jeroen.
I had the same problem and solved it by placing the navbar inside the "div" element with "position: sticky".
For example:
<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>
Removing overflow: hidden; will cause the background color of the main navbar to disappear if you have the li elements set to float: left; or float: right;.
I managed to fix the issue of content not appearing by making the .dropdown-content div class position: sticky; with the ul.topnav element. Problem is, a new glitch arises as the dropdown list appears with the background color assigned to it, acting as it should, except for one thing. The background color of the topnav list comes down around the dropdown, making the whole list fatter instead of showing a simple lonely dropdown menu.
I'm trying to create a slider whose handle jumps to where one clicks on the track, in addition to being able to be dragged.
Right now, I can drag it; but it doesn't respond when I click somewhere on the track.
PS: Just found the reason. I have another div placed on top of the slider track acting as a progress bar, so that when I click on the slider track, I'm actually clicking the progress bar div. My solution was to set the slider div's background to "transparent" and "z-index: 2" in the css file. Apparently this allows the display of the progressbar div underneath it while preserving the function of clicking on the track.
#audio_slider{
position: absolute;
margin-top: 5px;
height: 12px;
width: 95%;
float: left;
border: 2px solid white;
z-index: 2;
background: transparent;
}
#audio_progress {
position: absolute;
margin-top: 6px;
border: none;
float: left;
width: 95%;
height: 11px;
display:inline-block;
}
JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.
Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn
You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle
Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.
Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle
I want increase title tag size on mouse hover which is in anchor tag. so how can target to title.
kesar sisodiya
The title text is handled by the browser and is not made available to us. You could make your own title text handler with JavaScript, but I don't think that's a very good solution.
You can't increase the size of title property.
You can try using the tooltip provided by jQuery.
jQuery Tooltip example
You could use a div that displayed when you hover over your text.
<div class="custom_title_tag">This is the title</div>
then style it with css
a:hover .custom_title_tag {
background:black;
opacity: 1.0;
}
The first answer was pretty straightforward though. But you could just position it relative to the link title you want to show.
check this, hope it helps you
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#ccc;
}