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
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 am trying to implement a arrow-headed div. Below is the part of the code that is relevant to the post/question. I have been trying to figure out how to get this done for a while now but no success.
I have a grandparent div, a parent div with a child as follows
<div className="main-segment-container">
<div className="panel panel-default segment-select-box">
<div className="panel-header segment-select-box-header">MAIN SEGMENT</div>
<div className="panel-body segment-select-box-body">
<div className=has-subsegments'>
<input type="checkbox" className="form-check-input" value={checkedSegment.category_id} onChange={this.segmentChecked} />{' '}
<label className="form-check-label">{checkedSegment.name}</label>
</div>
</div>
</div>
</div>
Here is what I am trying to achieve (notice the arrowhead):
I am able to achieve this with this css:
.main-segment-container{
width: 100%
}
.has-subsegments{
background-color: #215C64;
width: 100%;
color: #fff;
position: absolute;
height: 30px;
}
.segment-select-box {
border-radius: 3px;
width: 100%;
/* max-height: 400px; */
/* overflow: scroll; */
position: relative;
}
.segment-select-box-body{
width: 100%;
max-height: 400px;
overflow: scroll;
padding: 0px;
display: inline-block;
}
.has-subsegments::after{
content: "";
margin-top: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
border-left: 21px solid #215C64;
width: 0;
height: 0px;
right: -20px;
top: 50%;
}
Problem:
When I use the css above, the .has-subsegments element seems to be at a fixed position when I scroll. Like this:
Question
How do I implement scroll without removing the element from the normal position?
Note:
When i remove scroll from .segment-select-box-body class, everything works perfect but the children list becomes very long, therefore a scroll is needed.
adding position: relative; to .segment-select-box-body class makes the :after pseudo-element invisible.
EDIT
See JSFIDDLE here : https://jsfiddle.net/uuwhndgu/16/
EDIT
Thanks for posting the jsfiddle. I don't think, what you're trying to achieve is possible the way you are trying to do it.
I updated the fiddle with a suggested workaround/fix: https://jsfiddle.net/uuwhndgu/34/
what I did, is giving the wrapping col a little more width (you probably would have to either increase the col to .col-md-3 or decrease the width of .segment-select-box a little. You probably need to do the latter anyway), a max-heightof 200px and a overflow-y: scroll;. I set the width of .segment-select-box to 90% and changed position: absolute;of .has-subsegments to position: relative;. I don't know if this helps you but I BELIEVE, that there aren't many ways to achieve what you are trying to achieve.
Original answer
I am not quite sure how you intend this thing to behave. But if the highlighted entry (the one with the arrow) just ought to stay where it was, I think you can simply replace position: absolute; with position: relative; in your .has-subsegments class. Now, I wasn't able to recreate this anything close to perfectly, because it's a react app, but still, you should get the idea:
with position: absolute; on .has-subsegments
with position: relative; on .has-subsegments
new to webdev so bear with me. I am developing a prototype of a Messaging Application, I have most of the basics worked out and I'm trying to add the little touches to make it feel nicer to use. I'm trying to make it so that when an individual message is hovered over, the time that message was sent will slide out from the message.
Here is my code at the moment: http://codepen.io/RBrNx/pen/GNzOWr
(Note: Click on "Toni" again and his message will appear, small bug. You can also send messages from the text box).
Now here are some images showing what I mean:
http://imgur.com/a/elB04
Ideally I think the 2nd one would look better.
I tried to implement it by adding a span inside the bubble like so:
<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>
.hover-time{
position: relative;
left: 60px;
}
But that made the inside of the bubble stretch to account for the Span.
How can this be done?
EDIT: Thanks to Antidecaf I managed to get the left side working and figured out the right hand side as well. Here is the CSS I added:
.container .right .bubble.you .hover-time {
display: none;
position: absolute;
left: 110%;
color: #999;
width: 100px;
}
.container .right .bubble.me .hover-time {
display: none;
position: absolute;
right: 90%;
color: #999;
width: 100px;
}
These deal with the left hand messages (from the person you are messaging) and the right hand messages (from me). I also added:
.container .right .bubble.you:hover .hover-time{
display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
display: inline-block;
}
So that the hover-time span is shown on hover.
You can do this with the markup you suggested by positioning .hover-time relative to .bubble. To do this, add position: relative to .bubble and position: absolute to .hover-time. Here's some more info on the technique.
<div class="bubble you"><span class="hover-time">13.45</span>Test Message</div>
CSS for positioning timestamp to the right:
.bubble {
position: relative;
}
.hover-time {
position: absolute;
left: 110%;
color: #999;
}
Same approach goes for positioning it to the left, but in this case you'll need to add a bit of margin to the bubble in order to free up space for the timestamp:
.bubble {
position: relative;
margin-left: 50px;
}
.hover-time {
position: absolute;
left: -50px;
color: #999;
}
<style>
.hover-time {
position: relative;
left: 60px;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Works for me. You'll probably want to spice it up a little with some transform or other fancy anim stuff.
EDIT: Perhaps you meant like so:
<style>
.bubble {
border: 1px solid #ccc;
width: 300px;
}
.hover-time {
float: right;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Border and width just to have a visual guide.
Maybe I'm misunderstanding, but are you styling the DIV as the speech bubble, then taking the span inside the div and telling it 'but not you buddy, you are special'?
If so, isn't it cleaner and less headaches to put your text message in a span also, styling the span as text bubble, and keeping the div as an invisible structural element?
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"
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
}