I have been able to create the tooltips for my app. The tooltips content will comes from a DB and it is dynamic. Sometimes it will have two lines of text and sometimes it will have five lines of text. I am struggling to keep the position fixed regardless of what the content is. Is there anything I can try to fix this?
Here is a fiddle demonstrating what I am facing.
.tooltip:hover .dumClass {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
enter code here
CSS
.tooltip{position:relative;}
.tooltip .dumClass {
z-index: 10;
display: none;
padding: 14px 20px;
bottom:20px;
left:0;
width: 240px;
line-height: 16px;
position: absolute;
}
DEMO
Related
I have been able to create the tooltips for my app. The tooltips content will comes from a DB and it is dynamic. Sometimes it will have two lines of text and sometimes it will have five lines of text. I am struggling to keep the position fixed regardless of what the content is. Is there anything I can try to fix this?
Here is a fiddle demonstrating what I am facing.
.tooltip:hover .dumClass {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
enter code here
CSS
.tooltip{position:relative;}
.tooltip .dumClass {
z-index: 10;
display: none;
padding: 14px 20px;
bottom:20px;
left:0;
width: 240px;
line-height: 16px;
position: absolute;
}
DEMO
This question already has answers here:
Keep width when using letter-spacing on hover
(2 answers)
Closed 2 years ago.
i try something when i hover my button. Currenttly that's my code
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
The problem is, when i hover my button, the text expand, the button expand too on the right.
I want to make button not expand (keep original size), only text inside expand and centerized, without put a width size, because i want it as component (I would never know the size of the text.)
ALL in css only.
The only one way i've find is to add a data attribute who come over, but i don't like this way because i reapt my text 2 times.
For you it's possible only CSS ? if yes how ? Thanks a lot
Hide the original button text and use it inside the after/before using below CSS rules.
.btn {
border: solid 1px purple;
color: white;
background: white;
padding: 10px 15px;
text-align: center;
position: relative;
}
.btn:hover::after{
letter-spacing: 1px;
}
.btn::after{
content: 'My Button';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
color: purple;
transition: 0.5s;
}
<button class="btn">My bouton</button>
use absolute positioning on the text element and set it relative to the button element
edit:
.btn {
position: relative;
border: solid 1px purple;
color: purple;
background: white;
padding: 10px 15px;
text-align: center;
transition: .5s;
width: 5em;
}
.btn:hover {
letter-spacing: 1px;
}
span {
//position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
<button class="btn">
<span>My button</span>
</button>
Most easy solution would be to give the button a width... but you don't want that.
As an alternative, you can play with the padding-left and padding-right.
In normal state, you give it some more padding, on hover state, bring it back to 15px.
Note: changing the text length will affect the width, the padding then needs to be adjusted too...
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 20px 10px 19px;
text-align: center;
transition: .5s;
}
.btn:hover{
letter-spacing: 1px;
padding-right: 15px;
padding-left: 15px;
}
<button class="btn">My bouton</button>
As long as the button width is determined by the text width you can only try to manipulate the padding so it fits again.
If its no problem to give the button a width depending on its parent or a fixed width you can try this:
.btn {
border:solid 1px purple;
color:purple;
background: white;
padding:10px 15px;
text-align: center;
transition: .5s;
width: 95px;
}
.btn:hover{
letter-spacing: 1px;
}
<button class="btn">My bouton</button>
How can I get the element in the attached pic?
I need a line + curve to right at top + extension.
I can use div's, span or another idea if you have.
I tried to use 2 divs with round borders. But they don't connect in a pretty way in the corner.
I assume you mean the dot in the corner. It's not particularly robust to change, and it will currently only work on a white background. However, with some SCSS and variables, it would be a lot cleaner.
The biggest issue I have with it is that the surrounding box is required to have a relative position, which might affect layout elsewhere.
.fancy {
position: relative;
padding: 12px;
border: 3px solid #ccc;
border-radius: 8px;
}
.fancy::after {
position: absolute;
bottom: -11px;
left: -11px;
content: "";
height: 14px;
width: 14px;
display: inline-block;
border: 4px solid white;
border-radius: 11px;
background-color: gray;
}
p {
font-family: Arial;
font-size: 14px;
}
<p class="fancy">
Some text
</p>
The padding around the dot is given by the border-width (4px).
The colour of the dot is defined by the background-color.
The places where 11px is used are computed by the border-width + the [height (or width) / 2] and used to keep the dot circular and in the corner.
It's a little ambiguous what you want. If you wanted the title block in there too, then add this:
.fancy {
position: relative;
padding: 12px;
border: 3px solid #ccc;
border-radius: 8px;
}
.fancy .title {
display: table;
margin-top: -2.2em;
margin-bottom: 0.2em;
padding: 6px 8px;
border: 6px solid white;
border-radius: 12px;
background-color: #99ccff;
}
p {
font-family: Arial;
font-size: 14px;
}
<p class="fancy">
<span class="title">A fancy title</span>
Some text with a fancy title.
</p>
I have the following code:
<td>
<div>
<span class ="name">Can be long, can be short</span>
<button>Test</button>
</div>
</td>
td{
white-space: no-wrap;
width:175px;
position: relative
}
button{
position:absolute;
right: 15px;
bottom: 5px;
}
What I get is
I want to show name in one line (even if it is outside the cell), but button should be always in cell (on the same line).
If name is short then it should be right after the name, if not then stick to the right of cell.
I used absolute positioning, but in this case button always sticks to the right of the cell. Not what I need for short names.
So, picture for long name is what I need, but for short name I want yellow button to show near name, not stick to the right side.
Working jsfiddle: https://jsfiddle.net/8kchkucv/
Is it possible to do this with CSS?
Andrew what you are asking is not possible with having only one css for both the buttons, either you can have something like this jsfiddle
https://jsfiddle.net/rohts76/8kchkucv/1
.but
{
cursor: pointer;
padding: 2px 5px;
margin: 5px 0px 0px 5px;
border-radius: 5px;
font-family: 'Pacifico', cursive;
font-size: 10px;
color: #FFF;
text-decoration: none;
background-color: #F2CF66;
border-bottom: 1px solid #D1B358;
text-shadow: 0px -2px #D1B358;
position:absolute;
//right: 15px;
bottom: 5px;
}
.cell{
white-space: nowrap;
width:175px;
position:relative;
}
.cell div{
margin: 0;
padding: .35em;
float: left;
width: 100%;
height: 100%;
}
tr{
background-color: #8db4e3;
background-size: 100% 100%;
}
This code will give you correct thing..
I am trying to create a css tool-tip, the html and css code and also link to fiddle is given below
CHECK MY CODE HERE #JSFIDDLE
HTML
<a class="tooltip" href="#">CSS Tooltips 1
<span>Tooltip1</span></a>
</br>
<a class="tooltip" href="#">CSS Tooltips
<span>Tooltip This is not working for me </span></a>
CSS
.tooltip {
position: relative;
}
.tooltip span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0; height: 0;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.tooltip:hover span {
display: block;
opacity: 0.8;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
}
My issue is only half the text from <span>Tooltip This is not working for me </span> is shown in the corresponding tool-tip. I tried hard but couldn't debug it. Please help.
Thanking You
It's because you have a fixed width. To allow the tooltip to dynamically expand to the content's width remove the width property and set white-space:nowrap to keep the text inline.
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
white-space: nowrap;
height: 30px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/3/
EDIT
As commented bellow, if you want to keep the fixed width, but wants the text to expand in height, remove the height property of the span, and it will grow (also, don't use white-space anymore):
.tooltip span {
position: absolute;
color: #FFFFFF;
background: #000000;
width:140px;
line-height: 30px;
text-align: center;
display:none;
border-radius: 2px;
padding:2px;
}
http://jsfiddle.net/89rwu2db/9/
The point is, setting a specific width or height prevents your element of growing automatically.
You need to change the width property of the second tooltip to fit all the text you want display.
Fixed Fiddle: http://jsfiddle.net/89rwu2db/8/
I added styling to the second span to increase the width.
<span style="width: 250px;">Tooltip This is not working for me </span>