jsfiddle:
https://jsfiddle.net/zem4c7wf/
So what I'm trying to do is have a text element with a short width restriction, like it existed within a left pane. (.under & width: 160px in this example)
When you hover over it, another text element will display over it (.over & width: 300px). However, the .over text element does not respect the width I gave it, and instead is going off of it's parent width (.under)
I tried using a z-index and position: absolute, but I can't get the hover text to display fully.
Any help would be greatly appreciated! Thank you!
Note: I can't get JSFiddle to mimic the behavior I'm seeing on my site, but when trying to make the overflow visible, it just adds a horizontal scrollbar rather than bringing the hover text completely to the forefront. (Hover text is the black line)
You can fix this by adding overflow: visible; when the .under div is hovered.
CSS
.under:hover {
overflow: visible;
}
.under {
width: 160px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.over {
visibility: hidden;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -5px;
left: 0%;
z-index: 1;
width: 300px;
}
.under:hover {
overflow: visible;
}
.under:hover .over {
visibility: visible;
}
<div class="under">
Something long and cut off
<span class="over">
Something long and NOT cut off
</span>
</div>
JSFiddle
just remove the overflow: hidden from the class ".under"
Related
I would like to make a custom tooltip for the element, but I have it contained in the box, which doesn't have enough space for the tooltip, so it just crops (well, technically I can scroll to reveal it because overflow is set to auto, but I would like it to be visible without doing that). Is there a way to make it pop over the edge? I have tried using z-index to no result.
Here is what I am talking about:
.box {
width: 100px;
height: 100px;
overflow: auto;
border-style: solid;
border-color: red;
}
.tooltip {
padding-top: 20px;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
display: none;
max-width: 60vw;
min-width: 15vw;
background-color: white;
border-style: solid;
border-color: #1a7bd9;
position: absolute;
z-index: 1000000;
}
.tooltip:hover .tooltiptext {
display: block;
}
<div class='box'>
<div class='tooltip'> Hover for tooltip
<div class='tooltiptext'>
Wow, this is amazing, such an epic tooltip text
</div>
</div>
</div>
Edit: It is important that hover works on the element, not the box that it is in.
Lot of ways to go about it, but if you're just looking for the tooltip to be visible outside the container, you don't need z-index or overflow. You just need to move your tooltip so it comes next in the positioning context inside of a relative container.
Per your comment, since you want the tooltip to appear only when hovering over the text, I'd recommend having your relative container wrap precisely around just the content you want to hover. To illustrate this, I added a border on the outer box versus where you decide to use the relative container.
Then, simply change box:hover to relative-container:hover to target the the appropriate element.
I attempted to organize the HTML and classes to be a bit more semantic and succinct for illustration. Hope that helps!
Example
.box {
padding: 30px;
border: blue solid;
width: 300px;
display: flex;
align-items: center;
}
.relative-container {
position: relative;
}
.box-content {
border-style: solid;
border-color: red;
padding: 10px;
}
.tooltip {
position: absolute;
left: 0;
top: 0;
max-width: 60vw;
min-width: 15vw;
background-color: white;
border: #1a7bd9 solid;
display: none;
}
.relative-container:hover .tooltip {
display: block;
cursor: pointer;
}
<div class='box'>
<div class='relative-container'>
<div class='box-content'>
Hover for tooltip. I have a little padding to give the text some room.
</div>
<div class='tooltip'>
Wow, this is amazing, such an epic tooltip text. I'm aligned with the top of the box content containing text and take up the full width. I only appear when hovering over the box content (red outline), not the surrounding container (blue outline).
</div>
</div>
</div>
Is there a way to make the tooltip above the text?
Example with Tooltip Position Above Text
Sure, just read a bit about position: absolute; - you can position it with respect to the relative container however you like. Using this in combination with how you decide to position your actual content inside the container gives you many options, but you have to keep in mind the dynamic size of the tooltip based on content length, screen/browser dimensions, and location of hover target element and tooltip! :) JS can be handy here.
.box {
padding: 30px;
border: blue solid;
width: 300px;
display: flex;
align-items: center;
}
.relative-container {
position: relative;
}
.box-content {
border-style: solid;
border-color: red;
}
.tooltip {
position: absolute;
left: 0;
/* minus surrounding container padding and border*/
top: -34px;
border: #1a7bd9 solid;
min-width: 15vw;
/* full width accounting for subtracting left/right margins from body in snippet (8x2 = 16) minus border widths and left padding of surrounding container (30 + 8 = 38)* - content is fluid though so up to you how you deal with it if the tooltip content grows bigger, can't just keep it on top without accounting for fact content is dynamic :) */
width:calc(100vw - 54px);
background-color: white;
display: none;
}
.relative-container:hover .tooltip {
display: inline;
cursor: pointer;
}
<div class='box'>
<div class='relative-container'>
<div class='box-content'>
Hover for tooltip. I'm just an element with some text, so only hovering on the text brings up the tooltip.
</div>
<div class='tooltip'>
I'm aligned with the top left of the box content, and I'm given some additional width to overflow it. I'm mostly on top of the text - that is if the content isn't too long and screen size not too narrow! :)
</div>
</div>
</div>
In practice, you may find that placing the tooltip directly over the hovered content is undesirable (if it covers it up, user can't easily reference what they just hovered over while looking at tooltip). Also, as mentioned above, content is fluid and needs space to run, so it will overflow somewhere depending on its length and other factors.
Positioning Context
The takeaway is just to think of your relative container as the reference point for the absolutely positioned tooltip. You generally don’t need or want to style it much in most cases, just give it a position of relative and then let the child element(s) dictate size/positioning of content inside.
More on positioning context here.
Showing/Hiding the Tooltip
The other consideration is whether to remove the tooltip from the document flow (ex. display property) and/or change the visibility or opacity. I've just used display to remove and add the tooltip, which is the simple approach. This ensures that when hovering over the area taken up by the tooltip itself (which may extend outside the original hover text bordered in red) but before hovering on the actual text, the tooltip doesn’t unintentionally show. I also set the tooltip cursor to pointer during hover.
Other approaches probably fall outside the scope of what you're asking, but thought it was worth mentioning there are considerations here.
One way to implement this is to make a ::before pseudo-element that positioned above and next to the text being hovered.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
padding-top: 20px;
border-style: solid;
border-color: red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip::before {
content: "Wow, this is amazing, such an epic tooltip text";
position: absolute;
left: 25%;
bottom: -75%;
display: none;
width: 500px;
background-color: white;
border: 2px solid pink;
}
.tooltip:hover::before {
display: flex;
}
<div class='box'>
<div class='tooltip'>
Hover for tooltip
</div>
</div>
You can change overflow to be visible and it will pop over the edge.
.box {
overflow: visible;
}
I have a bound class inside a div whose data changes dynamically (every day). Some of this data which exceeds the length of the div is overflowing. I want to rectify these overflow errors by implementing a tooltip. I already have ellipsis in place which I implemented using css. I now want to implement a tooltip such that when I move the mouse and hover over the text which has been wrapped using ellipsis a tooltip should show up showing the complete text. I have done a lot of research on this and came up on a dead end since I havent found anything that explains how to get the tooltip to work on data whose length can change dynamically and to display the entire text in it. This is what I have in my code now:
<div class="BoundClass">
<div class="EllipsisOverflow">
<%#Container.DataItem("cClassName")%>
</div>
</div>
.BoundClass
{
font-size: 14px;
color: #fff;
margin-left: -10px;
position: relative;
height: 20px;
margin-bottom: 6px;
}
.EllipsisOverflow
{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.EllipsisOverflow:hover:after
{
content: attr(title);
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
overflow:visible;
text-overflow:clip;
}
This is the CSS for the bound class, and I also applied ellipsis to it
I am looking for a straightforward answer on this so anyone who could help out please do
A basic tooltip can be created like this
HTML:
<div class='parent'>
Content
<span class="tooltip">More Content</span>
</div>
CSS:
.parent {
position: relative;
}
.tooltip {
display: none;
position: absolute;
}
.parent:hover .tooltip {
display: block;
}
Basically, make the tooltip then hide it until you hover on the parent.
You can see a working example with your CSS and code here
I'm not super comfortable with JS , but that seems to be the best way to do this , having a hard time applying other peoples solutions to my scenario.
Want an image to appear when hover over text.
I can get the image to appear on hover, but it appears up way up at top of page, and I am having a hard time getting it to appear in the viewport without indicating what the top margins is. Is that the best way to do it?
So far I have:
<div id="popup">
<div class="large-6 columns">
Bristol Hayward-Hughes <span> <img src="bristol.jpg" alt="Bristol" id="bristol"> </span>
</div>
</div>
and
#popup span {
display: none;
}
#popup a:hover span {
display: block;
position: absolute;
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
#bristol {
position: absolute;
z-index: 1;
margin-top: 100px;
}
If I'm understanding the question correctly, you'll need to place position:relative; in the parent Div: #popup that the image is residing in.
Check this Fiddle for reference: https://jsfiddle.net/rjschie/q87um7wd/2/
For an example: comment the position:relative; line under #popup and re-run the example. You'll see that the Image appears at the top of the window. Then uncomment it, and re-run and it will appear relative to the #popup div.
Please give relative positioning to your span that holds your image.
#popup a:hover span {
display: block;
position: relative; // Changed absolute to relative
//Give top and left position with respect to your anchor tag.
top: 0px;
left: 170px;
width: 400px;
margin: auto;
}
Remove the margin-top from the image tag as well.
#bristol {
position: absolute;
z-index: 1;
/*margin-top: 100px;*/ //Removed margin-top on the image
}
I currently have a div called testLine used for displaying a color triangle effect using css:
#testLine {
width: 0;
height: 0;
padding-bottom: 47.5%;
padding-left: 47.5%;
overflow: hidden;
}
#testLine:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -1000px;
border-bottom: 1000px solid transparent;
border-left: 1000px solid #4679BD;
}
This works fine but the issue is the following:
How can I do to have a text over that triangle? I mean, I've tried with z-index but with no success (css it is not my strong point) and I didn't know if it is even possible to write text on it. What can be other possibilities? (I really don't want to use a resource consuming image for the background). I really appreciate any help that can lead me to a solution.
PrintScreen - http://i.imgur.com/dRCKVNO.jpg
edit, html code:
<div id="testLine"></div>
<div id="text">Testing Testing</div>
use position with alignment...something like:
#text {
position: absolute;
/* this will make div fall out of
page flow anad align to viewports dimension*/
top:0;
/* position to top*/
left:20px;
right:0
/*if needed*/
bottom:0
/*if needed*/
}
working demo
Use z-index with a position property, for example:
#testLine {
position: relative;
z-index: 9999;
}
Without position property z-index not work
i've used overflow property to make the half of div that i don't want hidden , but the whole div gone.
.line {
position: relative;
overflow: hidden;
}
.gl {
position: absolute;
right: 10px;
width: 100%;
height: 5px;
background-color: green;
display: block;
}
.rl {
position: absolute;
width: 100%;
left: 30px;
height: 5px;
background-color: red;
display: block;
}
and this html code
<div class='m1'>
MAIN 1
<div class='line'><div class="rl"></div><div class='gl'></div>
</div>
<div class='des'>kasjfnkvanj</div>
</div>
i want to hide both lines green and red , only the extend part that overflows the parent div but all of them get hidden
any help?
You want hidden overflow green and red background from .line div and this time nothing is showing so you need just fixed parent div ( .line ) width and height.
.line {
position: relative;
overflow: hidden;
width:100px; height:10px;
}
You want to hide green and red background block, but want to show content from div.des. right ? you can do display:none to those div. and if don't want that you can hide them by removing height. If I am understanding this right.
height:0;
check this fiddle.