Simple css tooltips12/18/2023 For now, it has a simple JS detection for < 420px wide and switches the left/right classes to the default (top). A second bottom option includes a pointer. If you need left and right tips, you may run into device edges and will need to enhance the CSS and/or JS to respond to the viewport. The tooltip hover can be placed to the left, right, or bottom of an element. Posting this version in hopes someone else finds it useful – the credit goes to the original coder for the CSS heavy lifting. Since :before and :after handle the display of the tooltip, the CSS transitions are necessary (jQuery can’t target those pseudo elements) and although moved in the stylesheet, the transitions otherwise remain the same. Add jQuery (we’re using this anyway – other JS methods should work too).Main changes to the original version above: In the link that follows, click to see the revised tooltips in action: For that, we’ll need a dash of javascript. Also, since hover states are less utilized these days, we wanted to switch the event to a click for all-purpose compatibility. However, as pure CSS there was no way to toggle off the tooltips on iOS. In searching for an existing simple solution, we came across this really nice example on CodePen: Maybe there are problems that I haven’t thought of, but after reviewing the bugs in the other solutions, here’s what I’ve come up with:īulletproof CSS Tooltip by Louis Lazaris ( CodePen.During beta testing for MemLife, we wanted to test tooltips vs. I have no idea if this solution is bulletproof. But I think it’s best to use em units for this, and you’ll see this in the example below. This seems like a good way to do it because sometimes you don’t know the size of the element that the tooltip references. To avoid this problem, some have used white-space: nowrap on the links, but I don’t think that’s good, especially if you have links that are longer than one or two words.Īnother thing I’ve noticed with a lot of tooltip solutions is that they rely on percentages to position the tooltip. The following directions can be set by using the respective CSS. This ensures that the tooltip doesn’t appear in the wrong place (for example, when the link spans two lines). In this example, the tooltips based on pure CSS are displayed in all available directions. So although it might be nicer looking when the tooltip appears in the middle or at the end of the element it’s referencing, a better solution is to make the tooltip appear near the top left corner of the link. So something like “data-tooltip” is fine, but you can call it whatever you want, as long as it begins with “data-“.īecause pretty much all tool tips are positioned absolutely, this can cause problems if the tooltip is not positioned in a bulletproof manner. Code Snippets With pseudo elements, the triangle hack, and data attributes, I created a simple tooltip system in HTML and CSS. In short, this is a custom attribute that you create that starts with “data-“. A simple CSS tooltip This is my minimalist approach for tooltips in HTML and CSS only. So instead of using the title attribute, the best option is HTML5 data attributes (John Resig has a good post on the subject). Not a huge problem, but I think it’s redundant and sloppy looking. This will cause the tooltip to appear in two different places. But if you use a custom method, and you’re grabbing a value from an attribute, then you don’t want to use the title attribute. Now, if you want a completely cross-browser tooltip, your best bet is to just use a plain old title attribute on the link element, and forget about anything custom. The next point is about the “title” attribute. So instead we can use a pseudo-element that grabs the value of an attribute on the element being hovered over (more on this below). Having the extra text in the HTML that way would (I assume) have accessibility problems. This is not necessary and, in my mind, is an obsolete method (even though technically it works in more browsers). Many of the pure CSS tooltips solutions utilize an extra element that is initially hidden. Let’s summarize why these points are important.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |