[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"project-11439879":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":45,"post_text":47,"what":48,"said":77,"maker_in_thread":184,"shape":186,"grid":190,"attempts":331,"same_week":332,"maker_shows":42,"maker_hidden":360,"reader_version":361,"card":362},"11439879","Popper.js","A 3KB library to manage tooltips and popovers","title","Show HN: Popper.js, a 3KB library to manage tooltips and popovers","https:\u002F\u002Fgithub.com\u002Ffezvrasta\u002Fpopper.js","github.com","AndreaScn",1459960655,2016,169,59,183,2264,9,"notable","dev_tools","ui positioning library","library",[24,25,26,27,28],"tooltip","popover","javascript positioning","popper.js","front-end library","curious",-0.311,{"positive":32,"neutral":33,"mixed":34,"critical":18},4,24,3,40,{"design":37,"performance":39,"idea":41,"docs":43,"execution":44},{"positive":38,"critical":32},2,{"positive":40,"critical":38},0,{"positive":42,"critical":38},1,{"positive":40,"critical":40},{"positive":40,"critical":42},[34,40,42,34,34,34,46,46,34,42,40,40,42,34,42,40,42,40,34,46,46,34,34,34,34,34,40,40,34,42,40,34,34,42,34,34,42,42,40,40],5,null,{"problem":49,"audience":57,"pricing":47,"motivation":47,"time_to_build":47,"stack":66,"openness":74,"stage":75,"team_size":76},{"value":50,"source":51,"evidence":52},"Positioning tooltips and popovers next to their reference elements","commenter",[53],{"id":54,"by":55,"text":56},"11439947","FezVrasta","Hi! Popper.js dev here. There are several advantages: - The size is half of Tether (3.5 vs 7); - Popper.js doesn't need any additional CSS in your page; - It works even with…",{"value":58,"source":59,"evidence":60},"Front-end developers building tooltips and popovers","inferred",[61,62],{"id":54,"by":55,"text":56},{"id":63,"by":64,"text":65},"11440753","tyingq","Well, given that the api does this: ``` var popper = new Popper(referenceElement, onBottomPopper, { placement: 'bottom' }); ``` Popper.js already knows that referenceElement is…",[67],{"value":68,"source":59,"evidence":69},"JavaScript",[70],{"id":71,"by":72,"text":73},"11442365","gizmo","This is not a 3kb library for popups, given that the main source file popper.js is 44.6kb and the minimized version is 13.5kb large. I'm assuming 3kb refers to the gzipped size,…","open_source","launched","unknown",{"praise":78,"objections":95,"requests":122,"questions":150,"alternatives":172},[79,84,88],{"value":80,"source":51,"evidence":81},"Lightweight and fast compared to Tether",[82,83],{"id":54,"by":55,"text":56},{"id":71,"by":72,"text":73},{"value":85,"source":51,"evidence":86},"No extra CSS required and works outside body children",[87],{"id":54,"by":55,"text":56},{"value":89,"source":51,"evidence":90},"Clean, well-designed examples site",[91],{"id":92,"by":93,"text":94},"11443401","developer2","I wouldn't recommend the CSS route as you'd be working against a core OS feature. On OS X: System Prefs > General > Show scroll bars > \"Automatically based on mouse or trackpad\";…",[96,104,115],{"value":97,"source":51,"evidence":98},"Bundle size claim of 3KB is misleading, gzip size not stated clearly",[99,100],{"id":71,"by":72,"text":73},{"id":101,"by":102,"text":103},"11446985","Can_Not","Labeling everything in their gzip size (without the real size) is a bad new trend in my opinion. It feels like an unfair marketing practice since older projects won't mention…",{"value":105,"source":51,"evidence":106},"Examples on the demo page are not obviously interactive",[107,111],{"id":108,"by":109,"text":110},"11440146","23andwalnut","Perhaps I'm an idiot, but it wasn't immediately clear to me that the examples were actually examples. They looked like images. I only discovered that they were interactive after…",{"id":112,"by":113,"text":114},"11440240","chipperyman573","In my opinion the only one that wasn't immediately obviously an example was the scroll one, due to the lack of scrollbars (I thought \"scroll\" was referring to the page and was…",{"value":116,"source":51,"evidence":117},"Tooltip text appears fuzzy in some browsers",[118],{"id":119,"by":120,"text":121},"11441439","TheGuyWhoCodes","Maybe it's just me but the text inside the tooltip looks fuzzy, rest of the text looks crisp. On chrome 49, windows 7.",[123,133,143],{"value":124,"source":51,"evidence":125},"Accessibility support for screen readers and keyboard use",[126,129],{"id":127,"by":64,"text":128},"11440665","I've heard, secondhand, from disabled people that tooltips are particularly troublesome for screen readers, keyboard traversal, etc. Might be worth looking into things that would…",{"id":130,"by":131,"text":132},"11440784","technological","May be i did not look at right place. There seems to be no accessibility support ? Is it something that is planned for the future release ?",{"value":134,"source":51,"evidence":135},"React compatibility",[136,140],{"id":137,"by":138,"text":139},"11440489","ciokan","Has anyone tested it with react? It messes with my routes for some reason. Warning: [react-router] You cannot change \u003CRouter routes>; it will be ignored",{"id":141,"by":55,"text":142},"11447110","Please checkout this PR for React support https:\u002F\u002Fgithub.com\u002FFezVrasta\u002Fpopper.js\u002Fpull\u002F11",{"value":144,"source":51,"evidence":145},"Animation support for popovers",[146],{"id":147,"by":148,"text":149},"11442274","paradite","Ah, I see. I was wondering for a long time why the \"poppers\" in the examples are static. Maybe coding the animation requires more JavaScript and increase the code base? Seems to…",[151,158,165],{"value":152,"source":51,"evidence":153},"Minimum browser support",[154],{"id":155,"by":156,"text":157},"11440317","mountaineer22","What minimum browsers does this support? I glanced through the documentation, but did not notice it. Awesome work, by the way.",{"value":159,"source":51,"evidence":160},"How the GPU acceleration claim works",[161],{"id":162,"by":163,"text":164},"11446001","rootlocus","``` > GPU ACCELERATION > If supported by browser, poppers will be positioned using CSS translate3d, making your poppers even faster! ``` How is a transformation accelerated by…",{"value":166,"source":51,"evidence":167},"Difference from Tether",[168],{"id":169,"by":170,"text":171},"11439915","yuribit","I wonder what the difference is with Tether",[173,177],{"value":174,"source":51,"evidence":175},"Tether",[176],{"id":169,"by":170,"text":171},{"value":178,"source":51,"evidence":179},"Primer CSS tooltips",[180],{"id":181,"by":182,"text":183},"11440700","imaginamundo","The is the CSS only option from Primer (GitHub design guideline). If you use in your project is the tiniest that i've ever seen and it's easy to customize via SASS. (the time…",{"comments":40,"answered":40,"key":185},[],{"commenters":187,"max_depth":188,"maker_replies":40,"first_comment_mins":46,"lifespan_hours":189},25,7,27,[191,193,196,198,201,204,207,209,212,214,217,219,221,224,227,229,232,234,235,238,239,242,244,247,251,252,255,257,258,260,263,265,267,270,273,275,277,279,282,284,286,288,290,294,297,299,302,304,305,307,309,311,314,316,318,320,324,326,328],[108,40,34,192,109,40],"project\u002Fmixed\u002Fdesign",[194,40,40,195,55,40],"11440170","commenter\u002Fneutral\u002Fdesign",[112,40,42,197,113,40],"project\u002Fcritical\u002Fdesign",[199,40,34,200,55,40],"11440255","maker\u002Fneutral\u002Fdesign",[202,40,34,200,203,40],"11441976","alanh",[205,40,34,200,206,40],"11445289","riccardoforina",[208,40,40,195,55,40],"11447730",[210,40,34,200,211,40],"11448877","Drdrdrq",[92,40,46,213,93,40],"maker\u002Fpositive\u002Fdesign",[215,40,34,200,216,40],"11440441","timlyo",[218,40,46,213,55,40],"11440475",[71,42,34,220,72,40],"project\u002Fmixed\u002Fperformance",[222,42,34,223,55,40],"11442481","project\u002Fneutral\u002Fperformance",[225,42,42,226,72,40],"11442543","project\u002Fcritical\u002Fperformance",[101,42,40,228,102,40],"commenter\u002Fneutral\u002Fnone",[230,42,40,231,55,40],"11447134","commenter\u002Fneutral\u002Fdocs",[233,42,40,228,102,40],"11449938",[127,38,42,197,64,40],[236,38,34,237,55,40],"11440716","project\u002Fneutral\u002Fdesign",[63,38,34,237,64,40],[240,38,34,241,55,40],"11440790","project\u002Fneutral\u002Fidea",[181,34,42,243,182,40],"project\u002Fcritical\u002Fidea",[245,34,40,246,55,40],"11440726","commenter\u002Fneutral\u002Fidea",[248,34,40,249,250,40],"11441616","other\u002Fneutral\u002Fnone","idbehold",[162,32,42,226,163,40],[253,32,40,254,55,40],"11446323","commenter\u002Fneutral\u002Fperformance",[256,32,40,254,163,40],"11447838",[169,46,34,241,170,40],[54,46,46,259,55,40],"project\u002Fpositive\u002Fidea",[261,46,46,262,170,40],"11440039","maker\u002Fpositive\u002Fnone",[155,46,34,264,156,40],"project\u002Fneutral\u002Fdocs",[266,46,34,264,55,40],"11440339",[268,46,34,269,113,40],"11442287","project\u002Fmixed\u002Fexecution",[271,46,34,237,272,40],"11440873","andrewingram",[274,46,34,241,55,40],"11441141",[276,46,34,241,272,40],"11443407",[278,46,34,241,55,40],"11444945",[280,46,40,249,281,40],"11445428","huula",[283,46,40,228,55,40],"11445856",[285,46,40,228,281,40],"11448851",[287,46,40,228,55,40],"11450124",[141,46,34,289,55,40],"project\u002Fneutral\u002Fexecution",[291,292,40,249,293,40],"11448101",6,"kleampa",[295,188,42,197,296,40],"11447143","jazoom",[298,188,40,228,55,40],"11447193",[300,301,34,289,148,40],"11441875",8,[303,301,34,241,55,40],"11442039",[147,301,34,237,148,40],[306,301,34,241,55,40],"11442515",[137,18,42,308,138,40],"project\u002Fcritical\u002Fexecution",[310,18,34,289,55,40],"11440662",[130,312,34,313,131,40],10,"project\u002Fneutral\u002Fnone",[315,312,40,228,55,40],"11440853",[119,317,42,197,120,40],11,[319,317,34,289,55,40],"11441788",[321,322,42,243,323,40],"11443226",12,"dreamlayers",[325,322,40,228,272,40],"11443385",[327,322,40,228,55,40],"11446326",[329,330,40,249,281,40],"11445459",13,[],[333,338,343,348,352,356],{"id":334,"name":335,"points":336,"category":337},"11407536","webkay",553,"security_privacy",{"id":339,"name":340,"points":341,"category":342},"11403930","Triangul-Art",138,"creative",{"id":344,"name":345,"points":346,"category":347},"11396345","Expounder",134,"languages",{"id":349,"name":350,"points":351,"category":20},"11423070","WrapAPI",111,{"id":353,"name":354,"points":355,"category":20},"11396702","tmux2html",99,{"id":357,"name":358,"points":355,"category":359},"11412811","estimatrapp.com","productivity",false,"v2",{"id":363,"name":5,"line":6,"ai":360,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":364,"top":18,"kw":365,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":366,"url":9,"mix":367,"praise":80,"objection":97,"sub":21},11439879,-0.31,[24,25,26,27,28],"3013335531001310103553333300310331331100",[32,33,34,18],1794036543023]