Issue
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.
Solution
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 left of the element containing text. I only appear when hovering over the element with text, not the surrounding container.
</div>
</div>
</div>
Example RE: Question on Different Sizing/Styling Text Element
.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;
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'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 element containing text. I only appear when hovering over the element with text, not the surrounding container.
</div>
</div>
</div>
Example RE: Reposition Tooltip to 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 of the surrounding container and the left of the tex, and I'm given some width so I'm mostly on top of the text (that is if the content isn't too big 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, that the tooltip doesn’t 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.
Answered By - abgregs
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.