I am using tooltips in bootstrap3.
If you hover over the gap between the lines in the 'Position' column in the table example, the tool tip will disappear. Notice that the mouse pointer changes from arrow to 'text'.
How do I get it so that the tooltip is always displayed when hovering over the cell.
Note that I tried to move the tooltip to the parent td, but this is no good because when hovering it brings in a div which breaks the table formatting.
I believe it should be possible to solve this using CSS.
JSFiddle
Thanks for the answers which got me to the solution.
Either using div (not span) solves the issue, or declaring the following css:
[data-toggle="tooltip"]{
display: block;
}
this happen because the td have a padding of 8 px- to fix it try that:
[data-toggle="tooltip"]{
display: block;
cursor: pointer;
padding:8px;
}
.table>tbody>tr>td{
padding:0;
}
Related
I got this snippet from another question here on stackoverflow:
Snippet
If I put these checkboxes in a table, one checkbox per row, they overlap due to the padding of the labels. Why does this happen? Why doesn't the table cells change their height?
And how can I fix it?
Also, 'width: 100%' does not work for the label
Try
tr {
display:block;
margin:10px 0px;
}
Or without adding table styles
label{
display: block;
}
Also, I made a codepen here
I've just developed a CSS3 button via http://css3button.net/36045 and I was wondering how do I go about adding on hover and on click state changes (i.e defining the correct colours that go with the colour scheme). I don't know much about color codes and would appreciate any help.
Also, what would be the best way of centering the button in CSS?
http://jsfiddle.net/methuselah/snmSq/
#element:hover { color: #fff; }
#element:active { color: #000; }
Have you tried adding :hover to class? Eg:
button.signup:hover {background:red;}
To center I would wrap the button in a div and then center it.
For horizontal centering use margin-left:auto; margin-right:auto, for vertical: margin-top:auto; margin-bottom:auto or simply float:center for all of them but be careful since floating always can create problems
Trying to understand what is going on, maybe someone can explain.
Upon :HOVER I want the entire table content to go transparent. This works for text inside td wrappers. However, text inside a span wrapper doesn't know it should go transparent.
If I remove color:#897 from the span CSS suddenly it does what I want and all text goes transparent. I did try all sorts of CSS tricks to no avail, the table refuses to recognize span as a descendant of table. What is wrong and how to fix it, if possible.
The reason is that you define color in SPAN as table#Factors span & you define your hover table#Factors:hover So color of SPAN still override you table#Factors:hover class color. Write like this:
table#Factors:hover span{
color:transparent;
}
Check this http://jsfiddle.net/AyNg3/
Read this for more http://diythemes.com/thesis/css-specificity-thesis/
jsFiddle
table:hover,
table:hover span{
color: transparent;
background: transparent;
}
You just needed to include a selector for the span as well.
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.
Hi,
I have the following HTML :
<div class="controlTitleContainer ">
<label for="test">Titel</label>
<div class="q"> </div>
</div>
The CSS looks like this
.controlTitleContainer .label
{
font-size: 0.94em;
color: #778899;
display:inline;
}
.controlTitleContainer .q
{
background-image: url("Images/Common/Icons/questionMark_15x14.png");
height: 14px;
width: 15px;
float:left;
}
The problem is that the div will be placed to the left of the label instead of to the right? Why?
I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.
Pleas advice
Edit1: The confusions in the question should now be fixed, sorry for that.
MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.
You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.
But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.
Solution
Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:
float: left; /* <- remove this */
Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.
Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.
You could use the "CSS :after Selector"
Link : http://www.w3schools.com/cssref/sel_after.asp
Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!