[{"data":1,"prerenderedAt":421},["ShallowReactive",2],{"project-11011420":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":35,"aspects":36,"strip":47,"post_text":48,"what":49,"said":70,"maker_in_thread":206,"shape":213,"grid":218,"attempts":379,"same_week":386,"maker_shows":215,"maker_hidden":413,"reader_version":414,"card":415},"11011420","Hint.css v2.0","Pure CSS tooltip library","title","Show HN: Hint.css v2.0 – Pure CSS tooltip library","http:\u002F\u002Fkushagragour.in\u002Flab\u002Fhint\u002F","kushagragour.in","chinchang",1454330850,2016,253,62,92,2264,5,"legend","dev_tools","css tooltip library","library",[24,25,26,27,28],"css tooltip","pure css","tooltip library","data-hint","css only tooltips","mixed",-0.167,{"positive":32,"neutral":33,"mixed":34,"critical":33},8,15,3,41,{"execution":37,"idea":39,"design":42,"performance":45,"docs":46},{"positive":38,"critical":18},4,{"positive":40,"critical":41},0,2,{"positive":43,"critical":44},1,7,{"positive":41,"critical":43},{"positive":40,"critical":40},[18,34,18,43,43,43,34,40,40,40,43,43,43,43,40,40,40,40,40,40,40,43,34,40,43,18,18,34,34,34,18,18,34,43,34,34,43,34,34,34],null,{"problem":50,"audience":48,"pricing":48,"motivation":48,"time_to_build":48,"stack":62,"openness":67,"stage":68,"team_size":69},{"value":51,"source":52,"evidence":53},"Showing tooltips on elements without JavaScript","inferred",[54,58],{"id":55,"by":56,"text":57},"11011627","sylvinus","For those wondering, the main trick is here: https:\u002F\u002Fgithub.com\u002Fchinchang\u002Fhint.css\u002Fblob\u002Fmaster\u002Fhint.css#L65 This creates a pseudo \":after\" element with content set to the value…",{"id":59,"by":60,"text":61},"11011623","billyhoffman","An interesting hack in minimalism. They accomplish being able to display user defined text in tooltips without JS by using content(data-attrib) in the CSS rule. I was not away…",[63],{"value":64,"source":52,"evidence":65},"CSS",[66],{"id":55,"by":56,"text":57},"open_source","launched","unknown",{"praise":71,"objections":97,"requests":139,"questions":164,"alternatives":184},[72,82],{"value":73,"source":74,"evidence":75},"Clever use of CSS attr() to build tooltips without JavaScript","commenter",[76,77,78],{"id":55,"by":56,"text":57},{"id":59,"by":60,"text":61},{"id":79,"by":80,"text":81},"11014325","ahoy","Very clever. I didn't know you could reference attributes in css.",{"value":83,"source":74,"evidence":84},"Small file size, about 1.5KB minified and gzipped",[85,89,93],{"id":86,"by":87,"text":88},"11011748","Smudge","> Small file size. Only 1.5KB minified and gzipped! Well I guess everything is relative...",{"id":90,"by":91,"text":92},"11011814","oneeyedpigeon","In the age of multi-megabyte webpages [1], 1.5KB is definitely small. [1] http:\u002F\u002Fidlewords.com\u002Ftalks\u002Fwebsite_obesity.htm",{"id":94,"by":95,"text":96},"11012465","Cthulhu_","Compared to previous (JS-heavy solutions), yes.",[98,113,124],{"value":99,"source":74,"evidence":100},"Not accessible to screen readers or keyboard users",[101,105,109],{"id":102,"by":103,"text":104},"11011646","10dpd","How accessible is this approach to screen reader users and people who rely on keyboard interaction alone? Edit: A quick test reveals these tooltips are not accessible at all.",{"id":106,"by":107,"text":108},"11011669","robin_reala","Not with keyboard interaction: they’d have to add :focus rules and tabindexes to the parent. Screen readers sometimes read out generated content. Léonie has more info:…",{"id":110,"by":111,"text":112},"11011807","kdamken","Unfortunately that's a major deal breaker for using this for any professional project. Making things accessible isn't really that hard, and it makes the lives of people who need…",{"value":114,"source":74,"evidence":115},"Tooltips may clip in overflow hidden containers and do not reposition near viewport edges",[116,120],{"id":117,"by":118,"text":119},"11014094","grumblestumble","I haven't verified this, but I really doubt that this, or any other CSS-only solution, will work with elements constrained in an `overflow: hidden` block with a fixed height too…",{"id":121,"by":122,"text":123},"11012479","z3t4","The tooltip should change position if it's rendered outside the visible area!",{"value":125,"source":74,"evidence":126},"Blurry text during scale animation and a gap at some zoom levels",[127,131,135],{"id":128,"by":129,"text":130},"11011533","ryannevius","On one of the very first tooltips at the very top of the landing page (the download button), my Chrome v48.0.2564.97 browser renders a very thin gap between the triangle of the…",{"id":132,"by":133,"text":134},"11011712","ohitsdom","What is going on when the tooltip first shows as blurry, then becomes clear? The most obvious example is hovering over the download button. Does CSS scale transform always behave…",{"id":136,"by":137,"text":138},"11016762","famfamfam","I am seeing blurry text on every tooltip as it animates in, not just the one on the download button. I assume it is related to ClearType rendering the text on non-pixel…",[140,147,157],{"value":141,"source":142,"evidence":143},"Keyboard accessibility support","maker",[144],{"id":145,"by":11,"text":146},"11011885","Keyboard accessibility should arrive soon: https:\u002F\u002Fgithub.com\u002Fchinchang\u002Fhint.css\u002Fpull\u002F111",{"value":148,"source":74,"evidence":149},"Use aria-label for accessibility",[150,154],{"id":151,"by":152,"text":153},"11012598","prezjordan","To address the screen-reader concerns: As a proof of concept I was able to swap out `data-hint` for `aria-label` without issue:…",{"id":155,"by":11,"text":156},"11012492","Yeah, that should bring in some accessibility. Right now the library uses `data-hint` attribute. We could use `aria-label` attribute instead!",{"value":158,"source":74,"evidence":159},"Touch device support",[160],{"id":161,"by":162,"text":163},"11012721","tkinom","Is there any demo of adding hint to \u003Ca href....>..\u003C\u002Fa>? In desktop browser, I can see the hover events can trigger the hints. How to make it work on touch browser? Touch should…",[165,180],{"value":166,"source":74,"evidence":167},"Which browsers are supported",[168,172,176],{"id":169,"by":170,"text":171},"11011593","porker","Good work! > \"Works in all modern browsers.\" It'd be really helpful if you listed which browsers it's been tested to work in.",{"id":173,"by":174,"text":175},"11011675","patates","I think it is IE9+, as I understand from here: http:\u002F\u002Fcaniuse.com\u002F#feat=css-gencontent",{"id":177,"by":178,"text":179},"11011678","laumars","They do on Github[1] \"hint.css works on all latest browsers, though the transition effect is supported only on IE10+, Chrome 26+ and FF4+ at present. ``` * Chrome - basic +…",{"value":181,"source":74,"evidence":182},"How tooltips behave on touch devices",[183],{"id":161,"by":162,"text":163},[185,192,199],{"value":186,"source":74,"evidence":187},"bevacqua\u002Fhint",[188],{"id":189,"by":190,"text":191},"11012383","bevacqua","Here's an alternative I wrote a long time ago: https:\u002F\u002Fgithub.com\u002Fbevacqua\u002Fhint - Stylus or plain CSS - Comes with a bit of JavaScript ``` - Auto-docks to browser window edges -…",{"value":193,"source":74,"evidence":194},"html-hint fork allowing HTML content",[195],{"id":196,"by":197,"text":198},"11017399","steveax","There's also a fork that allows HTML content: https:\u002F\u002Fgithub.com\u002Fistarkov\u002Fhtml-hint",{"value":200,"source":74,"evidence":201},"Native title and alt attributes",[202],{"id":203,"by":204,"text":205},"11012782","id","Don't we already have a title (or alt) attribute for \u003Ca>, \u003Cimg>, \u003Cabbr> and other HTML elements?",{"comments":18,"answered":41,"key":207},[208,209,210],{"id":155,"text":156},{"id":145,"text":146},{"id":211,"text":212},"11011879","In the 'download' button case, the download button is itself scaling up which makes the tooltip inside it scale up too. Thats the reason of blur (which comes with scaling elements)",{"commenters":214,"max_depth":215,"maker_replies":18,"first_comment_mins":216,"lifespan_hours":217},51,6,29,14,[219,221,225,228,229,231,232,233,234,237,240,243,246,248,250,251,253,257,259,262,266,269,272,276,279,282,285,287,290,292,295,298,301,304,307,311,312,314,315,317,319,322,323,325,327,328,330,331,332,336,339,341,343,348,351,353,357,360,362,365,368,372,376],[55,40,18,220,56,40],"project\u002Fpositive\u002Fexecution",[222,40,34,223,224,40],"11012271","project\u002Fneutral\u002Fidea","aidos",[226,40,34,223,227,40],"11016461","addedlovely",[79,40,18,220,80,40],[117,43,43,230,118,40],"project\u002Fcritical\u002Fexecution",[102,41,43,230,103,40],[106,41,43,230,107,40],[110,41,43,230,111,40],[235,41,34,236,91,40],"11011819","project\u002Fneutral\u002Fexecution",[238,41,34,236,239,40],"11011834","wodenokoto",[241,41,40,242,107,40],"11011902","other\u002Fneutral\u002Fdocs",[244,41,40,242,245,40],"11012010","ehnto",[247,41,40,242,152,40],"11012090",[155,41,40,249,11,43],"maker\u002Fpositive\u002Fexecution",[145,41,40,249,11,43],[151,41,34,252,152,40],"project\u002Fmixed\u002Fexecution",[254,41,43,255,256,40],"11016902","project\u002Fcritical\u002Fidea","danielnixon",[128,34,43,258,129,40],"project\u002Fcritical\u002Fdesign",[260,34,43,258,261,40],"11011540","tw30tw",[263,34,34,264,265,40],"11011612","project\u002Fneutral\u002Fdesign","Bhullnatik",[267,34,34,264,268,40],"11011845","th0br0",[270,34,43,258,271,40],"11011900","nailer",[273,34,40,274,275,40],"11011980","commenter\u002Fneutral\u002Fnone","ToastyMallows",[277,34,40,274,278,40],"11012178","elros",[280,34,40,274,281,40],"11012254","continuational",[283,34,40,284,95,40],"11012457","other\u002Fneutral\u002Fnone",[286,34,40,274,271,40],"11012576",[288,34,40,274,289,40],"11013879","91bananas",[291,34,40,274,271,40],"11015290",[293,34,40,274,294,40],"11013343","eximius",[296,34,40,274,297,40],"11014936","mbrock",[299,34,40,274,300,40],"11013408","ww520",[302,34,40,274,303,40],"11013569","colmvp",[305,34,43,258,306,40],"11012150","otsdr",[308,34,18,309,310,40],"11013758","project\u002Fpositive\u002Fdesign","USAnum1",[132,38,43,258,133,40],[211,38,40,313,11,43],"maker\u002Fneutral\u002Fdesign",[136,38,43,258,137,40],[86,18,34,316,87,40],"project\u002Fmixed\u002Fperformance",[90,18,18,318,91,40],"project\u002Fpositive\u002Fperformance",[320,18,40,274,321,40],"11012077","elcct",[94,18,18,318,95,40],[189,215,40,324,190,40],"other\u002Fneutral\u002Fidea",[169,44,34,326,170,40],"project\u002Fneutral\u002Fdocs",[173,44,34,326,174,40],[329,44,34,326,107,40],"11011710",[177,44,34,326,178,40],[59,32,18,220,60,40],[333,334,18,249,335,40],"11012659",9,"bosdev",[337,334,40,338,11,43],"11014002","maker\u002Fpositive\u002Fnone",[161,340,34,236,162,40],10,[121,342,34,236,122,40],11,[344,345,43,346,347,40],"11012936",12,"project\u002Fcritical\u002Fperformance","esailija",[349,345,40,350,11,43],"11013048","maker\u002Fneutral\u002Fperformance",[196,352,34,223,197,40],13,[354,217,34,355,356,40],"11012240","project\u002Fmixed\u002Fdesign","starikovs",[358,33,43,230,359,40],"11012785","balls187",[203,361,43,255,204,40],16,[363,361,34,223,364,40],"11012864","ldjb",[366,367,43,258,294,40],"11012627",17,[369,370,18,338,371,40],"11012641",18,"StripeNoGood",[373,374,34,264,375,40],"11012330",19,"vog",[377,374,40,274,378,40],"11012357","dangrossman",[380,385],{"id":381,"t":382,"points":383,"comments":384},"5164029",1359985792,236,55,{"id":4,"t":12,"points":14,"comments":15},[387,392,397,401,404,408],{"id":388,"name":389,"points":390,"category":391},"11019922","3D Vector Graphics",441,"languages",{"id":393,"name":394,"points":395,"category":396},"11027371","Plain Email",322,"productivity",{"id":398,"name":399,"points":400,"category":396},"11026096","cv-maker",255,{"id":402,"name":403,"points":383,"category":396},"11025382","Turtl",{"id":405,"name":406,"points":407,"category":20},"10996765","Ship",219,{"id":409,"name":410,"points":411,"category":412},"11011280","Megabite",211,"creative",false,"v2",{"id":416,"name":5,"line":6,"ai":413,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":417,"top":18,"kw":418,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":419,"url":9,"mix":420,"praise":73,"objection":99,"sub":21},11011420,-0.17,[24,25,26,27,28],"5351113000111100000001301553335531331333",[32,33,34,33],1793990937219]