Is it possible to show a tooltip when the content can't fit inside the element? Using title attribute shows the tooltip regardless.
I've googled some examples, but there was nothing about tooltip showing conditions.
In this example I want to see the tooltip only when the text is too long:
.limiter
{
width: 100px;
}
.container
{
margin: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
<div class="limiter">
<div>Hover cells:</div>
<div class="container" title="short text">short text</div>
<div class="container" title="short">short</div>
<div class="container" title="long text long text long text">long text long text long text</div>
</div>
It is possible to use JavaScript.
Limitations:
I don't know in advance, what text a cell will contain (basically it's a template for angularjs)
I don't know in advance, what number of letters can it display
User can resize cells
Related
I have a string of some markdown text in it ("**Bold** *Italic*") and I need it to be rendered in React. This itself is simple enough, I can just use the react-markdown module and voila.
I need the text to only span 1 line, if more than that then it should be truncated with an ellipsis. For this on its own I would use react-truncate.
The problem is that when I combine the use of these 2 modules, all of the markdown formatting (bold and italics) is gone. It just renders as plain text in a span.
How do I render markdown whilst truncating it in React?
This is my code so far:
<Truncate lines={1}>
<ReactMarkdown source={"**Bold** *Italic*"} />
</Truncate>
If it's one line, Trauncuate might be an overkill, i suggest a css solution :
#test{
width: 300px;
padding: 10px;
border: 1px solid #aaa;
resize: both;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div id="test" >
Hello world <b>Hello world</b> Hello world <i>Hello world</i> Hello world <b>Hello world</b>
</div>
I'm following this tutorial: http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_transition
But I want to get the "Hover Over Me" text right next to the "When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible."
For example, the ideal output would be:
When you move the mouse over the text below, the tooltip text will
fade in and take 1 second to go from completely invisible to visible.
Hover over me
instead of
When you move the mouse over the text below, the tooltip text will
fade in and take 1 second to go from completely invisible to visible.
Hover over me
The tool tip should obviously still show up on hover. What part of the CSS would I have to change?
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
What about changing the structure a little put the Hover over me text in a <span> and not a <div> and then put that inside the <p> tag like this:
<body style="text-align:center;">
<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible. <span class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</span></p>
</body>
Here is a JS Fiddle showing it
Let me explain a little as well: in HTML a <p> tag is a block element and, thus, it cannot allow other block elements inside of it (such as <div>). The <span> tag is not block, it is inline, allowing you to place it in side of a <p> tag. Often times, we use <span> tags when we want to edit text inside of a <p> tag because it doesn't break the text in the <span> tag into a new line like a <div> or a second <p> tag would do (as you saw in your example.
The reason this is on two lines is that the paragraph tag enclosing the instructions is a block level element. Meaning it will start and end a new line. You could set the display of this element in your css as inline and it should show text as inline.
p{
display: inline;
}
Hello there I have an application that shows data in a grid fashion here is one of the "blocks" out of the grid below. Within the Divs that fill out data from a JSON file and fills the divs.
The data is limited to 4 characters (a number between 0 and 9999) for all the items. However when there is 1 character in there it looks too small because i have to keep the font size fairly small so when there is more than 1000 it doesn't overflow.
My question is what would be the best way to automatically adjust the font size for each div independently so that it always fit's at a maximum size
<div class="box">
<div class="Top">ZW01025</div>
<div id="ZW01025" class="Midbox">
</div>
<div id="ZW01025b" class="Midbox">
</div>
<div id ="ZW01025C" class="BottomboxPercent">
</div>
<div id ="ZW01025D" class="BottomboxPercent">
</div>
<div id ="ZW01025p" class="Bottombox">
</div>
</div>
He is a fiddle of the full thing, it doesn't really fit in Js fiddle well http://jsfiddle.net/RYU54/3/
If you are ok with using a JavaScript solution I would check out flowtype.js
http://simplefocus.com/flowtype/
Add font size in the .Top css class, lik this:
.Top{
height: 20%;
width: 90%;
margin: 1px auto;
background-color: #596163;
text-align: center;
color: white;
font-size: 30px; /* added */
font-size: 3.5vw; /* added */
...
}
I made a script to automatically scale text to fit the surrounding div, it should work in your case:
https://github.com/jeremiahrose/perfectFit.js
I was wonder how I can create a text input that has an auto-adjustable height so that it gets taller to fit your text? For example, if I start typing a paragraph, it expands from a few lines to fit the paragraph.
Here's what I've currently got:
#commenttext {
width: 413px;
min-height: 22px;
max-height: 100%;
display: inline;
font-size: 11px;
color: #777777;
word-wrap: break-word;
font-family: "Open Sans", "Tahoma";
top: 7px;
position: relative;
left: 7px;
padding-left: 7px;
}
<form action="" method="POST">
<input type="text" id="commenttext">
</form>
But that's just a normal text area.
How can I make that text area get taller as I type more lines? Do I need Javascript?
Here's a CSS-only solution: Use a div with contenteditable set to true.
<div contenteditable="true"
style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
See this JSFiddle for an example.
EDIT:
If you want to be able to submit this text, you'll need a little bit of javascript to put it into an input field. Add this to your form:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" contenteditable="true"
style="width:200px;min-height:20px;border:1px solid #ccc;"></div>
</form>
This will put the contents of the div into a hidden input field so it will be submitted to the server through POST with anything else.
See this (updated) JSFiddle for an example.
Take a look at this post here:
Creating a textarea with auto-resize
It has all the code needed (HTML and Javascript) to accomplish what you want.
I've been trying this for a while with no luck. I have a parent <div> tag (lets say it's set to 300px in width). I am trying to add a series of smaller <div> tags to go inside the parent, and be placed side by side until the edge of the parent <div> where the next child <div> will then be placed on the "next line". Basically, I am trying to make these child <div> tags act like words being word wrapped.
I have googled this like crazy, but I can't find any way to really do this without calculating the sizing of everything and manually placing the child <div>'s with absolute coordinates, which I can do, but I'd like to avoid. Sp first, I was wondering if there was a css or javascript approach that could supply the same behavior.
The number of child divs is variable, and I am using C# server side code to calculate them. But it shouldn't matter which server language I'm using.
Thanks!
Try this:
Approach 1
Use display: inline-block;
HTML:
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
html, body { height: 100%; }
#parent {
background-color: lightblue;
width: 300px;
height: 100%;
}
.child {
width: 50px;
height: 100px;
display: inline-block;
background-color: red;
}
Demonstration.
<hr>
<h2>Approach 2</h2>
Use float: left;
HTML:
<div id="parent">
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
</div>
CSS:
html, body { height: 100%; }
#parent {
background-color: lightblue;
width: 300px;
height: 100%;
}
#child {
width: 50px;
height: 100px;
float:left;
background-color: red;
margin: 2px;
}
Demonstration.
Floating is a totally reasonable way to do it.
Alternatively you could use elements with CSS display:inline or display:inline-block . Both are automatically positioned by the browser as you describe, side-by-side and "wrapping" when they run out of space. The difference is that inline elements don't give you as much control over padding, dimensions etc., whereas inline-block elements give you all the perks of a display:block element. However IE6 does have some difficulty with inline-block elements, as I recall, which is irritating.
If you want to use inline elements, just switch your child divs to spans: spans are inline by default, no further work necessary. However there are no elements that display inline-block by default, so if you need to use this you may as well keep your divs.
Hopefully you have some options there.
Why don't you just float: left the child divs?