Pure-CSS-Tooltips | custom HTML5 data attribute and generated content
kandi X-RAY | Pure-CSS-Tooltips Summary
kandi X-RAY | Pure-CSS-Tooltips Summary
An experiment that uses a custom HTML5 data attribute and generated content to turn any element into a popup tooltip
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of Pure-CSS-Tooltips
Pure-CSS-Tooltips Key Features
Pure-CSS-Tooltips Examples and Code Snippets
Community Discussions
Trending Discussions on Pure-CSS-Tooltips
QUESTION
How can I let an arbitrary div
nested within a ul
spill outside of the ul
, which is set to width: 160px;
and overflow-y: hidden;
? I have set it to overflow-y: hidden
because the list needs to be scrollable.
Here is my list:
...ANSWER
Answered 2018-Jun-06 at 22:35First off, you should fix your HTML. Only LI
element can be direct children of UL
elements. The invalid HTML is not likely to give you any issues in this particular case, but you should always strive to write valid HTML as you never know what weird issues might come up.
Next, if you have overflow: hidden
on your parent UL
, then there is nothing you can really do without getting javascript involved. Most "tooltip" types of libraries will handle this for you:
- On hover, make a copy of the DIV which is outside of the
UL
(preferable at the document root - a direct child of theBODY
) - Position the copied DIV so that it appears on top of (or next to) the original DIV - this requires JavaScript and I will leave as an exercise for the OP
- Delete the copy when the user is no longer hovering.
Again, most "tooltip" libraries already do this for you. You might have to write custom CSS to make a tooltip appear on top of and existing element as opposed to next to it.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Pure-CSS-Tooltips
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page