{"_id":"primer-popover","_rev":"593-6a4216c2bea52290a1f622f9dacc3842","name":"primer-popover","dist-tags":{"rc":"1.1.0-alpha.82c06bb2","latest":"1.0.0","pr":"1.1.0-alpha.df004242"},"versions":{"0.1.0-alpha.e386e3b9":{"name":"primer-popover","version":"0.1.0-alpha.e386e3b9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.e386e3b9","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"26f7453690082ae22ba7c65d63e141aa5834a8cf","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.e386e3b9.tgz","integrity":"sha512-cGBpkUGG/xQWUbp8uUEXvJ9zjGo7rjgWb1m1/oiWL+1GtWeRsArjWsJFhrwlqc/UTh6gVFWbPNJJSL4jmEebcg==","signatures":[{"sig":"MEQCIH0GpeNesBPHEIFbkaqcVlOSe9lSknbs0d05xwgtbt7yAiAdvGRbjBT9V0e+hgq/JJ7gZXf9XnInxsElsmR4peDZQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"26f7453690082ae22ba7c65d63e141aa5834a8cf","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e386e3b9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.e386e3b9.tgz_1509119080871_0.29120184294879436","host":"s3://npm-registry-packages"}},"0.1.0-alpha.2b4f51db":{"name":"primer-popover","version":"0.1.0-alpha.2b4f51db","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.2b4f51db","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0f551eb545b44cfb09e8ad7df3d5add1127256f9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.2b4f51db.tgz","integrity":"sha512-TCHohzVliBfl+Uupl9zK/OSbgh2sX2KETCCuRbf4DluDllTdjFC0rmNNhMC708kia67NBxbaaNxDzj8hnsibig==","signatures":[{"sig":"MEQCIFVTlCkM5ED2yaCXRrm+qQZBF9SLQC/usmpL2at4dYh5AiA0HSzF0MqSQk6XtdKEULhwaMKhSv29B+twXALnGu6dXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"0f551eb545b44cfb09e8ad7df3d5add1127256f9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.2b4f51db"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.2b4f51db.tgz_1509132988885_0.6704436133150011","host":"s3://npm-registry-packages"}},"0.1.0-alpha.eee49256":{"name":"primer-popover","version":"0.1.0-alpha.eee49256","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.eee49256","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f47ecf6eef71d10e596ac2811758d6a3a1253be2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.eee49256.tgz","integrity":"sha512-OJOWVd7Lg6G34Dn3XcXiu7Ubb3Gg6vqtF8WO8kiitsuQyOvv3ZNVKiGzRBEBQHHq7j1u/UCW/vP4PH08PLPadA==","signatures":[{"sig":"MEUCIDMZ+utGEHfQ262yVC0ECYUhJNMaqtpXmVOmney6xB0gAiEAr6tQEPkdZUrb/l/sJ8v1WSo0rIjrdwxdiAi91ffFs4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"f47ecf6eef71d10e596ac2811758d6a3a1253be2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.eee49256"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.eee49256.tgz_1509133919878_0.5091669461689889","host":"s3://npm-registry-packages"}},"0.1.0-alpha.e777f888":{"name":"primer-popover","version":"0.1.0-alpha.e777f888","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.e777f888","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f3490c16cb192cc2e4a1e3de9cc5a3b80c7276b2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.e777f888.tgz","integrity":"sha512-BHGNAE6v4u71ZXYbIbBygKNsrXrSDQeW/bNaEPJN+8Q1hx67cbiNfRsY56BBXbcbFrF1ak/Jh8ur+eCl2Jd+fg==","signatures":[{"sig":"MEUCIDqb5l2fT1YkR5RyypQNX7H1SGGw73JFvI3P1xKnlm3PAiEAoX/37vFl3MfEnSGXVLzMSodqfuSdSKzYLuZ+Yrhp/X8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"f3490c16cb192cc2e4a1e3de9cc5a3b80c7276b2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e777f888"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.e777f888.tgz_1509134327206_0.6798255308531225","host":"s3://npm-registry-packages"}},"0.1.0-alpha.503bc620":{"name":"primer-popover","version":"0.1.0-alpha.503bc620","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.503bc620","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"89e8d3d8f49795b4bb73f9c581de9c7974636260","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.503bc620.tgz","integrity":"sha512-dNovYswE6HfXIpbSURZCJmW04AZxN6qL6A4qcBOL9NhBnflF2oBQ8Ur0fxZIgJAQsuo6NS0PDgIlJb00w7iUUQ==","signatures":[{"sig":"MEUCIQCKx2M2Imply3YZkXlEWxbUFk6RqQ+D9lFuZhxB7ZqBhgIgKNpXYy9xZtaq5I1fPS0+6yi2MAjam7c7E4UDmmjADwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"89e8d3d8f49795b4bb73f9c581de9c7974636260","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.503bc620"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.503bc620.tgz_1509659346223_0.18311941833235323","host":"s3://npm-registry-packages"}},"0.1.0-alpha.fd89e173":{"name":"primer-popover","version":"0.1.0-alpha.fd89e173","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.fd89e173","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"04d00c1a5ffef9c6975ac80264ba44df8f4d34b9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.fd89e173.tgz","integrity":"sha512-ZEonE9r+ea6DioLwRfpgZjGLa7mXh9TxZmQlH9Ceb/pVn8VmtDCsoO5Iq7C8h8xO1Iu1wW4ucXYpjY8ixtCkKg==","signatures":[{"sig":"MEUCIQCXeLWdLtXdo3kaJ4uJMst3N+Nc06dusPaOO1+o1OWzzwIgNZSihzvun4lzH9Bat1GxfjBb+mSEV6riRToRhLSq2dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"04d00c1a5ffef9c6975ac80264ba44df8f4d34b9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.fd89e173"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.fd89e173.tgz_1509730972243_0.2355087110772729","host":"s3://npm-registry-packages"}},"0.1.0-alpha.f73ca933":{"name":"primer-popover","version":"0.1.0-alpha.f73ca933","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.f73ca933","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a4263007b4f33e50b325a2ef6f73d53c6304c72d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.f73ca933.tgz","integrity":"sha512-0SjlfOh6CesxTcKC6NYqPRENuYnTIjw2tg1C1j9MGbuCtlsd1LPqhX0DAtF4r1XP1RVTS/+f4yrOmzAYzBC97Q==","signatures":[{"sig":"MEUCIFFYZ6BjVQzNXAwhgJI5Yfi36a7dHpqfyUSjWqzaEepUAiEAshVEu93zHxvSIjWF4cXf0mDiWA+qicbZOvzNTWZnNUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a4263007b4f33e50b325a2ef6f73d53c6304c72d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.f73ca933"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.f73ca933.tgz_1509733601506_0.38754834956489503","host":"s3://npm-registry-packages"}},"0.1.0-alpha.6fcd7e0a":{"name":"primer-popover","version":"0.1.0-alpha.6fcd7e0a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.6fcd7e0a","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b6fa2a6c16f3d61b0867d0ded104880e8c47213c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.6fcd7e0a.tgz","integrity":"sha512-LAVUMX5kvB50bVOTk7Smfy+xoxGkqSZkXjPY4XPCj3RZbC/KUPFi94+zpPOMPPB5JyESKiqqQgTzVCz1aN4VIQ==","signatures":[{"sig":"MEUCIQDGMbTxe+QO8J8BhtfZr49vT/ZkkJedX+dTWZajeSdfawIgJlzPD9lUDHXIgEtd0RAr6vaCw2U5Yk1WOI7P9RRaoIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b6fa2a6c16f3d61b0867d0ded104880e8c47213c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6fcd7e0a"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.6fcd7e0a.tgz_1510001768181_0.16594784706830978","host":"s3://npm-registry-packages"}},"0.1.0-alpha.7888ee92":{"name":"primer-popover","version":"0.1.0-alpha.7888ee92","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.7888ee92","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e4aca4de38e16431b7a77e7a4a905f50a5c0b82a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.7888ee92.tgz","integrity":"sha512-if4FQrQklEUzb4/bLVaEmrjWYP0n2L4LBxZxgzrQG8TAgA7xddQ+gjFj4eaq3Q62lRZBpx5+Z6MtGWeLUL95Tg==","signatures":[{"sig":"MEUCIQCIm9B0d/pXAjBfxA8LYv71XyvjJyW3hyYd7wKj7L9+5wIgLrGGuc3CgpaPEJEjHjAWZtTfqBxzPMXksF7E3IxFDtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"e4aca4de38e16431b7a77e7a4a905f50a5c0b82a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.7888ee92"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.7888ee92.tgz_1510011424984_0.6575809265486896","host":"s3://npm-registry-packages"}},"0.1.0-alpha.3adaac52":{"name":"primer-popover","version":"0.1.0-alpha.3adaac52","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.3adaac52","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ee7e4390479251429d20d5231e9a6607a2931c80","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.3adaac52.tgz","integrity":"sha512-eoqEmGwmjRTQRxrbMT0eNULnx0drJ834gytMLnWCt2/1pduYdPHpVRSsO7QvYOcEVVaCJIG9wmBBRd3SM3q9MQ==","signatures":[{"sig":"MEQCIDqIgnolYDtOYCIzFbjkvHHiBWrHUkYOXyUVuT8b5QjHAiB7ZgwRKcWHNlxfd0CGOHvFnMs95eBLB0eA/uIwl+FymA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ee7e4390479251429d20d5231e9a6607a2931c80","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.3adaac52"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.3adaac52.tgz_1510012563718_0.7419290507677943","host":"s3://npm-registry-packages"}},"0.1.0-alpha.a4bc4a43":{"name":"primer-popover","version":"0.1.0-alpha.a4bc4a43","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.a4bc4a43","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"699b546071a24a4f91ef2b7aa558ee80b9c78788","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.a4bc4a43.tgz","integrity":"sha512-m2aYz0qrguD28yuwX4ctgmxGp2g5feJs/X8F8uXRERhofxssW1wpa24xySF53LSTgduirIOdIQd8AbPBig76gw==","signatures":[{"sig":"MEUCIF74Z+IeZ7PLqak/sw2jIaV0QVwpN7WpYJsf7p4cOBtpAiEAmON0gouylCnbEDb0gXgN55t0oNckeZvmyDo13DY/Nzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"699b546071a24a4f91ef2b7aa558ee80b9c78788","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.a4bc4a43"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.a4bc4a43.tgz_1510091987978_0.8236177188809961","host":"s3://npm-registry-packages"}},"0.1.0-alpha.f2cb42ae":{"name":"primer-popover","version":"0.1.0-alpha.f2cb42ae","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.f2cb42ae","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"98ec66552210abc3589df2392f3f3e1684cef0e2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.f2cb42ae.tgz","integrity":"sha512-5NaT3digG3rLnlOEJIL/5xz3tVzpsGeXXvv0z35jSLnXrpiOcgzsVs9UMZH4aWrbvcRZwwwdpKJjLhx/eVVvWg==","signatures":[{"sig":"MEUCIQCS4QsHUrhXRa3KFhZXuDi+TeRm7vDeoGiAq4/mwi1EngIgaFwfduWFBlLhzvLVeEz+jUWTrR7D4hIER+nSItnA6uA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"98ec66552210abc3589df2392f3f3e1684cef0e2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.f2cb42ae"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.f2cb42ae.tgz_1510092050319_0.8314473500940949","host":"s3://npm-registry-packages"}},"0.1.0-alpha.19404e55":{"name":"primer-popover","version":"0.1.0-alpha.19404e55","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.19404e55","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6a4ea4de88c98d9e8ea5beba496b0fcbec4def7e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.19404e55.tgz","integrity":"sha512-DoB2wZe2110jWyq9FrRX0V10iUs/csQZC8iL2VcsboSfsHMNdj+0MNpg2H0H2Jzr6X/a8RVREWxcUAGvGtI6uA==","signatures":[{"sig":"MEQCID162oWYu9w0oT1ZXCl9UR8I7aCSiqPWwPzlQdF3CYe+AiB3ESva0MwoXhhlmfZ6gz1l2RUNWB66KXvcUd27KKox2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"6a4ea4de88c98d9e8ea5beba496b0fcbec4def7e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.19404e55"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.19404e55.tgz_1510092058252_0.5495025783311576","host":"s3://npm-registry-packages"}},"0.1.0-alpha.30aafda8":{"name":"primer-popover","version":"0.1.0-alpha.30aafda8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.30aafda8","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0f82e8c7b1055b52290b5b62d9c04088c9c7b460","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.30aafda8.tgz","integrity":"sha512-cNxXVrtc0cVDxzUt4eL2dZul8N6wJbraPswy4RqAXbhG6Vl0leMiZpjO3n2GCv02Mzj5Zx+7n0WRXeygLXJmlw==","signatures":[{"sig":"MEUCIQCyACz4gVDYov3DW1NXHWjwJ616BgZloEkwCIeGr0GbYgIgd90K9f84ol8onqx+uDuqJpm5hshJ4i8BH9hf/Da/EAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"0f82e8c7b1055b52290b5b62d9c04088c9c7b460","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.30aafda8"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.30aafda8.tgz_1510095244882_0.49597239680588245","host":"s3://npm-registry-packages"}},"0.0.1-rc.0":{"name":"primer-popover","version":"0.0.1-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.0","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b8bdc381f29868246ac6f937b8edb96c7235a5a8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.0.tgz","integrity":"sha512-R791ZIhuKgvubXAg3DIk55/DQaqJziNiJS28VwStgNfpScJbcpXmOTs4I65R+ouI+4KqquTsZPg4JvFHhhQFPQ==","signatures":[{"sig":"MEQCIDruWdDgaDjZjgp+wolDJLyQf51xIhKRPtpmPnAyoT+5AiAjShmA87BKakbv2m/aQkl51Gc1Q2zN6bD3l75T7Cr/Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b8bdc381f29868246ac6f937b8edb96c7235a5a8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.0.tgz_1510095997296_0.07707737642340362","host":"s3://npm-registry-packages"}},"0.1.0-alpha.c9a64cbb":{"name":"primer-popover","version":"0.1.0-alpha.c9a64cbb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.c9a64cbb","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1fc9e2298282a7ed20d9c0cd7e82caf31010a5ef","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.c9a64cbb.tgz","integrity":"sha512-d56hnzQGPwG+K91ioJxBhxNQ47tPNIIypaG6GEDfpc8cMTGTK7R7HGYXzHWaTdZbrVrTuvaTb2cCaiVNi6Cu8g==","signatures":[{"sig":"MEUCIQDNJ2lTUkDA+Pnypt899RDZiB3zL4BiMsDmS35WuVWX/QIgbTzSQM3MnRGtaOhqwT5uDkEBees8G5/jJibVX7OfK5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"1fc9e2298282a7ed20d9c0cd7e82caf31010a5ef","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c9a64cbb"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.c9a64cbb.tgz_1510106919503_0.5523014639038593","host":"s3://npm-registry-packages"}},"0.1.0-alpha.e0a27da9":{"name":"primer-popover","version":"0.1.0-alpha.e0a27da9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.e0a27da9","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8d69950cfd36b643519a7654a54698866986135e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.e0a27da9.tgz","integrity":"sha512-TntgVzCnwADbdLzr6fd+bNYWh7xjdw/gGZ9LNemGNrICc9VtunOP0uDVuLCnzx1vNJmAtdTeXhMvG5yiFy95MQ==","signatures":[{"sig":"MEUCIQCom6lKck6ydZMIq/i0MrWyThBWBWB2nWLP3eLPWZsbFAIgKyxIKYKLx1/mghq1g1Cw/QZvAGZIB3loPYzoR8Z08H4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"8d69950cfd36b643519a7654a54698866986135e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e0a27da9"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.e0a27da9.tgz_1510109702883_0.07162366318516433","host":"s3://npm-registry-packages"}},"0.0.1-rc.1":{"name":"primer-popover","version":"0.0.1-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ba112b9f213ed5ec0d7d9339f46c0dd4046143fd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.1.tgz","integrity":"sha512-4gdqanO7RCa8A2mxdz51G4KqszVsqoD3pQk7rt8jv38hPgEhj0BwB5EH0bJdLmPy/WJoYNlFp6MP729km+hbdA==","signatures":[{"sig":"MEUCIB18vv3vfRq+mK2bhNVXfQjoVNSHwMMkDwRq0oyWOy7CAiEA2i5evpS8LORegbQ7cXBxq8TsJ4Y2L7k2Ho6F32yM4PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ba112b9f213ed5ec0d7d9339f46c0dd4046143fd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.1.tgz_1510112769859_0.24290967849083245","host":"s3://npm-registry-packages"}},"0.1.0-alpha.ca4c2c3a":{"name":"primer-popover","version":"0.1.0-alpha.ca4c2c3a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.ca4c2c3a","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8f508a9b77b80ceda62570728ef6687e25596062","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.ca4c2c3a.tgz","integrity":"sha512-ZkwXC9UPCWYO96lTYn0tAzZj8nTIcdHV6s8GnER2aqNln4ee87F5LOsJK+GtfqqWsu9QsWDO+MfonMaBWdOIIA==","signatures":[{"sig":"MEUCIATXJYLP/p+wA8+7SVSDNtOd6FaA9QhfOHcxcDwtzVc0AiEA9o8QMSmnAiIwsTEKhbW7jhpHi3TGqHhyosqMRWuJ+lU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"8f508a9b77b80ceda62570728ef6687e25596062","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.ca4c2c3a"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.ca4c2c3a.tgz_1510170036848_0.09919746895320714","host":"s3://npm-registry-packages"}},"0.0.1-rc.2":{"name":"primer-popover","version":"0.0.1-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0144f3d5642b8f52676fc119aeaa3a2e0a9ec37d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.2.tgz","integrity":"sha512-UAToeoz2Ex4GA0djIk5ArrawHh5mvzwaam3jJLlE4SGsSW32i87X73kdklUSjrU57i0MZSAwrjur0RYFnRPewg==","signatures":[{"sig":"MEUCIQCAKv03/udLC1NoR5hD63Q17Iq9qef8ACHycLjoJXGGngIgJihnBOeGnYJo2p/HpCEGOTZDJqWc+jkd7cXXRAlsPOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"0144f3d5642b8f52676fc119aeaa3a2e0a9ec37d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.2.tgz_1510177531980_0.4358370613772422","host":"s3://npm-registry-packages"}},"0.0.1-rc.3":{"name":"primer-popover","version":"0.0.1-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.3","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"76aa815932445c4f1432652a752dd72d3c90fefe","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.3.tgz","integrity":"sha512-S7a317wsBcNa6+3+ODUF+LYKHTKTP0AjAMdfVLGIKxTBebZAOmOGn69k8c78x84UAR2ACpEXCoxVF6R1aRpuRQ==","signatures":[{"sig":"MEQCIALGHrEr1stst57VLT0AEft+9XfPg3woquKuIYOdOc4eAiBpfMVeKeAewXmXS1rdeIMq5QwO6d+iQBbrtVcHRrt/sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"76aa815932445c4f1432652a752dd72d3c90fefe","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.3.tgz_1510177763517_0.40185743826441467","host":"s3://npm-registry-packages"}},"0.0.1-rc.4":{"name":"primer-popover","version":"0.0.1-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.4","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ad5ed2353bffee92645c9a93d64fb551c645df97","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.4.tgz","integrity":"sha512-+G02vnGePvFsckDXaB0sm/D/8QIpjReso6gkjFvPKX4ypfM3IkxkwYy2wAM0VpEzgepusNE1E6Ueo1XeL1geIQ==","signatures":[{"sig":"MEUCIQC5FgAp3iiESdgA0Laez7MG6y2t9ZlgGi9hb2yFUVkheQIgbFHY6yycc3CU5GUAk5goOEncqK2J1FPUWJuvAFn3qtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ad5ed2353bffee92645c9a93d64fb551c645df97","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.4.tgz_1510181378108_0.6401027410756797","host":"s3://npm-registry-packages"}},"0.0.1-rc.5":{"name":"primer-popover","version":"0.0.1-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.5","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"084e1b650b7267356a60e9751dd592cbde7153ea","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.5.tgz","integrity":"sha512-C67G/mM8EyRna982mF7jR/J+OdxlYcVt1i9t+QC5qNDWsQvB2BM5NNZcX2Sx9kyH43AnfEF0TzX2d+utjGaUVg==","signatures":[{"sig":"MEYCIQC9v0h0MThh4xnbjdUrz6sZZvruvb88iehxyIqNgJs86QIhAKPp91sC1PBeg9bKy8Dw/Xke2P64yzyOeSyku4B5euyn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"084e1b650b7267356a60e9751dd592cbde7153ea","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.5.tgz_1510181755006_0.8806175049394369","host":"s3://npm-registry-packages"}},"0.1.0-alpha.9965c961":{"name":"primer-popover","version":"0.1.0-alpha.9965c961","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.9965c961","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9069bdec85648fe896a3c1ded3340c7bb6748f42","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.9965c961.tgz","integrity":"sha512-8vgQ6yfVLfPYSpeJG9ng2/qlMz7POOQaLzdOGkOqSuMFeQGbvT2BfbiDKtkIXFC3t4rvZ/yk46Qc1bxsJVkUZw==","signatures":[{"sig":"MEYCIQCYi6it+BLyYPqASpjywf8WT92I7Va3grJO460mBHPc3AIhAM6qhVQfnE0/NFw/PdnKUn/VNqVETkJq6djLgPHfU8GF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"9069bdec85648fe896a3c1ded3340c7bb6748f42","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.9965c961"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.9965c961.tgz_1510182356485_0.142929473426193","host":"s3://npm-registry-packages"}},"0.0.1-rc.6":{"name":"primer-popover","version":"0.0.1-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.6","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d62117e607b236d9695a74fe44875e3ea462c3dd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.6.tgz","integrity":"sha512-9aBZGqJcJ5901MAKPGF93jUQolc2SkRT0Po2wnkH1GFOVLDxBTJQChtwO7jCCCXcHT8aOsfriUrMqiBK8Md6CQ==","signatures":[{"sig":"MEQCIFk1dHRYeif6+RrLK0cHQC0jTGBqT/TpXQ2KzYRs5M/dAiBTIkASE4Ca2j7OwtjaJfbB8R24Ewv0cDZrF5ymE0keKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"d62117e607b236d9695a74fe44875e3ea462c3dd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.6.tgz_1510182901267_0.15628173598088324","host":"s3://npm-registry-packages"}},"0.0.1-rc.7":{"name":"primer-popover","version":"0.0.1-rc.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.7","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e00d621a70a92e5ed38ad7b94e3bd0d0d2f71761","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.7.tgz","integrity":"sha512-Y9YFLeld5hdPkWPa2pWIAaIAGYEmAlEBijroHm6GnHTSmgvQQ1cdbhEBEsJ4pHouMS7Lt4DB+JIOqiSwPGPmgQ==","signatures":[{"sig":"MEYCIQCou2uHczOY44xDbiFpONa4WS8LFkkYWJVtcihR8starwIhAIy7kmt8wsOlpTmgX7Q+qmj8hsWwUIEH1Se8rQuidEv5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"e00d621a70a92e5ed38ad7b94e3bd0d0d2f71761","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.7.tgz_1510184695214_0.7045688761863858","host":"s3://npm-registry-packages"}},"0.0.1-rc.8":{"name":"primer-popover","version":"0.0.1-rc.8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.8","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"74b8e3b19b01f4da6ec6bb6494e00ba0f7b59d0f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.8.tgz","integrity":"sha512-53FseLl3sR94jGNJz3wERrQ3pwdv7lH837tECuADo2CEIf5mXtciq6WJjxRDpvdZ16LEeF1AzhFN+O3tezzaJg==","signatures":[{"sig":"MEYCIQDhE0wxFOD6HAgsISbJeBRx1WqG3yJIWMwGdEBjrOqxkQIhAKrVmhXe9YUfvqI72kSBDl8kTbYshduC0ZqP0piaeXfL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"74b8e3b19b01f4da6ec6bb6494e00ba0f7b59d0f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.8.tgz_1510198554163_0.018840420292690396","host":"s3://npm-registry-packages"}},"0.1.0-alpha.14223a9a":{"name":"primer-popover","version":"0.1.0-alpha.14223a9a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.14223a9a","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"01593c1b0140e9e6df1d5728a92d24cc2a4edf87","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.14223a9a.tgz","integrity":"sha512-tJq/CyaG6G/RGXmg29Gv8lpab45evMJW+EASHG6uSS0/YwmC0wlRLbWzoJ0EE6MVKZEe8otOEY1z9hqVYMYuTA==","signatures":[{"sig":"MEUCIAv8363J05qmb1i7efprGRb+LhmwOjgLkMMqueAuvaouAiEAiDBs5x7H0R3l/TWCsbIavG/V9jyo/ZSyiFaIt2abo/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"01593c1b0140e9e6df1d5728a92d24cc2a4edf87","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.14223a9a"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.14223a9a.tgz_1510250092281_0.7387888631783426","host":"s3://npm-registry-packages"}},"0.1.0-alpha.6910d580":{"name":"primer-popover","version":"0.1.0-alpha.6910d580","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.6910d580","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"25316fd7c21f68c228696c0be4309cccbe375ff4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.6910d580.tgz","integrity":"sha512-SQzix4V1fAvQxwgWpqCZVXzyQxKfule3xT+50ELFbSN8q6oheeB/WHDdLUi7gmpvKBw/uIlcZOYbQbA/qecC9Q==","signatures":[{"sig":"MEQCID6D724N4bDkfb2ub9ULppY1BHI7rf6ciSeOZrQhcIx1AiBJElIW4MAg1FT/Yy6yV1+mh6aeBucr1/ZCYUmies9W3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"25316fd7c21f68c228696c0be4309cccbe375ff4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6910d580"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.6910d580.tgz_1510250367471_0.44822411774657667","host":"s3://npm-registry-packages"}},"0.0.1-rc.9":{"name":"primer-popover","version":"0.0.1-rc.9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.9","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2f7a4bb3700c4e5a69e77872e50ecf3b60952f80","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.9.tgz","integrity":"sha512-A8uRxabvgG3CLynPqZx2+e8Y8rNWBrXqIgqkdWT7BCk1IRSZvMzkUEfjYoOGuvO+qTlMT/MQCTzMFYhmCEXDMA==","signatures":[{"sig":"MEUCIQD11dOHNIWKrpN8APlo0emw0u+QdGQCVXRmJW5KT3hlfwIgFDEF+CjYqGKx748D8o+ZfJGUk4xv9RM/4KMkz6wklIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"2f7a4bb3700c4e5a69e77872e50ecf3b60952f80","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.9.tgz_1510262609046_0.21999987517483532","host":"s3://npm-registry-packages"}},"0.0.1-rc.10":{"name":"primer-popover","version":"0.0.1-rc.10","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.10","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"71a8dc7d52ab84060786533b17155a4c4cefbe37","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.10.tgz","integrity":"sha512-u205o5JubiyM+t+kizmchxYp/Je8nJ1W4AYd8cVL6n2iHnVEGJpgKIgG72P2spGHReY1HxO/XRAprkIpMEMY+g==","signatures":[{"sig":"MEUCIAjSm3/SWqD+Qtil0fDe81zxrGOv/68LIvrwkeYIDtfyAiEAhGhUtb8eAFWJQ8j5IA9Q4Zz5u1uGJ5A1N5llktd0C2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"71a8dc7d52ab84060786533b17155a4c4cefbe37","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.10.tgz_1510274547692_0.060668059857562184","host":"s3://npm-registry-packages"}},"0.1.0-alpha.e39405dd":{"name":"primer-popover","version":"0.1.0-alpha.e39405dd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.e39405dd","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6021d5d143e208f7bcf9020c0b67e280a10ad9c1","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.e39405dd.tgz","integrity":"sha512-ysAX8M/6E1hwvySGmdyH1EhUFIwGBpQo8uu92OU7g6LIo0aKbZSo2EmKWfFyqd4ISj2TIIYb4v7zKIDSkZXx2w==","signatures":[{"sig":"MEYCIQCGf6YxAfMEe1z1w/Z+1fmVA8bd7TXosf/Mr6HFSyOSWgIhAIkfvoPuqvucK94vzLI4dtQZwTVezo1Zxqz3P0z6waui","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"6021d5d143e208f7bcf9020c0b67e280a10ad9c1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e39405dd"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.e39405dd.tgz_1510275338209_0.7729146368801594","host":"s3://npm-registry-packages"}},"0.1.0-alpha.d2e6cfed":{"name":"primer-popover","version":"0.1.0-alpha.d2e6cfed","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.d2e6cfed","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1934999304db6b5e20e773fae56cfcd8647bc621","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.d2e6cfed.tgz","integrity":"sha512-ZLkLclgyj+2o2wb6fzoouXa0AXZ9SpU2xUyHGdR9ohKBc9x3ClRUaanLGkWcSmnSkVkmGJJZ8QFikVsmLN4ISQ==","signatures":[{"sig":"MEUCIQCGGh1iLfKYz5eumMkxSQl9RPRk161D03FuAcvwem5NAwIgNykUz5hrlyMzeSR8HelVMk6tvIBn39kS0uPYsFcLES0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"1934999304db6b5e20e773fae56cfcd8647bc621","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.d2e6cfed"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.d2e6cfed.tgz_1510283632355_0.045165567426010966","host":"s3://npm-registry-packages"}},"0.0.1-rc.11":{"name":"primer-popover","version":"0.0.1-rc.11","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.11","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9b014156fac90dc70131f74333ef2ad8abb08433","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.11.tgz","integrity":"sha512-QRY1jWz77LdVaqy6i3X6JYPnj9Qb98YC1/43jx3WuUlgohYSuO24FeTS+8pmajSSmH3QjJxNWRzB0b4EmG1H0g==","signatures":[{"sig":"MEUCIQDjWnX1yBxG/Ivr4wAwmaglrHrF8Hmu1OxIktSqn220MwIgAdz76W73Npl1fRl9iB73Oz9fhkzSvKXYNZDow/Pve7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"9b014156fac90dc70131f74333ef2ad8abb08433","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.1"},"peerDependencies":{"primer-box":"2.5.1-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.11.tgz_1510293008743_0.8164287966210395","host":"s3://npm-registry-packages"}},"0.0.1-rc.12":{"name":"primer-popover","version":"0.0.1-rc.12","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.12","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"344659a83c0a5d70524df408c3b492698984aac8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.12.tgz","integrity":"sha512-J98iVUkZ/H82gDvtqkViuHC9d0cjO7PczBF+E1Bt8hvPN4vyNxkBCWUuCktopvRWIF9Uj/8YhHSgzMBAWT+lJg==","signatures":[{"sig":"MEUCIHAM4hHlHJSjSH9uTCwJf/VQYYOv4SuwGr0PhO6ffr1uAiEAms+LXrMO7AH9KJKM3uv6ZwZYfbZpRwVyLOPeOgu2gfM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"344659a83c0a5d70524df408c3b492698984aac8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.2"},"peerDependencies":{"primer-box":"2.5.1-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.12.tgz_1510332802180_0.7963795117102563","host":"s3://npm-registry-packages"}},"0.0.1-rc.13":{"name":"primer-popover","version":"0.0.1-rc.13","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.13","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"631323c80b7d7084fd389e9f969104b0689ee01c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.13.tgz","integrity":"sha512-xrLlGDP18HA1/ixqSj9jB7iAEMFG+6QNzv06tysDWqqQlLLKq6/l73caVP374/Fem+50ryQZis8lUOkIbqY4BA==","signatures":[{"sig":"MEUCIQCKt+zZUkIwao+aAuwtfjHkLmCNpZaa4Bu9xBHTXwR0UwIgcxYxvY7gMm32IKmAPyLblTfRDInFriueRxL53/WhD9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"631323c80b7d7084fd389e9f969104b0689ee01c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.3"},"peerDependencies":{"primer-box":"2.5.1-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.13.tgz_1510333732860_0.42728645564056933","host":"s3://npm-registry-packages"}},"0.0.1-rc.14":{"name":"primer-popover","version":"0.0.1-rc.14","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.14","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"273497f94120faf1f24b2e51c82e90bd0f821d0d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.14.tgz","integrity":"sha512-mcc7kXtOeTw3DPRCkiJo1V7a+nRRHemyofQq9QaW3q8iI3lkl7IWL+SgshxnlDq4OuaPTXQ453y/rdIn6CdvqQ==","signatures":[{"sig":"MEUCIQCSadY8vY4ikw1Eo99CREMSBbGqa4sZwGUUPSlog+R9TwIgcX6rOFWcyp2p2eK/6ZCJ4byqltnyRqoVDjS9UylUNwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"273497f94120faf1f24b2e51c82e90bd0f821d0d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.4"},"peerDependencies":{"primer-box":"2.5.1-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.14.tgz_1510334297630_0.547949975123629","host":"s3://npm-registry-packages"}},"0.0.1-rc.15":{"name":"primer-popover","version":"0.0.1-rc.15","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.15","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"73b8b00399c952f41e3abaad50bcfb830ee8439c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.15.tgz","integrity":"sha512-tuoqtEk+SSZcxMIw5BKgd7ewhuxhpsw1ckmm4A4DQZWjWQC2esSN6f34lkwTpIrRmUDZrj3rmd6HV1XVfRjooA==","signatures":[{"sig":"MEUCIQDvh5BE9qboWYDfl6+l746yUyAxwrehhlI5wKt4x/V/bAIgFEd65a4w0bnIbmIMzcoHIpVlKg22bnDWaB3iDD519Fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"73b8b00399c952f41e3abaad50bcfb830ee8439c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.5"},"peerDependencies":{"primer-box":"2.5.1-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.15.tgz_1510342680954_0.7879516694229096","host":"s3://npm-registry-packages"}},"0.0.1-rc.16":{"name":"primer-popover","version":"0.0.1-rc.16","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.16","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2f5d7540bd88dbc827366796b022842860786203","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.16.tgz","integrity":"sha512-hnLTfOuatqZM1oqknXeDp+O14xht8gADhYdMb9/mc0KJgES5vEuOp0w1rjOTbFdmfyWV1zsCtQYe8ngHDi244A==","signatures":[{"sig":"MEUCIQCs3t0qu64Mf58zv+I6+LEaRBow77DNwRPDI7dpt/pfSwIgNSj/5FbPiRQn7svivOVPUz8vRu/3jZzl7uxtC/rLFnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"2f5d7540bd88dbc827366796b022842860786203","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.6"},"peerDependencies":{"primer-box":"2.5.1-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.16.tgz_1510351261854_0.8319982916582376","host":"s3://npm-registry-packages"}},"0.0.1-rc.17":{"name":"primer-popover","version":"0.0.1-rc.17","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.17","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"40ad20f8333674763430149c14f87ffed3feddfe","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.17.tgz","integrity":"sha512-XD297HUY03YQ56s+ctscwRiOmKPePGmbnSowXwHg3kjyVqLJeNInmNd0tXwgtOSTunzwk3tBWzcnYPCyNxrs8Q==","signatures":[{"sig":"MEYCIQDOP8G/JK/vlnbA9kcDZ72UItBVJCqW7qjGzvOuovJgEwIhAKZtArdMs/Hr32yB516mPEuh2lZUly59HKl4NuGVRqTM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"40ad20f8333674763430149c14f87ffed3feddfe","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.7"},"peerDependencies":{"primer-box":"2.5.1-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.17.tgz_1510604312138_0.5214044617023319","host":"s3://npm-registry-packages"}},"0.0.1-rc.18":{"name":"primer-popover","version":"0.0.1-rc.18","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.18","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d718ca566dc031e2bf8d08d577e3ab26952f4174","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.18.tgz","integrity":"sha512-53LaI8/N0VAocopTnqqyhjWXYAST0T0+ImYZTPTrTzHgiFVeElrJki2iSYz2t1uvRDm+zwgZEVZ2vMWAoN2zcQ==","signatures":[{"sig":"MEUCIQC6e99SsY9jV524cP1Yrjt/chNweQ4XMdSgP9eizHDciQIgDSkZjDvlsD76m8jC/Dg0oQw2RLpF3xsErc21ZNx93r4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"d718ca566dc031e2bf8d08d577e3ab26952f4174","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.8"},"peerDependencies":{"primer-box":"2.5.1-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.18.tgz_1510605396413_0.51843919348903","host":"s3://npm-registry-packages"}},"0.1.0-alpha.fbed85cd":{"name":"primer-popover","version":"0.1.0-alpha.fbed85cd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.fbed85cd","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ff2b362199706e3db988e6d8bc0364fc0596ff78","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.fbed85cd.tgz","integrity":"sha512-WYj1vjX+dMhO4OoWKR1enCOb3T2Y3BmY+FHrMJ6Chn0SdHAelEXLukFfuwKd+HozwrtKKDdyQmBf0Rgr300tXg==","signatures":[{"sig":"MEUCIQDQrMh3mBT1LFD/eMAkOuAmZwXQ9b5MfZs2Ze/aO7/ObwIgXMqkid7XPUue7kVnJtUQ1dBg7bk7OCs/z95B40RBXs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ff2b362199706e3db988e6d8bc0364fc0596ff78","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.fbed85cd"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.fbed85cd.tgz_1510605464722_0.503282000310719","host":"s3://npm-registry-packages"}},"0.0.1-rc.19":{"name":"primer-popover","version":"0.0.1-rc.19","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.19","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b6580fe5b1a07c3aa3a0f8d52160956e99639ede","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.19.tgz","integrity":"sha512-YZhPh+r/8/wzPtYhoSdNa9ZIJESsjJ8zWw6whkIpmB82TWlWjk++OnzgBGzqz8WyeZNshnCOlQWWrPQyh8HZ+g==","signatures":[{"sig":"MEUCIG2uQZIWNfmbXIegDsFnnRZDzRKJADlbmLM3wkpo1iLlAiEAzjpxtq7VeRDnkUoeHTRZ5arTsQpkQbXZAJMKpG9jzQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b6580fe5b1a07c3aa3a0f8d52160956e99639ede","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.9"},"peerDependencies":{"primer-box":"2.5.1-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.19.tgz_1510613129468_0.43259992031380534","host":"s3://npm-registry-packages"}},"0.0.1-rc.20":{"name":"primer-popover","version":"0.0.1-rc.20","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.20","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ea9ab8cfa58ee7c7cc1192e967b1a110cc53ae62","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.20.tgz","integrity":"sha512-GGHiN8JJW27vjLP8XdxWWuVvKD1k8n85VkijuvbdQQv6xPlzf8x9vw27Cp6kP1izpzsjG9qBlhUmEcyQWsGYZA==","signatures":[{"sig":"MEUCIAhiD8Pj5R/e8C4tqMwWCX7S7gPFnm0af4f2G/V1eARGAiEA+AkUjIKwrCU9XlTkXtN+2cHruLEUZnLEviNarMAitiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ea9ab8cfa58ee7c7cc1192e967b1a110cc53ae62","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.10"},"peerDependencies":{"primer-box":"2.5.1-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.20.tgz_1510618679344_0.8455825464334339","host":"s3://npm-registry-packages"}},"0.0.1-rc.21":{"name":"primer-popover","version":"0.0.1-rc.21","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.1-rc.21","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"119c7199c8faa2bb478ad637a690c947ff588f57","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.1-rc.21.tgz","integrity":"sha512-lG4/BrwKv8bbiKX0SLC0H1pyQvOoejR0U++QuL3tnKYDZw4+0BI8IBkQWwH9/fYnxW6iEB+E8vfYxvjzcDK8rA==","signatures":[{"sig":"MEUCIHuNTnT/aGAVKaYoXoRSDqMXTWGtmQU1t2pzYSfohwZiAiEAwGAynltaIJ0xAzlFuTazGdxQGqgKWCIT5B2CQXRoX+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"119c7199c8faa2bb478ad637a690c947ff588f57","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.11"},"peerDependencies":{"primer-box":"2.5.1-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.1-rc.21.tgz_1510619242376_0.6091000256128609","host":"s3://npm-registry-packages"}},"0.0.2-rc.0":{"name":"primer-popover","version":"0.0.2-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.2-rc.0","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa9ca143ccbc112ec176eb2a78d54fdaf8b23b55","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.2-rc.0.tgz","integrity":"sha512-PsABH3cipRwZc6G8TgrGwe4UBvB5l+Nf9q0YGRG9vf8NjlTWyrgzdV+Z8ePZK8Bq+Vp4a0m3GfU9bxfW170rzw==","signatures":[{"sig":"MEQCIFr9ADzqGZMkb4SqwQIpJ6/D9jBJzGW5MUtr3n70GBUuAiAC+2O3JuGrsn3TKpKxbJhhFrOAJIwiJgANgM6NCcSiuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"fa9ca143ccbc112ec176eb2a78d54fdaf8b23b55","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.0"},"peerDependencies":{"primer-box":"2.5.2-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.2-rc.0.tgz_1510620672478_0.8178739980794489","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"primer-popover","version":"0.0.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b59cdd0f0de6d8ddfbffce51993902e109775976","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.2.tgz","integrity":"sha512-3P4aaZWMjgRYJKsF+ytFUt0o8O/92xYbdH0r8F6UUd86QmltTcwisbfDRi4FB44Ruh6lCoix5pi3bvDXyR56XA==","signatures":[{"sig":"MEUCIH3qOu7//GB1ciMJC7HfZSBsQkYEQt2+JSOoRJgO5R5kAiEA3gjfDLxFRJTVl62VKbw7mcHuE24frkeQR6VZmrXeTgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b59cdd0f0de6d8ddfbffce51993902e109775976","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2"},"peerDependencies":{"primer-box":"2.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.2.tgz_1510621318279_0.24746733671054244","host":"s3://npm-registry-packages"}},"0.0.2-rc.1":{"name":"primer-popover","version":"0.0.2-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.2-rc.1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5d722d121184826b00edcee7f002b829a7489ef7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.2-rc.1.tgz","integrity":"sha512-GRzsyYnZQUW2wuUhAysfhT+ZXPBVSsi6wM1kwVmi2dEjQ4ZwJ3fknyOfA6Xaimy/rvr/obg1UuMlihWWqNAOxg==","signatures":[{"sig":"MEQCIBD8dnoY26BfDw0MZuCd30mNADY5RQRaObV4R4HZfiScAiB6TLPir/0VNAaHzTBx0G3wGwgTsNDRsK/jWptpaBI8nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"5d722d121184826b00edcee7f002b829a7489ef7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.1"},"peerDependencies":{"primer-box":"2.5.2-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.2-rc.1.tgz_1510676838089_0.938645486952737","host":"s3://npm-registry-packages"}},"0.0.2-rc.2":{"name":"primer-popover","version":"0.0.2-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.2-rc.2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1f87fedc3c262ef774ce7a4bcaf22a5713d3e70b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.2-rc.2.tgz","integrity":"sha512-/RvdBo8HrpNxqhQ3322v2fgCip1ubgn7hg82ItJn/ShoOwebb3EJrpp01aseIQLgJl1L6Cvv4Aw/WpdzjShwNA==","signatures":[{"sig":"MEYCIQDltoGH2NAFpd87j8RoN4OQUbqLeWNpiFYFhdEfEt2cRQIhAKkvVvi3qhhFtIgHuS7d6L6kfLnRuHfISqNBpDUcxwnI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"1f87fedc3c262ef774ce7a4bcaf22a5713d3e70b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.2"},"peerDependencies":{"primer-box":"2.5.2-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.2-rc.2.tgz_1510679849737_0.9419752026442438","host":"s3://npm-registry-packages"}},"0.0.2-rc.3":{"name":"primer-popover","version":"0.0.2-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.2-rc.3","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8e49d1fac36c0507f789a7c535726295f6d1a32d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.2-rc.3.tgz","integrity":"sha512-297gsr+HR+vuqgz+YezZz7pIfKMpALdp08EXnVLiDTA3i/yVra5eAgrBF+5cb7P8+JDgm0y2UInRnAmdVJbf8Q==","signatures":[{"sig":"MEUCIAhhM9lctIbkakvHm9Nx4YotQ4Yd6EePK1+x9ZhTnpQLAiEArRJGiui+IYuidzsAr4pFkJv0TiPmT6hNF5oaLalimn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"8e49d1fac36c0507f789a7c535726295f6d1a32d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.2-rc.3.tgz_1510689604358_0.23526982148177922","host":"s3://npm-registry-packages"}},"0.0.3-rc.0":{"name":"primer-popover","version":"0.0.3-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.3-rc.0","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"546218c40f9b967de5bc2fd120abe62b3416dd7f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.3-rc.0.tgz","integrity":"sha512-1wVbcro9iqST0dsV8DKM1ztrizpZ4i+UZCH3fI+XlZtxpJBxW5lv0iR1Qm0BRU0FsQRjH8J+pFr45enRBxGTjQ==","signatures":[{"sig":"MEUCIQD2ruyAXvRszUTAvWo6NxG+l1Uufub+kgmWwePwMWGJ+gIgGNNTcslf7QyTcDK3mz3fdLRt3hBmbQ6V9c+nc0QYrXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"546218c40f9b967de5bc2fd120abe62b3416dd7f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.3-rc.0.tgz_1510694761802_0.18565948586910963","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"primer-popover","version":"0.0.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.3","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"393ed9988b7a8a35581555aae34995e15fbb8836","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.3.tgz","integrity":"sha512-OQiOOtZOw2XFkBhzU7Go/8IqyIUW65WijEZYe7eagjDQLCWTUyeJ9662HJCT5LAMoAe3HdqdYI5/ySfReCDOOQ==","signatures":[{"sig":"MEUCIGtvWnpIOG1kieUf0NyZNy6N+PEePMJyXGT1XHXki5LmAiEA04KGnBd7NM6CLfdPJ8czonJOFunmMFKgIp3EDnIyL4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"393ed9988b7a8a35581555aae34995e15fbb8836","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.3.tgz_1510695697778_0.3188891648314893","host":"s3://npm-registry-packages"}},"0.1.0-alpha.0076710f":{"name":"primer-popover","version":"0.1.0-alpha.0076710f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.0076710f","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"462ee4b58fde0c32e04666e81cdbde4c39497d89","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.0076710f.tgz","integrity":"sha512-V/7wIn7/yUY8qHiD2PlyulILGnh3A6GEMXqwaJpYuSjyBpeA3ZB1OtgQMPyXT+cpUuQWvEEctmYiyUGjAFxBpQ==","signatures":[{"sig":"MEQCIHr0I8EEmfZqpB1UyHtCC+h8ElNmmLRb31NltqV3Dkk9AiA5H5WSL81dlK44b7BUlMzETu9gaPGiB6s//hiBCCChQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"462ee4b58fde0c32e04666e81cdbde4c39497d89","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.0076710f"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.0076710f.tgz_1510698878631_0.4663013054523617","host":"s3://npm-registry-packages"}},"0.1.0-alpha.46a65560":{"name":"primer-popover","version":"0.1.0-alpha.46a65560","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.46a65560","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"77edd83b96f2d853d504a5730eae4d6177884aeb","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.46a65560.tgz","integrity":"sha512-5ecrfnSPlhvjT1/9+5OF9hqt07yrtPD7nmSkkryo5hNPTUUDdN5pHofawMIznCZW46dOCl3yycHt1+Jp1gXSYg==","signatures":[{"sig":"MEQCICnjF74I1crtUwe1hsIlKAM7BhxRXqYFLmV+dfloF1LbAiBPP3Dn0lfBLAs0w9QIMsopTvpMLBMQnmoxRifZ+iWynA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"77edd83b96f2d853d504a5730eae4d6177884aeb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.46a65560"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.46a65560.tgz_1510701114922_0.22647368512116373","host":"s3://npm-registry-packages"}},"0.1.0-alpha.0bad1ef1":{"name":"primer-popover","version":"0.1.0-alpha.0bad1ef1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.0bad1ef1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7a0b912665235ec0cd5d962dd38d0ad126fe29e0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.0bad1ef1.tgz","integrity":"sha512-EILy3EkyGRzjMI6tLUXg0XBQOQb99UqGqS3AAVqKrLm/UCt3aiY9Kdh2HTuVWc4u9ID1OBPpEeoR2JeP6Nvp3Q==","signatures":[{"sig":"MEYCIQDkNdySZwypqcnaVpjwqulCoNgiMmWG3NCR3/jYvDBYwgIhAPPmrauLlGuK2x0eUAUwSbbu9MmD0yDmoD5fr/D4fPjZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"7a0b912665235ec0cd5d962dd38d0ad126fe29e0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.0bad1ef1"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.0bad1ef1.tgz_1510765398954_0.4727465594187379","host":"s3://npm-registry-packages"}},"0.1.0-alpha.62bcf358":{"name":"primer-popover","version":"0.1.0-alpha.62bcf358","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.62bcf358","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"946da6198a49e13811a0d007b1a95795ae86f487","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.62bcf358.tgz","integrity":"sha512-ixX0wtzR9WMsiiiE2m2GFEFBmlON+V/7JNwyWcPnduYzwztgSRzqQ+1+2Yzcn3rVeW2wu2aRgmS98BSgG2E7pw==","signatures":[{"sig":"MEYCIQCcVnKKJ51t5RzdTQYN7X/zZkKMJkb/l2jxhvEYoxZWjAIhAM/Rz2FrIRcyL2wQHSAtmGG8tb0HrtNwROt2CzOjfOOR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"946da6198a49e13811a0d007b1a95795ae86f487","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.62bcf358"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.62bcf358.tgz_1510768419672_0.15534653794020414","host":"s3://npm-registry-packages"}},"0.0.3-rc.1":{"name":"primer-popover","version":"0.0.3-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.3-rc.1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8edf3609f0c2d92adcc68e7526408c45900752d3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.3-rc.1.tgz","integrity":"sha512-i7E8Xj3O0wxg8yZ43mToX82n57d+p/5GPNDnWVAgG1yGweqvMeERpqmKv16irwb6fH6/l+G9r2tgmDerR0BDpQ==","signatures":[{"sig":"MEQCIAtGJihWBS9nOaRYQ4VfvnLgPEE4Atx3Xm6UXBb2w3xDAiA0GTWUtgkXMUJEbIVWVFAGtI+GkeTgvKJRgr8DPf090g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"8edf3609f0c2d92adcc68e7526408c45900752d3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.3"},"peerDependencies":{"primer-box":"2.5.2-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.3-rc.1.tgz_1510769787819_0.36081206193193793","host":"s3://npm-registry-packages"}},"0.1.0-alpha.c618f034":{"name":"primer-popover","version":"0.1.0-alpha.c618f034","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.c618f034","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"433f8d8e8633428aadfd47cd6af7c200ee4016a2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.c618f034.tgz","integrity":"sha512-a/rEUu+/igHEbszxZSYPo47HOAgOUSMRr44D31zWVnZPHFMrCGzocZdVWABZOplv/6rWgnf1muF1F6V9v8eiXg==","signatures":[{"sig":"MEUCIHvzhp4tPpIOSfii1UM28UnS3kkhjQRxBr285GVDU0htAiEAolSJ4bqcKZ6FtgLgZgErBQmoO9AXUzmT2zzaF4XINx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"433f8d8e8633428aadfd47cd6af7c200ee4016a2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c618f034"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.c618f034.tgz_1510770498976_0.01522184768691659","host":"s3://npm-registry-packages"}},"0.0.3-rc.2":{"name":"primer-popover","version":"0.0.3-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.3-rc.2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1aac2f8bc107c536067a3956779981e8f3ce51f3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.3-rc.2.tgz","integrity":"sha512-4Oyyze4GMCjs/AxpWi46VRuZ4jaJJQPb0gZShzLJ5UXoEr1IzN54JItTbDu/FBFqcJhkjhvIWch9Wb61Kzyx3Q==","signatures":[{"sig":"MEUCIENLxCbaXPHXDw2BNC03d7pzBlxyVrlEK4htGbcMAvx4AiEA2knypY5CXgdsqv7rvMD/OUPKGvmrMwsE+n0/lRpebOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"1aac2f8bc107c536067a3956779981e8f3ce51f3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.4"},"peerDependencies":{"primer-box":"2.5.2-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.3-rc.2.tgz_1510774581202_0.3375885703135282","host":"s3://npm-registry-packages"}},"0.1.0-alpha.b209ba21":{"name":"primer-popover","version":"0.1.0-alpha.b209ba21","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.b209ba21","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8520a29c01b5e8cc02c64e5d73b9ca76aa2a0673","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.b209ba21.tgz","integrity":"sha512-fwAEXdGgEwyFmCvyEsuPzqMzZ1/93AamNXVjkcELqQbbscyj117/HY4HJJGJuruDJe6cLFVCgcAACa4m9b7PtQ==","signatures":[{"sig":"MEQCIEJG/V+EP+D2YoVukChwHO10gNN1qlEvohBxHYxLHZdhAiBjuOgJxg4NBMk2YiQ7ZieKBrlNzknsCImVTUEQOWiooA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"8520a29c01b5e8cc02c64e5d73b9ca76aa2a0673","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.b209ba21"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.b209ba21.tgz_1510777570485_0.988960123155266","host":"s3://npm-registry-packages"}},"0.0.3-rc.3":{"name":"primer-popover","version":"0.0.3-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.3-rc.3","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a87362c243eec9820f84d6d24377ff6a565e7758","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.3-rc.3.tgz","integrity":"sha512-3+gIPMKu5fixu3wJ0exrnjRUguJZOmTM+U0sHvRjOT/5aLHp0Bsy511somR7KBUpQFzQPORaxwmrl5HYT5uF5g==","signatures":[{"sig":"MEUCIHjkkinGD5fF2UwfQg9ftPHE53baoouIX6xaNDriV4tyAiEAuEEtHc5rQoJDMLfFkwsOVouiN8xqs08YYXIdVrga4Sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a87362c243eec9820f84d6d24377ff6a565e7758","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.5"},"peerDependencies":{"primer-box":"2.5.2-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.3-rc.3.tgz_1510781131715_0.24432781292125583","host":"s3://npm-registry-packages"}},"0.0.3-rc.4":{"name":"primer-popover","version":"0.0.3-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.3-rc.4","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"eedc7667a6e36ed04ef33468f40fd0c2ddb6ce21","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.3-rc.4.tgz","integrity":"sha512-ur8EahrholPwYIc1AOA8TSZtDRQiyjlGOpKIyKyS8gcixuU7jRNOcshh/jQcQxBfzLIe6pgcVapIB6/cuVVnGg==","signatures":[{"sig":"MEUCIAChUfL6wG6rLB2R6TRnfrWwfzyBZFXvYZleMqVcZ3uAAiEA5olcLwey0RISXyLRl8eQRpeSRRf9xrjzXhlnJq78NbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"eedc7667a6e36ed04ef33468f40fd0c2ddb6ce21","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.6"},"peerDependencies":{"primer-box":"2.5.2-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.3-rc.4.tgz_1510789073866_0.7084144614636898","host":"s3://npm-registry-packages"}},"0.0.4-rc.0":{"name":"primer-popover","version":"0.0.4-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.0","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"584a825c19c841fd42fbff91173767527a9abd11","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.0.tgz","integrity":"sha512-XWfig4b+qWZPxeyhOJUIbBCKBMSYuX34ZdyK25nJyWZhD/TQGFX4k+UbLODpukip3ghbbkh0t4Aw4yO0vhSm5g==","signatures":[{"sig":"MEUCIQD2BvRW5agCmEa41CNPIX28J92narIHMgr1toMxDEyDUQIgU8SNKDNtrQiz3XfuRd78yQ7qlFXcVartlCXCy0saIz4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"584a825c19c841fd42fbff91173767527a9abd11","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.0"},"peerDependencies":{"primer-box":"2.5.3-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.0.tgz_1510789642414_0.7277138519566506","host":"s3://npm-registry-packages"}},"0.0.4-rc.1":{"name":"primer-popover","version":"0.0.4-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c15198299dcc43f8c3f5ed1c4d24a20bafece369","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.1.tgz","integrity":"sha512-fz3yUPOw/3qJN0m4qmb/2+gGh0cHyooOdzVdZ4hqL0puicGI9B60Ve5o7mtnB9BMhNulb2/JSXwa3uTS4gcA8w==","signatures":[{"sig":"MEUCIQCh123YK5XO1vOVR7G5ynocDcIMtsyw/DiRkIZGGROlPgIgU0C+jubfKis2Y2UjEkUSFsioZOW3kuHeLUyPb9jkH7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"c15198299dcc43f8c3f5ed1c4d24a20bafece369","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.1"},"peerDependencies":{"primer-box":"2.5.3-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.1.tgz_1510790170319_0.19899550499394536","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"primer-popover","version":"0.0.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3b6cbdc0ee5d4a630a1f1136c2dc617f9aafb7ba","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4.tgz","integrity":"sha512-RXYLJE0itxi+CuCStTAmEIJX7EE9r6Jy539ANp1bvLv3TZ6BPQajVmzoygpSdjL82ccnQwWvnsEPHu3Gym3Wag==","signatures":[{"sig":"MEYCIQCT44nkQXwmcmz+IlwRHZhfw/QaE9KeDY6IkLC7T9tUVwIhAKClg2EAvlObSmjTZmwDQmqp2bcOsDgLr3ZDAig53558","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"3b6cbdc0ee5d4a630a1f1136c2dc617f9aafb7ba","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4.tgz_1510790885599_0.1839316680561751","host":"s3://npm-registry-packages"}},"0.1.0-alpha.ef159fe7":{"name":"primer-popover","version":"0.1.0-alpha.ef159fe7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.ef159fe7","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0af62571e14d55325a7838a294f47b3e4ba3e869","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.ef159fe7.tgz","integrity":"sha512-89q9WHcpbIcJUBKJWueVnsxt6t4NXxhBHqEDhCCAqdTCDl9Gby654pReU/dy+hfNBsES0Tlob7/6mtQC/V2SUA==","signatures":[{"sig":"MEUCIHQK5r705FPYtTAw9UQ/dAGm5km5c+gGLWlpuNPm5xvpAiEA0qAwrWsBHyjFjfZRFo6/7UF0wFIzjRn7UFvi+Ll2YC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"0af62571e14d55325a7838a294f47b3e4ba3e869","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ef159fe7"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.ef159fe7.tgz_1512436347886_0.8432854635175318","host":"s3://npm-registry-packages"}},"0.1.0-alpha.da9ed3b0":{"name":"primer-popover","version":"0.1.0-alpha.da9ed3b0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.da9ed3b0","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"283f4b301748d8ff7dd9b4f2ad1873ec3d264837","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.da9ed3b0.tgz","integrity":"sha512-AyscXMfr0ikq/reckxvIMBDUElv6NVceKnvn46pbfo51lQRBYKOUpzS6r4r/avC8p5zp3pDMsWzBIOx1JP6YBQ==","signatures":[{"sig":"MEYCIQCPM93/3elog7VQ2NNFFVjUy6M+jiyFYvvycKyZkVku3gIhAIi7D2mUN9yqkISQYgnoF0RaDyI2t+lg0QzjymOAtvl2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"283f4b301748d8ff7dd9b4f2ad1873ec3d264837","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.da9ed3b0"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.da9ed3b0.tgz_1512584400924_0.22341492772102356","host":"s3://npm-registry-packages"}},"0.0.4-rc.2":{"name":"primer-popover","version":"0.0.4-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"229b3a876ce3f628335c5310c2a253f818f90fd6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.2.tgz","integrity":"sha512-Ku3+Z+9qSLcJWZwVQWwjB7B2Jath4Q49ucRrekJS+XGBGKuuhODC2xMWP7qRt6s+/taoSVTTBlFF0/zEBvBKpg==","signatures":[{"sig":"MEUCIQCfd8vzIdLqgkL0wdVRElugs6aa/gefSMUrWeMfZKT4kAIgOz/szSNKlphNS+Bvcsi6gmr0lhjw/H0IaSuRFf28b7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"229b3a876ce3f628335c5310c2a253f818f90fd6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.2"},"peerDependencies":{"primer-box":"2.5.3-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.2.tgz_1512678714108_0.8880002058576792","host":"s3://npm-registry-packages"}},"0.1.0-alpha.fb510a5d":{"name":"primer-popover","version":"0.1.0-alpha.fb510a5d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.fb510a5d","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cfa174d8867c78a12a9ddd77d7746977b0ec5f10","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.fb510a5d.tgz","integrity":"sha512-YZE+/vkFMswoVEWP8xZjR0IobU06SPGlmC/O4y0UHs6wx2oPz4rkhcZ0zkXeFx7ZHPCRmNhFm4CH9lkPkGgriw==","signatures":[{"sig":"MEUCIQDu7MSR0EN5aBmJqyHxpJF6F+sjXUfAwhcTCseA8vglXAIgCg0mredYtTz9Zy9P92PDwGPYRS1IqAUZIPmGyF60MSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"cfa174d8867c78a12a9ddd77d7746977b0ec5f10","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fb510a5d"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.fb510a5d.tgz_1512682258285_0.37796406657435","host":"s3://npm-registry-packages"}},"0.0.4-rc.3":{"name":"primer-popover","version":"0.0.4-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.3","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a746fa5d39ca6d78fb833c027b9f8e1e328f723f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.3.tgz","integrity":"sha512-JtNnjPTTSJdyIMkDzKhpJ6r2T6aWzHQdEZTtCf9p9GEc/eWa0KTnXPpSQ5cFd4f4+z3xIQND0+bOuB8f+47fbA==","signatures":[{"sig":"MEUCIQD+MentcbN0H067QYhO2/3vmZEQeJnRF1jbpxnic6MVaAIgBFo6hXoj9uiJKRHou9Fg+B/il3yfbEv/c+HAe/UlDeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a746fa5d39ca6d78fb833c027b9f8e1e328f723f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.3"},"peerDependencies":{"primer-box":"2.5.3-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.3.tgz_1512767017057_0.696313448715955","host":"s3://npm-registry-packages"}},"0.1.0-alpha.ed73f8e2":{"name":"primer-popover","version":"0.1.0-alpha.ed73f8e2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.ed73f8e2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b14273fe7c0fc4d574841fdbb876dc4f65bd4bb4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.ed73f8e2.tgz","integrity":"sha512-HJGfNCuwFDqIgObN927XN74DRk8JFBxyyFYMpWqTSkjg6IE51fmNiIIJW4P869Mv1qrtDZbeupxnM2JqmjNr3Q==","signatures":[{"sig":"MEUCIQDrgNup0gek4JvS1UJ+X+V8RNPnZ+WJxhENLrlUz2ixFAIgMI8PQROnexKqD3Vka9Ff7JAe75QWNfeJHCY2DJR4vFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b14273fe7c0fc4d574841fdbb876dc4f65bd4bb4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ed73f8e2"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.ed73f8e2.tgz_1512774879419_0.8211070029065013","host":"s3://npm-registry-packages"}},"0.1.0-alpha.6d3383f1":{"name":"primer-popover","version":"0.1.0-alpha.6d3383f1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.6d3383f1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b74ed9a093f4e7d35a9e24bde197f2018335af95","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.6d3383f1.tgz","integrity":"sha512-Q4TcBC4YIM4DLc3nK88OzYGN2BnUgH79yGPt0kf2hJpunlaqyECiseSV7BObggYHXAH7iD0Jrvr7ji6MYdSzeQ==","signatures":[{"sig":"MEQCIHXj6kp4bjnoEDZPD5VR5OkS5lmhVR9IdjtzI68JmDU3AiB1MMekCkjbqwoQ/grDz93PfjQfR8RYD8ycccbgHOT6vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b74ed9a093f4e7d35a9e24bde197f2018335af95","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6d3383f1"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.6d3383f1.tgz_1513007430462_0.6557423912454396","host":"s3://npm-registry-packages"}},"0.0.4-rc.4":{"name":"primer-popover","version":"0.0.4-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.4","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"56d015bc98a0837fb49ba2cce5f0863894107b0a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.4.tgz","integrity":"sha512-pUInSNS/f2EPRQMtGW7RMTmoYU4lbdH8DxrForptFoioxd4MaygPXhPOnmDUtYtupNd2t/slOhMPYIllXcGfVw==","signatures":[{"sig":"MEUCIQDMHLmUKnX72Yk5AMiTqM98BoAltPC3bsMrjuRPjlzEaAIgPhz5nySxccnYmdRLAyLXQWuReZP9IsIkpF6BL9helzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"56d015bc98a0837fb49ba2cce5f0863894107b0a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.4"},"peerDependencies":{"primer-box":"2.5.3-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.4.tgz_1513007646250_0.04553111712448299","host":"s3://npm-registry-packages"}},"0.1.0-alpha.c69cc480":{"name":"primer-popover","version":"0.1.0-alpha.c69cc480","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.c69cc480","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"699fb7c894f93daaf2cb8ca2ca1209863fc35789","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.c69cc480.tgz","integrity":"sha512-p8sNpoOtTETArmZg6rPI4Mj5YQAt0mTL2ozLG4ZQ3Fn/lODdT0wY/5F2tVAfwbMdTe6MoBCkcfi9HJu/BWkZIQ==","signatures":[{"sig":"MEYCIQC+v1wSMLaq6P5G9IFNOpFNncRZ/rvefT/leET4/jCXmgIhANdG4tj9StBHJP7e+gMt7JgjgEtcl5ZwEZlZeSxXqAGw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"699fb7c894f93daaf2cb8ca2ca1209863fc35789","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c69cc480"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.c69cc480.tgz_1513008590628_0.4656928670592606","host":"s3://npm-registry-packages"}},"0.0.4-rc.5":{"name":"primer-popover","version":"0.0.4-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.5","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ba6fe0a9b287b3f612b3b8068037564d6371d362","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.5.tgz","integrity":"sha512-+pQVkYCDM98TpqMerOC0UHD8L6wmir9WWERsQnyZJLiXR5GjNg6vI7YLqhc0TECjr4a94SIl2A+VlQDSUWjDuA==","signatures":[{"sig":"MEUCIDtmQay+6so0T2jxvaIG8LQK/HJYByk8vOfuh+dy6FTNAiEA5RPgKkr/HWppH6BIaDat+xYMNjPEqk3ldGr/r4nVKOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ba6fe0a9b287b3f612b3b8068037564d6371d362","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.5"},"peerDependencies":{"primer-box":"2.5.3-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.5.tgz_1513009643507_0.23650334076955914","host":"s3://npm-registry-packages"}},"0.0.4-rc.6":{"name":"primer-popover","version":"0.0.4-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.6","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85505ca8562e1702eff42b43803ada26e23d37ad","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.6.tgz","integrity":"sha512-/kj/bcHj5o3Ecvd7JoP/LXRahtP6O8BAFRhEqyPLDmMoPhQmKEQ/V/qWMOndNmeXHhyjnGTlUfZ5DfU9BXGDDw==","signatures":[{"sig":"MEUCIAhnY7bzCRKEqVtQUxp5l2ApstV2V77JBi3xAdjMhLS+AiEA5MmgRLSNqup1EZKINwjCTDdprUul0wiF98EC5oRCp9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"85505ca8562e1702eff42b43803ada26e23d37ad","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.6"},"peerDependencies":{"primer-box":"2.5.3-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.6.tgz_1513625338447_0.508538339054212","host":"s3://npm-registry-packages"}},"0.0.4-rc.7":{"name":"primer-popover","version":"0.0.4-rc.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.4-rc.7","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1d90ea8a7e1872778d48f6c487712ec1173c21f0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.4-rc.7.tgz","integrity":"sha512-NprcZP9btoXgVi8fyNVoSOYwz9YTVlnHCAwUL8Uicz8kJViusZFs2IFlMMHmjIPjjomzAmmNeMMY0pX9Iv6AfQ==","signatures":[{"sig":"MEUCIEApkXnWllH8mYPlmYhEdu1SCp70Kta2nvrxIwejYZSFAiEAz/MPgr71n7stBuAV0MotOgFqL+WHiP14gx1xWAy1v08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"1d90ea8a7e1872778d48f6c487712ec1173c21f0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.7"},"peerDependencies":{"primer-box":"2.5.3-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.4-rc.7.tgz_1513626553507_0.7198683936148882","host":"s3://npm-registry-packages"}},"0.0.5-rc.0":{"name":"primer-popover","version":"0.0.5-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.0","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"79c4ae9f458ab4ce8ecded7d0aec53956a60f7ac","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.0.tgz","integrity":"sha512-O4m4ZtH28Wb3KcciLih9v+cu3IP3B8JXKLQ/bIk5Boe+FIcECLmnpwS7uvsMMUK/b3y92mfk+5yrL9cGEBXymA==","signatures":[{"sig":"MEUCIFT41JxuA9XTbkrac+gi0KGiaOC1YI4jiCZa6qaL0Y1SAiEA3ZdBjSVMMxGt3KfS61pahEPpP5AdExAXwGO2hDsxoQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"79c4ae9f458ab4ce8ecded7d0aec53956a60f7ac","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.0"},"peerDependencies":{"primer-box":"2.5.4-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.0.tgz_1513626819902_0.8354450184851885","host":"s3://npm-registry-packages"}},"0.0.5-rc.1":{"name":"primer-popover","version":"0.0.5-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.1","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d44ec4279207baa35cc14ecae460b35974582734","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.1.tgz","integrity":"sha512-r3P1RUA2dQNZfpWhZk5rdT1wyKBANFLYdp4METeIMIs4FIp9dTF7pOdI114UxDrKlE8jCO9fb8XcQC4uUquCvg==","signatures":[{"sig":"MEQCIFnCOoWplubJiGxsCQIqnZhviL0ajQInSO0pG1rCB3yaAiApsK4jdDcTN4Tdy2SH+JMnYqxxpQ+VVmFXQqi/gvXm7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"d44ec4279207baa35cc14ecae460b35974582734","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.1"},"peerDependencies":{"primer-box":"2.5.4-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.1.tgz_1513640678511_0.708205905277282","host":"s3://npm-registry-packages"}},"0.0.5-rc.2":{"name":"primer-popover","version":"0.0.5-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.2","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"61023fe0cb3cfe3f488dc570e772907d74780340","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.2.tgz","integrity":"sha512-WK8Ge/Aj8vpsViZUVK2mUwFlWKyC/r7giC93WqDhWrWt6FCBQZMwDRTluhw1eTSwdEHSh3W+njPJDrApt/jQnA==","signatures":[{"sig":"MEUCIAcE7Re72kyCNb01PAmCEP+qChRx4dwos1/ZYFjTveF4AiEAzB5FnnrftCBb1Vs2HKS0nMSlq22RJm+782CRR3Oq69E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"61023fe0cb3cfe3f488dc570e772907d74780340","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.2"},"peerDependencies":{"primer-box":"2.5.4-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.2.tgz_1513640789412_0.1665472174063325","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"primer-popover","version":"0.0.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5de6d62de06767df5e75f5281caa7b66280b00fd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5.tgz","integrity":"sha512-vrumiR1XKsIGZdu2t8+2yfXV47DGnagBtGwqcUXjQm/rJ+lf6wZFW+pIxgprmkI1a5RRusc/LglKcWqbpDU0Dw==","signatures":[{"sig":"MEYCIQDlKcriw3MRKfwy1kkYR5jpGxLvxkZvfd3VXrbeJKjfIwIhAIt7C6GiRMUKGO1SgPidqctiJbi9lHp8G+cqpGvEXPnK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"5de6d62de06767df5e75f5281caa7b66280b00fd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5.tgz_1513723173713_0.7793218274600804","host":"s3://npm-registry-packages"}},"0.1.0-alpha.3efde033":{"name":"primer-popover","version":"0.1.0-alpha.3efde033","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.3efde033","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a9bd9d0f7716a7b5ae2ff6df0d3503725afcc05d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.3efde033.tgz","integrity":"sha512-/v7kFnAK4l4C3m3isEWKHSzBN7kvGrr2hAppCyaR2uFbrGaHJZKbIljjeu+dyasLQyl+/FPKEJl6kP/i34XuMQ==","signatures":[{"sig":"MEYCIQCv0KJAkJBY/mwmOp8nwwR5VMBhhW19pls9P/kcAE1S+gIhAKEAIr7Qk3oGqPUan2G569vhfPj3dKrsn4U/We3QjYkW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a9bd9d0f7716a7b5ae2ff6df0d3503725afcc05d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.3efde033"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.3efde033.tgz_1515021329238_0.16363650746643543","host":"s3://npm-registry-packages"}},"0.0.5-rc.3":{"name":"primer-popover","version":"0.0.5-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.3","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"65717d227feae4ae91b4a0874959fceede5ad450","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.3.tgz","integrity":"sha512-gg6RR2WMdcjYgctpD1JeukMG0sCKioTzCnLmcphT2reW5cpdmxWlYtykEXOWkYqz+86341cEAUKojTzYRD9qxg==","signatures":[{"sig":"MEYCIQD3uFmQuMc509jxBIBFUt+/e2R9ApctiAK1kzwAAsP3nQIhAIu1bHure58kO5wF2x4wLhEZYpl+TqOFQNZdlEl3LeDF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"65717d227feae4ae91b4a0874959fceede5ad450","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.3"},"peerDependencies":{"primer-box":"2.5.4-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.3.tgz_1515112788434_0.0710918721742928","host":"s3://npm-registry-packages"}},"0.1.0-alpha.d02187f8":{"name":"primer-popover","version":"0.1.0-alpha.d02187f8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.d02187f8","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6f37e4ebae828e888a7524583acf814e09a99d3a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.d02187f8.tgz","integrity":"sha512-UAWVA6JKriJEcWhHwpkiQQoHeyJrrickaYp79OQ+41sseHgRiVnvR1hCFnd0Yo7vXmEUiMKROKTBhlMgJCgPxA==","signatures":[{"sig":"MEYCIQDxxl9rTh+BcbsbLGjcrDqowymTou9CiylF0wdA16iG+AIhAK74O54uMPefzlh/baZk7BuG/9sTAc8XiYdCFKi731TD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"6f37e4ebae828e888a7524583acf814e09a99d3a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d02187f8"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.d02187f8.tgz_1515166461895_0.2661880718078464","host":"s3://npm-registry-packages"}},"0.0.5-rc.4":{"name":"primer-popover","version":"0.0.5-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.4","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6d656da8edbe1d21b21fc5ebff3381b43a740d0c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.4.tgz","integrity":"sha512-b+acKlzy0idCwpZGBNrPkLyYw4Was72nF4oNp16/V/6aAEhho6/xP6/a68Yo0EkXX8RxChMV6Y63yXaL6eddQA==","signatures":[{"sig":"MEYCIQDT0eBJBjibXb08/wpAYilTVSERXioHoul++4wA4v1PxgIhAN1jDFJqJOyuD1c0zzjQzRgIJA29T8Dk5W0K9z49zpR8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"6d656da8edbe1d21b21fc5ebff3381b43a740d0c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.4"},"peerDependencies":{"primer-box":"2.5.4-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.4.tgz_1515169645609_0.7896497163455933","host":"s3://npm-registry-packages"}},"0.1.0-alpha.aea4ff80":{"name":"primer-popover","version":"0.1.0-alpha.aea4ff80","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.aea4ff80","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"195da174e773d43573816323fde392e744bc2ef4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.aea4ff80.tgz","integrity":"sha512-NwZWOUFwZFcl6W09+rQli/DKedLCS8zWcKhd+OGCHthMrj+R/6cOEFHxr3Q7345jYSqEhAFQXtrj03buEVKz0Q==","signatures":[{"sig":"MEUCIQCvM5ww26TqeX6+lwdsMYOZ1DqCAqTrUYrAKu95YwSwzgIgGqfLWuEOVgq3BEhTFyCBD5puhYauEvQ+zp+t+OA81KI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"195da174e773d43573816323fde392e744bc2ef4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.aea4ff80"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.aea4ff80.tgz_1515189258200_0.8687805840745568","host":"s3://npm-registry-packages"}},"0.1.0-alpha.a134b9ac":{"name":"primer-popover","version":"0.1.0-alpha.a134b9ac","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.a134b9ac","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6449a37c37cd642ac9681f0e26a23ff5942daa4e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.a134b9ac.tgz","integrity":"sha512-/xoMWmk2y+S452SK32bDcvnpkf8tfpfLIY+Vs3c86CeJjkCIYKW31g5DOnhQ3IqgVUsjBVqr9MwkwTUkLNRijQ==","signatures":[{"sig":"MEUCICx9sRp5oGpmqRobr8lolWX7dJeK1Lo6prIPG8hMxz5vAiEAnNIlozu1eSlXZ1nJibSc6OqUQkLBhQjlg9AneFE+91Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"6449a37c37cd642ac9681f0e26a23ff5942daa4e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.a134b9ac"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.a134b9ac.tgz_1515193539043_0.9598177012521774","host":"s3://npm-registry-packages"}},"0.1.0-alpha.6ab46488":{"name":"primer-popover","version":"0.1.0-alpha.6ab46488","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.6ab46488","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"44ce697ca2e023a91772001612796b9b16ff7d65","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.6ab46488.tgz","integrity":"sha512-YzXwcS/Be8a8CN18HUvuDZmGiO2JhVG3CefTo3o1sYEav+FREi0tshcaiBjyjYmRC2bEaeVX9EjqYiYYf7yqjg==","signatures":[{"sig":"MEYCIQDtUuztfHlbHbXOagCu1ffPZAmzeMO7uT4BpdEk3eaCwAIhALtCXBBF6hZ+LofnUwyTNMqU8RKplA8l39g9+pXxIrbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"44ce697ca2e023a91772001612796b9b16ff7d65","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6ab46488"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.6ab46488.tgz_1515193841949_0.5791272334754467","host":"s3://npm-registry-packages"}},"0.0.5-rc.5":{"name":"primer-popover","version":"0.0.5-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.5","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"99c262785cd53efa898fd54ae039633f572cfa99","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.5.tgz","integrity":"sha512-ZMuKG2ceOl5BkqBbCNTO8D+1IWrN8fmMGVaejaH+itbw+Px3yHvzF3NUJJiKVjVjju16jt2YyqVpn5BmudRXAA==","signatures":[{"sig":"MEUCIQD1BQHaUhcDM4Pn1DtNc76eKcyIAgLVmfEoe55od2JhVQIgZBZgKpFWktiAx7/VFYvwoDxr0xAyzD02qfCxrf+a8e4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"99c262785cd53efa898fd54ae039633f572cfa99","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.5"},"peerDependencies":{"primer-box":"2.5.4-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.5.tgz_1515259171299_0.9791235965676606","host":"s3://npm-registry-packages"}},"0.1.0-alpha.d2343bbd":{"name":"primer-popover","version":"0.1.0-alpha.d2343bbd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.d2343bbd","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d62212496cb6891559a7c391a0f8c6a5a2d28988","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.d2343bbd.tgz","integrity":"sha512-FLIrUn8saxd9I53aVhwO8GrDgWzUsZPV1O80y7NZC1JcCGdepL0frYjabTd5aEsHYTUmXp0GMjaEcy0EqTvw/g==","signatures":[{"sig":"MEUCIEycLxX4CacUkICmsBjok0g52J6e+rnqHYNSX3PHys9PAiEAxJaf05jJWAV6jcy9/wy7ZOCv9agiiMvzhLh53jBAryI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"d62212496cb6891559a7c391a0f8c6a5a2d28988","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d2343bbd"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.d2343bbd.tgz_1515541219702_0.36816208134405315","host":"s3://npm-registry-packages"}},"0.1.0-alpha.dd122634":{"name":"primer-popover","version":"0.1.0-alpha.dd122634","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.dd122634","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a7ef2fbb6f54bc75e74c6c95662f7c0c664db5f3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.dd122634.tgz","integrity":"sha512-xQsfEksV4BTEJheanjJVUBG5erkvPDhtz1qTRfP29ary37UoyiH+Uh4EQJskh1B2FkI6DNSyswlMk/2hfPk65g==","signatures":[{"sig":"MEYCIQD9oOTHzw1qehWmfQObPJ7ZwAFM8HZi8+gKq8daCnbaeQIhAKw2Drht670Vo7lgNl3mFMuEJyaITSFODpe79zumxywu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a7ef2fbb6f54bc75e74c6c95662f7c0c664db5f3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dd122634"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.dd122634.tgz_1515623536307_0.06424150918610394","host":"s3://npm-registry-packages"}},"0.1.0-alpha.9ecb500d":{"name":"primer-popover","version":"0.1.0-alpha.9ecb500d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.9ecb500d","maintainers":[{"name":"primer-css","email":"design-systems@github.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4ad6e1578aa5ff8acd931421fb80709a5d7714d5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.9ecb500d.tgz","integrity":"sha512-I4olaH3dxQL/QMMNYVBKJL+Dr4GdG4/BISf98FD3LPLWD2k1U9zAQPu/9UiUd4tH0Mxs7lPCFdPXJnG6abVhtQ==","signatures":[{"sig":"MEUCIDJJsbxsDCbC7CEpGZcgYKvzGLpP6pceJXWPqdTvN7Q6AiEAgeXey6qatmkV1RjnUKcEftGnzkI/XUDQ/EPsVWbbv1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"4ad6e1578aa5ff8acd931421fb80709a5d7714d5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.9ecb500d"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.9ecb500d.tgz_1515628345440_0.9006991900969297","host":"s3://npm-registry-packages"}},"0.0.5-rc.6":{"name":"primer-popover","version":"0.0.5-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.6","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"22b0c73dbe620554794daf9cbf8260fccd11910b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.6.tgz","integrity":"sha512-wARobFuT9eASzPYVbG4OVSTdFD4rbrxgHcEF5qiTEJ2XVCEVf0OZ6y/oSEUZ2m6duuMIJWtSo1hlrNk/ILOHOQ==","signatures":[{"sig":"MEQCIEmIGpQxbguWHu/TRUdwaqh4f7tV/FquwzOB2bcNvNdFAiBZnBnXTk4vAIUfNF6VCmkJ1vjKG635eyY2LAJjBW4Djg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"5.6.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.5.1-rc.7"},"peerDependencies":{"primer-box":"2.5.4-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.6.tgz_1515714419333_0.06563252490013838","host":"s3://npm-registry-packages"}},"0.1.0-alpha.f64f6abb":{"name":"primer-popover","version":"0.1.0-alpha.f64f6abb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.f64f6abb","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3cd6c4a66b0b617721c3cd23142d0688f4a3b5d8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.f64f6abb.tgz","integrity":"sha512-wcrOpMF84luOO5JGTeQrlIaFL7ufk0vBMpzXinCfTElu9yFTt3RygW4jXUq93bUK30Er/leo6RfVeNw40irizA==","signatures":[{"sig":"MEUCICFYYH7j6K9YBm3HwpAQcD2CMa3Qfo1rtNu00/NIN3SlAiEA8IGdI4ORUIe0rG9s88ljFCmmmK81ItSIlskFNhWbaKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"5.6.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.6.0-alpha.f64f6abb"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.f64f6abb.tgz_1515714476513_0.931443894514814","host":"s3://npm-registry-packages"}},"0.1.0-alpha.9c5fbfd8":{"name":"primer-popover","version":"0.1.0-alpha.9c5fbfd8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.9c5fbfd8","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4ee6babb776b87d7c59dd26d6143f7658943d69f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.9c5fbfd8.tgz","integrity":"sha512-waol3W/F6U/K7pP3eGcBaWMh3TPeG2dFZjvVVxiueBX+A17s34tBsDOczXuBVoOSQB/kyXHiO93tbbi9dJ3Lqw==","signatures":[{"sig":"MEYCIQDCyigFwrBSOya2C3TklXBNhJdzsDDbZbAlwzk7/3ySogIhAOzu0sIHMpt03MPkH/JbdYis6GfWiF0gci9Zc5xgxCzR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"4ee6babb776b87d7c59dd26d6143f7658943d69f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.9c5fbfd8"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.9c5fbfd8.tgz_1515776252472_0.8527510080020875","host":"s3://npm-registry-packages"}},"0.1.0-alpha.17592000":{"name":"primer-popover","version":"0.1.0-alpha.17592000","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.17592000","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f0acbdaeab04b39b7d3911f718a7fb8413dec72d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.17592000.tgz","integrity":"sha512-JD92fJgPA5tEjA2EaB/AXyUbrPoS53z7gayGXN4OJxePFUeUBcfg+0ckM9QsR+sGVuN/tmRsCXvGuKvMoCVoMA==","signatures":[{"sig":"MEYCIQD+nOZ2Fik1dSOMFer12qImD75DTtjWTh87aej5W3PFOAIhAPDEnh9crey7q4avOntpZrKwqPLdqpM/Mb+EZbZCserG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"f0acbdaeab04b39b7d3911f718a7fb8413dec72d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.17592000"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.17592000.tgz_1515785855744_0.9437886867672205","host":"s3://npm-registry-packages"}},"0.1.0-alpha.359598ab":{"name":"primer-popover","version":"0.1.0-alpha.359598ab","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.359598ab","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"91b56734bcd3139a71b52dc3d3570e53e286b8e6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.359598ab.tgz","integrity":"sha512-SGDVDkzZ4gMibxH3+16aTlbFa+nJ/zh5EwKDcAEDg8yXSQj78Qpzg4ahUfXdtxyFr5/1BPjzoSyxx7E/2MAyrg==","signatures":[{"sig":"MEYCIQCsuJ+5qnFRpG8sp67qmJIGoPkSkdD/DUgIDhhVSfHepgIhAPh+hkriM05ZmihdV+jA1LhtYtah+eSuYd1Zc7ONVFi3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"91b56734bcd3139a71b52dc3d3570e53e286b8e6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.359598ab"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.359598ab.tgz_1515787116688_0.1503120476845652","host":"s3://npm-registry-packages"}},"0.1.0-alpha.52e89b13":{"name":"primer-popover","version":"0.1.0-alpha.52e89b13","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.52e89b13","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"051fe7f2a18dba190d41b84084fea1f077adc28e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.52e89b13.tgz","integrity":"sha512-zYYDuANvRl2IheJmBP0wBgdWfZr9op9/3HcQwnqTtJpFOYROKaPSZZb5sLSrtc9N4Un+CLoZs2u8jy/Gr6HWuw==","signatures":[{"sig":"MEUCIFhOZpqwRcjTzkaRp6sssdjX1dI0b2g3/u+ruMhPk8YFAiEAnu1BR8n1Dg/g7xx5nckv6HGXcWNd48WEZwcxed9bDXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"5.6.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.6.0-alpha.52e89b13"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.52e89b13.tgz_1515787527717_0.8785588692408055","host":"s3://npm-registry-packages"}},"0.1.0-alpha.c4869e9d":{"name":"primer-popover","version":"0.1.0-alpha.c4869e9d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.c4869e9d","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3072050e4b11128c158b526e6c2f6155a9ad3e6b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.c4869e9d.tgz","integrity":"sha512-JtNFqGVN+hc8u8LClnoore8FnJygDhME5r3WARs8FHd5k/01LVfPIgyuV+SpPoA4fyQL3G+vjeFT8tz1XAs4VQ==","signatures":[{"sig":"MEUCIE4aBsg4R9ReHTEMYyy52/OdqYVWOfgR20hVMspKn6e2AiEA6NmtuSoRNQoxjbH+SseUsnpHtCcLriaN2DaBTV6P8ew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"3072050e4b11128c158b526e6c2f6155a9ad3e6b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c4869e9d"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.c4869e9d.tgz_1515788313439_0.7761929493863136","host":"s3://npm-registry-packages"}},"0.1.0-alpha.a4c3524c":{"name":"primer-popover","version":"0.1.0-alpha.a4c3524c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.a4c3524c","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8fabd68c8f4db8121e3292fa2d86514f7f8c6793","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.a4c3524c.tgz","integrity":"sha512-8Qa6Uva0bm8rE4ORC4RbXwZrAzjDdovMFkUtnnvyF9jEzX32pSetvppYB/NiuHXn2UkX2xXhC47zAi2gw6tkOg==","signatures":[{"sig":"MEQCIAZHOjARoWvvAkxMHGo0nvhKGjRZfZnBQIVvUl3MklfHAiAfTU1SlHydKdv2ntG/MhlCw3NTmyou+gwTvDZHj0AO1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"8fabd68c8f4db8121e3292fa2d86514f7f8c6793","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.a4c3524c"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.a4c3524c.tgz_1515788880228_0.2678187736310065","host":"s3://npm-registry-packages"}},"0.1.0-alpha.7ae35186":{"name":"primer-popover","version":"0.1.0-alpha.7ae35186","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.7ae35186","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f0aefb6da920f1aee1f6941d7c7708a89a0a8070","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.7ae35186.tgz","integrity":"sha512-16r1eKivlkNbBRv/MUJO/aeCBu2eR6ihAZHer79iuMpaSDpbbC6dkx9yxJJVbFJoQ+MzPyxFiDR81/xLcH/jRg==","signatures":[{"sig":"MEUCIGD06WvTHgnyfBcjU+WU+jW4NvHZu18DizBv/7KYvxWpAiEA54fx5zVT8STATlnh/jz2UKoI5R1a2NMS0JWiCELHCTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"f0aefb6da920f1aee1f6941d7c7708a89a0a8070","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.7ae35186"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.7ae35186.tgz_1515796692697_0.7985793743282557","host":"s3://npm-registry-packages"}},"0.1.0-alpha.36307d88":{"name":"primer-popover","version":"0.1.0-alpha.36307d88","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.36307d88","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a9f2f60471c777145e4c5e549f56fcb3acfb12b8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.36307d88.tgz","integrity":"sha512-gmSPecxbtsl39xKC8D4EljSNiu7ks4qzlAr003OfX+llf7mkUn+HjJm83q1PMkcJFq6yDlEGItoGLR+Q0dccRw==","signatures":[{"sig":"MEUCIEazEDdT8aWcKE9aWPvYcEoO6rGjaBbdo0shT7s2X5yYAiEAkoIrIVuncnbe9VJ7Q7l+H+HZUzoFPlGolbrtD9A8i84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a9f2f60471c777145e4c5e549f56fcb3acfb12b8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.36307d88"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.36307d88.tgz_1515801338137_0.9099600370973349","host":"s3://npm-registry-packages"}},"0.0.5-rc.7":{"name":"primer-popover","version":"0.0.5-rc.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.7","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b92e1405c2dca44a4cadcf15a9188a37c07880a5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.7.tgz","integrity":"sha512-PYulcTsUdnXVUhdwYbNI4QkEwd3CSaJisFYJBh5zL9UAYm29Sg7ZtCqnqSTrK2PuiYEWsnnKsxSy/Yh5nu9sVA==","signatures":[{"sig":"MEUCICiGgg+MfcpMixajz/vH3ppZrCi/fdpB09nC8SNVMODZAiEA2CXCEaX7sXdeLilIae/BwYOwrGt3tyh3yTDRl0Nzcjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b92e1405c2dca44a4cadcf15a9188a37c07880a5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.8"},"peerDependencies":{"primer-box":"2.5.4-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.7.tgz_1515801988316_0.010291489772498608","host":"s3://npm-registry-packages"}},"0.1.0-alpha.b6939e4a":{"name":"primer-popover","version":"0.1.0-alpha.b6939e4a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.b6939e4a","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b0fded85f412c22ffa2394f5f3f4ea3561a3c470","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.b6939e4a.tgz","integrity":"sha512-UnrpjDsvBzmVDUv4Y0a1cU8RdvqJYX0yeUfU7a/mrCpGrVCfUxGDcuHHPE37rPz/TjkCrjEkvzIy69Cmd2dsJg==","signatures":[{"sig":"MEQCICks0jS7ZaVRZ5voESFjrXv5IPj7zGHBcO13GXJ1vw6HAiAdJDc6REdQJB58NdLkWyS5KKcd5OaL3kmKhUuIA/5wxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b0fded85f412c22ffa2394f5f3f4ea3561a3c470","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b6939e4a"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.b6939e4a.tgz_1515802428798_0.9500268972478807","host":"s3://npm-registry-packages"}},"0.0.5-rc.8":{"name":"primer-popover","version":"0.0.5-rc.8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.8","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"be0322364ef24535bfed32acc6a70733e486366f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.8.tgz","integrity":"sha512-YrAkBvUMH8dKMOZoO2zCTJKVXHfb+gtpuOLgWORGcYisUbi7Lzi2jL2VpeBwmqKbluFGLwv4IMRcv5FmKK9gnw==","signatures":[{"sig":"MEYCIQCdemDuEvoX02yzBnKr66k57fOq7NGnaoZq/3IF4ZWbRQIhAKEMEePJIHKSx6khfNxeV8XQ2j50x07WooY1blcJVToo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"be0322364ef24535bfed32acc6a70733e486366f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.9"},"peerDependencies":{"primer-box":"2.5.4-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.8.tgz_1515802692940_0.44890215899795294","host":"s3://npm-registry-packages"}},"0.0.5-rc.9":{"name":"primer-popover","version":"0.0.5-rc.9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.9","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a4d790784e845a7c46d0486e332fae5cb1e70af8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.9.tgz","integrity":"sha512-ogxxm1gfaa3IOfN0dzM/2rtiLgf29fKIj3K8nOpKKjUVhgLmLjBLI7d/lHWJk25KPtmnYXqhPzfJN6D6tcTcMw==","signatures":[{"sig":"MEQCIBn5FibvFmC8S8QwtlwxDIk+c03Nkf8rCcmdJzbAS+lgAiApJCi3j6cK5DFXh84vYDaxAoOhIETKeNbDFB01qA/cCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"a4d790784e845a7c46d0486e332fae5cb1e70af8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.10"},"peerDependencies":{"primer-box":"2.5.4-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.9.tgz_1515803205370_0.8290290988516062","host":"s3://npm-registry-packages"}},"0.0.5-rc.10":{"name":"primer-popover","version":"0.0.5-rc.10","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.10","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2fd812b7c79cbabbe220fb73b57b376794a4497e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.10.tgz","integrity":"sha512-+vZG4O7t6v4OTUv+0DZ2hVzEIzWdKFcPNuvAAySaRWR9XE7gPQ7WauKk1Fk+zh6KAyNl5PWawei+pS/ENR6afg==","signatures":[{"sig":"MEUCICYrUyOSNAC2kGh39VLIPFnoNxxNq5JNy8ATO2K6EUUHAiEApMTTTXWvQFpT5DUCLOtZN/AISZvgr4HwgqrrLHp+iaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"2fd812b7c79cbabbe220fb73b57b376794a4497e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.11"},"peerDependencies":{"primer-box":"2.5.4-rc.11"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.10.tgz_1515804032310_0.6536546314600855","host":"s3://npm-registry-packages"}},"0.0.5-rc.11":{"name":"primer-popover","version":"0.0.5-rc.11","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.11","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"db4eae09bb39dc5f9ce9f31695f19b30472314de","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.11.tgz","integrity":"sha512-7pidmCM8JRqpnCu1ukNLMI6FTB8+3Oqzo+GFjLb51Lj7qNoh8g+30bWYZz1LLL4z10wM/5kCilvP5CUA7fDJsw==","signatures":[{"sig":"MEUCIDDwwbAkbpF+Lb1Dd+daq/ct2EzDRrSMoyNwQ9n966h+AiEAyNsvVQIMha5CzljMRi40MWFqILNA/QXkUy5rBh5/2jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"db4eae09bb39dc5f9ce9f31695f19b30472314de","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.12"},"peerDependencies":{"primer-box":"2.5.4-rc.12"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.11.tgz_1516166126774_0.28696420951746404","host":"s3://npm-registry-packages"}},"0.0.5-rc.12":{"name":"primer-popover","version":"0.0.5-rc.12","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.12","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"df0a61e77f96b4e609752841b6b0364df5a5e12f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.12.tgz","integrity":"sha512-BdlNsULYXYQMI9qA1HVQM7Pr7SKvpwXrBSg21kaeyM/KDff/qLHKD32duTIIG7Ma8LV/QkAKUDhTywu8jY5IJg==","signatures":[{"sig":"MEYCIQDfXJveetn6CcGcgiyk8fdcUPNRGYQ4+5GQocKqQCo9UgIhANLqPvLaye12lNAAV0wly6uvlZ9u6T4jJQs362L5sOT5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"df0a61e77f96b4e609752841b6b0364df5a5e12f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.13"},"peerDependencies":{"primer-box":"2.5.4-rc.13"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.12.tgz_1516231432708_0.22100505931302905","host":"s3://npm-registry-packages"}},"0.0.5-rc.13":{"name":"primer-popover","version":"0.0.5-rc.13","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.5-rc.13","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"09b2e356d79c600783515234d47e9046b3480298","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.5-rc.13.tgz","integrity":"sha512-BvoNlQlyHs8u9fU2NjOUf25jgQCZMrzmVGFJyk6Q6hAWvGyG8HTfXULZFAnW+nKf5Jmm6yI2LYCM8LZ+f97a3w==","signatures":[{"sig":"MEUCIG6mCaHliU7JRxE05RWEhikko3nhOry3DRiNYohiA7MYAiEAksPVtnD/nUV0DhrawNToVRc7SK3NFgTu4v4vIuMPX/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"09b2e356d79c600783515234d47e9046b3480298","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.14"},"peerDependencies":{"primer-box":"2.5.4-rc.14"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.5-rc.13.tgz_1516232796351_0.3816269726958126","host":"s3://npm-registry-packages"}},"0.0.6-rc.0":{"name":"primer-popover","version":"0.0.6-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.0","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c0a6f321e8bbc5136fe516f2ad3c8b329669ab5b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.0.tgz","integrity":"sha512-4PHjaDdi1dldmqT2bTpp0MjP1FdZv2KOcc5twJLRQhLJzLLaTxtdCb+2Tr9EypF4UI8OYnfFHbz9MsKr4PTvKg==","signatures":[{"sig":"MEUCIQDh7kX7pVGfwg/88aHG4HbYt8bpiFWeZpeFSBr7rq8cJAIgdm4uyZBfmDvmTrRss74t0rOeKdA0cu+8PiRZkbjbqT8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"c0a6f321e8bbc5136fe516f2ad3c8b329669ab5b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.0"},"peerDependencies":{"primer-box":"2.5.5-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.6-rc.0.tgz_1516234051411_0.21020299289375544","host":"s3://npm-registry-packages"}},"0.0.6":{"name":"primer-popover","version":"0.0.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"36d57e4d68b613404cdd6fb93362d27785025aa2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6.tgz","integrity":"sha512-dGgBCoMvXPI4DlIdYp+zT795Y5vDY41h9MYk8NyPvEnvqTsgLWv+vkcTTL00Z3DchA+Bj3Hb3LVpWfNY0DLc6Q==","signatures":[{"sig":"MEUCIQDqERjrK1Qwpg6yvHnvdi6+VXgFI+zViDgAyeOgOsfxiAIgZFBgU2856Zw0O00v/AjnB9N8oh7hZsraw1W8EP1WiDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"36d57e4d68b613404cdd6fb93362d27785025aa2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.0.6.tgz_1516236221831_0.3436228351201862","host":"s3://npm-registry-packages"}},"0.1.0-alpha.2fffa26e":{"name":"primer-popover","version":"0.1.0-alpha.2fffa26e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.2fffa26e","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"62d8f60bef66e1d20284839394f1fe9e24196f34","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.2fffa26e.tgz","integrity":"sha512-v8mLopCSU8jBKv2gqtvTI4mh2hf0hx2EO7o7/XJNUeDMzbyRxVrlbTn5Ys/YE/q3MGmjhD1wiK987vvDdipOBw==","signatures":[{"sig":"MEQCIFnAXw2mMJp8UE3WX5cc+RDRD85/hgiCbQ09UszJO6iEAiAt6OL9GsE04mgS/qRiCSzyW1cOX0qGV7W5ARdTKxbjag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"62d8f60bef66e1d20284839394f1fe9e24196f34","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.2fffa26e"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.2fffa26e.tgz_1516300605958_0.19535183580592275","host":"s3://npm-registry-packages"}},"0.1.0-alpha.66dd47c0":{"name":"primer-popover","version":"0.1.0-alpha.66dd47c0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.66dd47c0","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b30cfe7fd990b0b360ad330bcd088ce24210ca59","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.66dd47c0.tgz","integrity":"sha512-pJzxQvFjnegBhq2pi2bYd7Du7WrwDdFofxWhu+pYZ6ubQ3caKDvPW71kxhq62Jo2Mu9dMAsbxKfqiC2/kb9Hmg==","signatures":[{"sig":"MEUCIQD4RBYOqMoNtdlqdbtm3qwfwlBQ4/yHLrohmO3gQC38ygIgPHFrWhS7g4ot+ZGHxTO3tB8uv0vN7PnTDa8foGCW7p0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"b30cfe7fd990b0b360ad330bcd088ce24210ca59","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.66dd47c0"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.66dd47c0.tgz_1516302261881_0.6010514465160668","host":"s3://npm-registry-packages"}},"0.1.0-alpha.e0fb693c":{"name":"primer-popover","version":"0.1.0-alpha.e0fb693c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.e0fb693c","maintainers":[{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"158138cbe965a2616f413e912514d52f46b57c1d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.e0fb693c.tgz","integrity":"sha512-2ITsKOzxrP4G++3CDzZbXrcDv+TVNN2FNQ/3Ddv9BPanzf5W2Oz4Wj4PvcwxFMLDS5UNH95UJd9hy9O6hQ/c0A==","signatures":[{"sig":"MEYCIQD7TzttReiB6NLB0PRo2nG7VqFvTnmkb3lvMDs9wyP1rQIhAMbLUXkY0t7dlK00xGfu7QX4/TbeUU42AMrmyIxMr6/M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"158138cbe965a2616f413e912514d52f46b57c1d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.e0fb693c"},"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover-0.1.0-alpha.e0fb693c.tgz_1516311749749_0.4198840530589223","host":"s3://npm-registry-packages"}},"0.1.0-alpha.16d78454":{"name":"primer-popover","version":"0.1.0-alpha.16d78454","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.16d78454","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e08bd974f84a0ec59754d64f059079e333628e8a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.16d78454.tgz","fileCount":8,"integrity":"sha512-mzK6mvCV1u7jP9+6RUTYo4+Vq2Samy6Z8nGQZZQkuS8uwmM8yEIddl1LRuBiWRiREhpL6PETv3VEUOQsUJbOKg==","signatures":[{"sig":"MEUCID93X75I89u80GCPMmN9FHmmUgtzCQzyrzp/zKlwVeI7AiEAyDX+qZsblRmzE9Wphb5CztTEEj19wpzdD9kVXhAY68s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e08bd974f84a0ec59754d64f059079e333628e8a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.16d78454"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.16d78454_1517992136646_0.4350227557534405","host":"s3://npm-registry-packages"}},"0.1.0-alpha.d42378bb":{"name":"primer-popover","version":"0.1.0-alpha.d42378bb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.d42378bb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"77dd3ec650aa6008b2ae2183e9e18a5c408ab418","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.d42378bb.tgz","fileCount":8,"integrity":"sha512-X7QsW7gn9BxRswQV5T5QCjdtp4ANrPVJCpDlHMhv5SXf/uCPhk1Ud/nT6G2nx1K/5uH/Gqza/OZWPywuUCdOyA==","signatures":[{"sig":"MEUCIGNYnZaUThyIf1GDvadltkAJ7wL0kiwy9SL8N/MVisUNAiEAs4vC3F996RCqlGj8sefxqZ+UBaZvIAv0XElZQWXH6WQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"77dd3ec650aa6008b2ae2183e9e18a5c408ab418","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d42378bb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.d42378bb_1519689965812_0.010816755145705681","host":"s3://npm-registry-packages"}},"0.1.0-alpha.158ab340":{"name":"primer-popover","version":"0.1.0-alpha.158ab340","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.158ab340","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0b7894666002f13997d4c16955107e2816762158","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.158ab340.tgz","fileCount":8,"integrity":"sha512-mzmzSNyxD0/GyFvNrzS3IxM/YmeycLzOz5+nwLhnV7G6EJkmnMYbJS/kbYIAYTzMTdjKMa0+CMBuAp2xsk8mug==","signatures":[{"sig":"MEUCIFwwzmQcnpO2+45yhQfYNnFJjlF6S3p8P5HcC6ieRA9DAiEA1ZO2dL0aPGeS+p8s7f0mKjvyCdHST9mjtmPiTk/FsZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0b7894666002f13997d4c16955107e2816762158","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.158ab340"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.158ab340_1519749885121_0.6459898166810962","host":"s3://npm-registry-packages"}},"0.1.0-alpha.c62bc878":{"name":"primer-popover","version":"0.1.0-alpha.c62bc878","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.c62bc878","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b86388df99db5be5ebb8fb28599078cf174c5333","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.c62bc878.tgz","fileCount":8,"integrity":"sha512-C0sp8XuWTcYumbAgiH5mltGrHJu0O3Z2geCHR+bquBcphuWEvaXSkuI1OV9pfujfnjIFqxCo73dPYuZ9LngXEQ==","signatures":[{"sig":"MEQCIBHzz1YnIT9grfcEau/xkV5V0HkxE2ss2eiJ/t6fDLQaAiBittL8CwL+hlFxbm66tBxdWcUl2lS9co+aFeFpByyhMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b86388df99db5be5ebb8fb28599078cf174c5333","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c62bc878"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.c62bc878_1520275181038_0.8940701937586581","host":"s3://npm-registry-packages"}},"0.1.0-alpha.1f08d58c":{"name":"primer-popover","version":"0.1.0-alpha.1f08d58c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.1f08d58c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7181951acbe2a558135af526c6e9beb8d452cd17","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.1f08d58c.tgz","fileCount":8,"integrity":"sha512-Jm0nReFmb9l1aB+2TMBCOO4ub0i6+/BpZlbxu3emxlyMsiUz53rLVIAABVIAgRLIlHxHYBccZ0r6ihv2xqditw==","signatures":[{"sig":"MEUCIBlN+SDsClPEX6jC2Qtg15utfjchgckIBu4Bc56sysXYAiEAoP+699Q/ZlxafvTrhPEHLLGto+kWilC8IzQQy4WFgbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"7181951acbe2a558135af526c6e9beb8d452cd17","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.1f08d58c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.1f08d58c_1520276773974_0.1358097448071518","host":"s3://npm-registry-packages"}},"0.1.0-alpha.4633be4e":{"name":"primer-popover","version":"0.1.0-alpha.4633be4e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.4633be4e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"95d5e998a17223debd2cace87f1f4d34f2a861ec","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.4633be4e.tgz","fileCount":8,"integrity":"sha512-Nf13uxXti25aAvLwQXyaBHJJJN0Jf7VBMVikw+VoYbpSzoyxSdv8vv1QMiQDGSC2eHjSlDZz6O9ZV6c5vi0D/w==","signatures":[{"sig":"MEUCIQCskT0ReTDx/xZ7NdkQIo0S2RL/8D+5RabxoCY0Pp9OcQIgdcQlUw1+7//XQTcmPjXc1NuTDg0/qda+HEqdCJ/DEZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"95d5e998a17223debd2cace87f1f4d34f2a861ec","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4633be4e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.4633be4e_1520988085061_0.5274777710584886","host":"s3://npm-registry-packages"}},"0.1.0-alpha.fc637600":{"name":"primer-popover","version":"0.1.0-alpha.fc637600","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.fc637600","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bf759526225aa15e174862c6c037825fa91335fa","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.fc637600.tgz","fileCount":8,"integrity":"sha512-LGKFnV4i6AI8db5ghoJeQOb5ycKk4AurGh2eT+gYL73cGLhXPJZHTXcd0cMlt9eK95dciyZXDapvi5SlE+9hIg==","signatures":[{"sig":"MEYCIQDPfUxXBcXFCBpHDs3QDU7/go3DULavvlwEVuKE5TvcHwIhAKnOtQjudKD2pUD6xtlR5D8eGP9DNqOG6RCG9RMALa8a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"bf759526225aa15e174862c6c037825fa91335fa","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fc637600"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.fc637600_1522106604593_0.23145090809242852","host":"s3://npm-registry-packages"}},"0.1.0-alpha.64d43fe3":{"name":"primer-popover","version":"0.1.0-alpha.64d43fe3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.64d43fe3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8837534ed5d7b1bb9d8fe573082a25feed4ca15c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.64d43fe3.tgz","fileCount":8,"integrity":"sha512-YSnjQhtPCDrp35SLVZjyODXeOohctg8nGEBjllMvCZ/rM+8UGWwUCYs0kiXE/d+SJQjJ2qbmXildkOSWGHXlTw==","signatures":[{"sig":"MEYCIQCd1q6T67pYzNJCalzZ18+gLPWqXauIQYtkmfmcJOc6EgIhAJd1bLZNzbnLilxVL2z0bL5wiPZflCtcCwkvvPLcMgKM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8837534ed5d7b1bb9d8fe573082a25feed4ca15c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.64d43fe3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.64d43fe3_1522106873791_0.9569543648639414","host":"s3://npm-registry-packages"}},"0.1.0-alpha.87149739":{"name":"primer-popover","version":"0.1.0-alpha.87149739","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.87149739","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"eedc2be0021c41c447b67fe3f8995d9b1627df02","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.87149739.tgz","fileCount":8,"integrity":"sha512-Xc3zD7ey3sXZnZS3rkB5JrRlT6PMDGDjTOTVsTMzht6sf0nfUGR8f//TcM3RKjjYcznjuHZuiIrfKcurAu0jkA==","signatures":[{"sig":"MEUCIQC2FyNTj9tbm2MCEmK3vDcNlQVsf/BazJteOADfaGVgqgIgTQQjx3xJphq4X2oD5nQGTNpw7nbV8N8fpTBoEqI6/04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"eedc2be0021c41c447b67fe3f8995d9b1627df02","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.87149739"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.87149739_1522171458641_0.11232372289286552","host":"s3://npm-registry-packages"}},"0.1.0-alpha.c7d94705":{"name":"primer-popover","version":"0.1.0-alpha.c7d94705","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.c7d94705","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"794d06814c65b48ce12de8c1ce5a60bca314a904","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.c7d94705.tgz","fileCount":8,"integrity":"sha512-xG47Qx+s/DAPvRyZ0wmNnepMtjW6cINuPz8ZYwzR0pTISocbskpY+yX+RB+7QrKiQ01jPnUS532Z8ft0LRW22Q==","signatures":[{"sig":"MEQCIBuvKWXC/G8cOMGW6XhngvqL/UMNCEEgEAYYDp2KbguTAiBckB+DJuvA0/PNa5BZsG5QQ7uJKmAYGFAjxeKXSf/IoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"794d06814c65b48ce12de8c1ce5a60bca314a904","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c7d94705"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.c7d94705_1522172289817_0.5723760475949227","host":"s3://npm-registry-packages"}},"0.1.0-alpha.1b67c66e":{"name":"primer-popover","version":"0.1.0-alpha.1b67c66e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.1b67c66e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"93a2bf2b106fee893fa0b45e6da7c1961b26c9fe","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.1b67c66e.tgz","fileCount":8,"integrity":"sha512-FApyAHzvnBmx2878HaxYFqmZRIGAmeM04ftVYGQN3PjC9pQF7YmHz8O+7ML5Eh25KupkmvIdveRrMa7jYai8DA==","signatures":[{"sig":"MEYCIQD/ibvStgBuPidWS4j0JCYrHTlCibY1eBubXpFbOGjPigIhAL4Y4wvw58YUtS8B+/JLjcg8MXLcDccsbwa9bVewOMRe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"93a2bf2b106fee893fa0b45e6da7c1961b26c9fe","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.1b67c66e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.1b67c66e_1522191961861_0.21111071322745278","host":"s3://npm-registry-packages"}},"0.1.0-alpha.60a6ac26":{"name":"primer-popover","version":"0.1.0-alpha.60a6ac26","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.60a6ac26","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6009c9a6d7a1b8b37e9b9cfe70abd75038ceeeb0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.60a6ac26.tgz","fileCount":8,"integrity":"sha512-RmMohpGHbFn3JEc4Ig9J3AAYxmvdbmF6geKN6+Ueq5U2JNBd5kGfHwv0EgFabgMmTS6yAMLPUNW/m5YhdZLO/g==","signatures":[{"sig":"MEUCIQCQP4py7Yw+q65wb/0vyJSr1mEKqkNUvvgy7nvDeuHtzAIgMqHcyHvm0eUvZ9F/ntBU97kWMeqGOTmaDNS6yfF6FwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6009c9a6d7a1b8b37e9b9cfe70abd75038ceeeb0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.60a6ac26"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.60a6ac26_1522947479330_0.5144869335378484","host":"s3://npm-registry-packages"}},"0.1.0-alpha.de4aefb1":{"name":"primer-popover","version":"0.1.0-alpha.de4aefb1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.de4aefb1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"994a1d82137a541d1c9018a8bad7ef80c2b48589","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.de4aefb1.tgz","fileCount":8,"integrity":"sha512-zsvKTgyfN117c9q8HA0k9chCjlyqoEdetgf7dLggYxtMWJc3wOMhabSjdWkzwVxHwYRkP14kr7U+mEJbkBfyrg==","signatures":[{"sig":"MEUCIQDZlsti80z7d0w1FtMwISciRfr7lskKKVun89/run2oVQIgLVhitD37bRwN7rbZgJEDIikgB4eOtAtKSMw2oOMC6+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"994a1d82137a541d1c9018a8bad7ef80c2b48589","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.de4aefb1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.de4aefb1_1522951023523_0.5005058257734667","host":"s3://npm-registry-packages"}},"0.1.0-alpha.8c501390":{"name":"primer-popover","version":"0.1.0-alpha.8c501390","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.8c501390","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a3fa8f7ad343630dcb9b691cc40c33ee9216d38b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.8c501390.tgz","fileCount":8,"integrity":"sha512-fqnixE9gNiscgIv8jGf1H1FjOsBNV1kvLkESjvzfyOQGjGV2wB/BqrHmqGJ+wal5pboM3o7cjVLcJunWkMAtvg==","signatures":[{"sig":"MEYCIQCeecTrECIW+NFU3iokz6TU4YVTQ8sg/xh7QYb9/CrK2QIhALr30rFEJGBnT+QuQhq7Fr2rzukKHNEcjbmTBLCNfk/V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4kfYCRA9TVsSAnZWagAAg70P/RUT56zpm39yG8VNGxvW\njoxe+NfKyZm29H+BmvX1CluvxeDJcGj+zzy4W6RY7TDtvXvn7Ahvq05cgYvL\nUsuiI8iGodgSOA6Zsbt9AR6TqE3wSUAaQcwcAJ7AwYqE4r7he374Q6bAsXGy\nkJo5lgpEYfvB8AJ4SRiqthIZZN9ZyKY58oxMHI+22M+XqQ5gy2txdvCRn5Uv\ndaP/DrnANzgE4hEG4O5V4pAX0ZtJy36mHzOK6ioCiNYkQqq+qOeCtwHeEYeW\n7r8bqMBdcCzUVTRC5JlRoH/76iUSMV//fsVtOi4x2ZRYc+QAhALUhvKdau1i\na4mropLUyx6UjjKfLl12zpd75uTX8aVT8bxxx+wLS34CicGeU8yi8w/JapN3\nd+4/mzDdKRYqHr+YRjECOQt9X8nzRjIjgwD58Dvf6CbmQxTqU3zT6x2c3GUN\nM2dYIbkTJkNKGhxt1139YD8roLz0Nf2EflGYcQPlY0tpeyPtANdHnrmrIOli\nEzoMisLLeEn2hiAJWAKtbw5rVYSXkdXwp7O+OMfswr/LPzQhox/eY9HeFumt\nfs7Grx7QIEtAULqz9aFA8Cdv/cBQ5GuC8fhbG53A892IS2rLJeT43gGZWDQI\ngB+YGKb4hA8WXW4Ud7SsIRBZzDhDldpHAbO7GdTe+ktSupLM8ca2gW/lJ2D7\nLdMX\r\n=mg7P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a3fa8f7ad343630dcb9b691cc40c33ee9216d38b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.8c501390"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.8c501390_1524778967555_0.029208585329490777","host":"s3://npm-registry-packages"}},"0.1.0-alpha.aa8e26c1":{"name":"primer-popover","version":"0.1.0-alpha.aa8e26c1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.aa8e26c1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"772c90d84caa4b43c30fa4c85a966230dc24ffd9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.aa8e26c1.tgz","fileCount":8,"integrity":"sha512-DJAk0KYu/IFpc1ogozmtnpLPZ2Nhu2Hp6UXXUi00NXf7PAccTL8xon3IfOIm+lnOHFHm3PlKzCEvL72tonl0Pg==","signatures":[{"sig":"MEUCIQDUVFaAeQBM+KAoqsJcaeYCuIfVusrht19NH/qEOs+RaAIgfa4JOTPmzg8NDFEpOjUtkQ/QuNCbGIIISyy4ykCF91M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4kjSCRA9TVsSAnZWagAAQdcP/12U0HOCEx7WmQr5dI2d\nZ9OsABtmLFT/4kdbu+AzYTzAqEA2jAqDUoM60Fw7kuC4f5s6fyKPYO+6pSvJ\ndMWor7R9EHyfcKLBA6TSPDwuMJOWl90F3oKN6Hs+uKV7wdQFrxYORv6rxk//\nh+/7nbhRIoaUgciQrdJwNa7ZPjrmG9QMTJY0PKtLAUrZSwPGqHtIhvKDtSjr\nG49IG/HiVdLilcr2zpXj0k1S43MusSQAe/3U2AyhX8I+etXf+ELhkVmlvI4G\nfE62yV6pp0X2O+LULDv2dJTIMzHAs/a0Mm/hTzjlWLYyUHr+ZRTcpDG0erUE\n5KRO1ACshY8KOK0jnEnJ5jPo7FpnONmZ5I4Ty6vjb3LljHMR5ogEDZIpyDxw\nQqf/hSptRjVxShtCqZJmr1LBjVybpfzY4D9IVFf5m0HERloSK3OFiV2p40yX\n+0c+dGdtrjRYHZgn/wdB1vpFl44xNHLh3vjZJUdQh+Po4WTnDaLpbpyTfd/K\neigD1Dq7fy/snTD6Hn2YSpQbVzCtR+BuX1FbxGF3J3vw4eHuyS7tjKDg4rMI\nL8Ar8IfVFdLMDmjj7Zpuy17N+7sO47aRFHc5uKkkVBLBQu95VbqLr3g6cciC\n3suJ1YB1/0uc8YcpYavKI/O5yWPPBrp68PR6oEvGJdt3GRb5aPfQm0T9btr9\n/G1l\r\n=5KQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"772c90d84caa4b43c30fa4c85a966230dc24ffd9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.aa8e26c1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.aa8e26c1_1524779216502_0.2290293565597039","host":"s3://npm-registry-packages"}},"0.1.0-alpha.cef32931":{"name":"primer-popover","version":"0.1.0-alpha.cef32931","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.cef32931","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f3a0f0518b85dd53d1cef27eba3defa407b67f51","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.cef32931.tgz","fileCount":8,"integrity":"sha512-pSyYzQrBInqTFqxx9d45nBM20lDtVVXoD24QhIn0IW/nZBtLsF/A4SPR5AKYlUyLZVwWZeFDqZnd2UX5QmlE/Q==","signatures":[{"sig":"MEQCIHP5uvh5C9GRXEW7DAxdC143yzUE+iQO7xAk+psSmNDsAiAM0keUsngsDXmxukJbtlr2XFBEYsN3s1dtg9c18CMY9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa47RFCRA9TVsSAnZWagAA9TkP/0jmknN/XNSV9/sVECjO\nKlHqQ83+RHtUvkDwwxi5EyCC5ncGarBIRFDzSu+vwg83geYB5GtttKHL+QUn\nvKOxrBhO34r1eO+PCbA9EIzNcmpVLDADd0Krb+XbEKmrqy8Dh1CK7OFexgX/\n1XXEWpnM6qB/+njA4RMwnocch6QSQkJ+gt1QR2ZvbF5dohs+NS5KmVHCe8aq\nMmRfwbgHAp/BwZTEv98nfXq2EzSx4hxorTzK73RNO9wRUEDS03najw7Wujs3\nPC5wsjw9IQk+wBwrQBWsPaPVqNYZaT4ErPxf8qLV6cBwH2vb2r0FHJtoR7+2\nKom9fchu37FcXGbdDq9AONXnqqfFrXkFInHmBsy8qUjlGhGeMa4uWs4sG3xp\nDusVnwUYCTLac8BnFxsl/s8yRi89vb1dXYNZCVbJO6vXPKrGgF6VaxjpgIj+\ngs/hNYcmZfX6uI9GGLZXiUJTEQxPmXnj5uAZBijZdGT26VuzBzICRfZOoxv5\nbRB3a7peKleHFt54DcN2FmwfLtYHBQfNzAn/v/woKs79TVoBn84a8ypAyX1M\n6VF7mM5eIDyEwM6s1ZxvkXGj3Uywnif+tnNEVPlRPXhCiwz30AJ/xLq3ibBS\nrgli3NunRgHKcxPzQuM05lfMSILt9K9/KzLcoOZG9Zv0Ya4QEBQhpLrR2t0I\ngOtr\r\n=RUZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"f3a0f0518b85dd53d1cef27eba3defa407b67f51","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.cef32931"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.cef32931_1524872261022_0.7631578463161863","host":"s3://npm-registry-packages"}},"0.1.0-alpha.fefb3404":{"name":"primer-popover","version":"0.1.0-alpha.fefb3404","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.fefb3404","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0ef13b5b2ad612c20ad51c5b68c4c23e3bdd1423","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.fefb3404.tgz","fileCount":9,"integrity":"sha512-x7uIaZywPFvFvjj11AYAElW0ok/smTyCA7x7EDD+3pU98jBFzc6sLR9tYNQv8mrkzL09hFWZYSLNFpaVyaQSHQ==","signatures":[{"sig":"MEYCIQDvSxhmjuCo8zHvbt2GHuFG8SKctq4nzFBBC3M+bMdH0wIhAM7SUqexjQMOHFXOANBJ7XkOSp4p0RIaP0Zgc9v7K9t5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa47glCRA9TVsSAnZWagAAcRwP/0kOVUyIWeXC67SPTw1o\nk2SQHGAPTgHV7WlqILOBzx41EYdICVEcryIbvmsV6RXfut6EHLhnuTNqpiFC\nHW2OG+oTNLC6XaSivxobhDr9w1J/BSy0uKBo7hwuaAwB2/oTAgAnWkgfBDCG\nS/2Cby7Dcnj1LYW6M0rRoUMQURRuqQZQEC1xHqayf5FJ/KUWnKdf7bv5yJST\n9S1EkQNW6wMdtfGYEk3pv+RlK/f7F1AZUaFgbba8hInSsI6bSUp7xpLC4lwV\nsET1R472JayNIrLMu01CBSebpt1u0fp1nl2/qWmToOu5SI4SGvWvtXi1h0y2\nmEUQ0czoNh1nw1YrCU8GKrpBWfQkg1Vqio1uXO3/xoEsK6Visg8995/wyUgk\noAJ13xSJkaWVEsH4wYmt8s1EXOOayZObUSBIiRj8P0FKU3avDKY6pSIqErw/\n7Z0jqzAchYRk2m9occWFM+eVkwWonTLDwo/zsqYrjy/jKEh6+7vzqkX8eL+f\nJ6tNlek8r5EfgUmYHANqY/S23duEp3dlI31SwWsvdQFG0tywnZycORyJDyTS\nNAgSTHLYumlSMI+k/1+vnRbaBiA2+2M0EGV6jt1jBc7c3haCHJbBPI2g2eeL\ny1m2v+QQ2Ep9K7NH/kT4RKXNAfo1r+IgzAWPloraM52pmnxRMNOBw3qwEhxz\nW+Qv\r\n=W0b5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0ef13b5b2ad612c20ad51c5b68c4c23e3bdd1423","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fefb3404"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.fefb3404_1524873253017_0.49156300087920424","host":"s3://npm-registry-packages"}},"0.1.0-alpha.06e6261a":{"name":"primer-popover","version":"0.1.0-alpha.06e6261a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.06e6261a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e457f76544b5065b75fb2778ff22dea31ea47b2c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.06e6261a.tgz","fileCount":8,"integrity":"sha512-uV4H2F3DJ8okhD+5E2NBU9Ncbj/UpktNNNH4ZugPG4RmKU45IsPdDp9BA/rZ7yIvDAi72NNG6RQZTlVLcxftqg==","signatures":[{"sig":"MEUCIBGN7b1wYXC5307rXrNHU2TAli+iwy8x32pGfdvlUqCMAiEA9nUtTsqGqYbraEF0X2ewsDu76V6u2nBiHaJf5BBekAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa5168CRA9TVsSAnZWagAAxZwP/1+c1yvL4ynGNrtgSfMu\nmWl958YQVRYrIYZRVopOb0rMpFZF4EoCuCrbdiUDKJvFDnOtXeLoIO2Z+dv+\nFXRU8VRl/y+f8kQ6FoOrFKxokKezCXucU1/DniCzUKGCqxtye7KUxnunUvxx\niaZYuU2FC+/XA04rYxG+FBsSoYun7ugjdeYu3wzc/GcGPPolcwBfZnJ9TTh8\ns04Bgohkp2fCIXcvXQQzuWfB4l1CbTrPIibdzmri881SaBmFIh/QF8SrGGGD\njRWe6vlPNa7qg9TrwpmBCOYAUENYCiXSEHWSgKDa16Hx80TyXFm3Qh1P/ulF\nzGZItltCEVdWLAwVpDiWL0k6h7Vjpf/uFmM+rmN8LPlsa+aVGLvZO3z2emQE\n2NFtv8sDAb5IzZVmRlvUYUucqBInUbzM9V9ZnhfykpAxouEsiusGeyJmtWxS\nf8dilb+EwqQM+zzLvL1yYls/LgQzafBvYVULzNzL27YND9t0YBHEDhH0crFC\nEW87szHDi7Of3xRh0TyBfz0J+5ED6lnwd59mB4H2DvMR9aNhM3scwEVUyTCo\n7uCwdQB0n6ZQGGnPMbqRuGtiurlAOfoe/FmabEGx0EaxgsWNRP65+yTBLs/U\n2fnKeWVmFqJb+aB9WK8voqNKJJdkgwNhbUuv+OQONyXqe9EfeI9BjCPrxEMz\ntBtG\r\n=A9T+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e457f76544b5065b75fb2778ff22dea31ea47b2c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.06e6261a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.06e6261a_1525112507664_0.13567908655891392","host":"s3://npm-registry-packages"}},"0.1.0-alpha.b150d7e6":{"name":"primer-popover","version":"0.1.0-alpha.b150d7e6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.b150d7e6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7b3b203f8509cf23b69b509fcc36b120ca93b535","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.b150d7e6.tgz","fileCount":9,"integrity":"sha512-FSd/KfCfYR00c6CTMHe+RcKrLu3GJWZ3OXW8/IVinRYgIgVn8w0Xzk2oiMrQiyDoYSyEIg5ay8Aifo9y3Bz2yw==","signatures":[{"sig":"MEQCIFUJHrDlf2iNtQ+1W/thMvjT5JHy9MjNTTNCr/rJK6OZAiAvaalR3HbUnftYHgWDbGMG/SWE9UcqjPc7kW6Qar5Yng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa54J8CRA9TVsSAnZWagAA5gsP/j305KhYMVzuuGAnpGrN\nkltFrJg0vlHMuGOhIuym8Lq/VITGawrWbotCDkq6WRgMXh04Q2CCkGOrYL3E\n1pcOiUtrtENt4UnyOI8F46/oZ/ld84Sn5FJrd+7nL2P2cFMVVsHvw1hPoW+U\nUdeqNNPFMK9yNtX1Uwsw8EYAcNuYgw52uuCbzyArxSGIziZqbdt64cmn5lQK\nTP4k3VzaVGOGetefYawdwRHScEo/aHbZjjq4STC9elmwsj/u2DUswQgLqhj6\nryupMCDDcKCha05H9WC6TGdVVeVvv7vc5eP4ax9Vxd4P/+M88JaHrCdWovk+\nrzuoykvuYA9HRgXgSQdoQSwRgZaa8biaPeXeASvG/zRDmroYW/es7tkPUg7W\nFAWU6nhLlaNwD75B+L1NCw2MNLThFpp78cl4ZgoXG3PfOE4Ff3/0lOtE9GM+\noNda6pxZJoRmGpMn/K77EMfhzWMd5WOLlSAayThhfixFSG8jjucrP+hnaKgt\nf52/Yw99RTQ1pq0rsZ0CnPENMOjI5f/UCzOSAoJNDCqy4NkFSD+4RaWsvjK3\n3FYWePn6Osz+zYEdU1au3tcBStpUga2F/D1O1cUEKvHMwCXpJWFDTh1EWKkJ\nA5eGmLjQjGcrhncz1eubOsgQNuDMHMI6EQHnXBt0Xd/cw8DGmFH4b2wpc8AT\niqRC\r\n=Cpoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"7b3b203f8509cf23b69b509fcc36b120ca93b535","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b150d7e6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.b150d7e6_1525121660209_0.005370113553952338","host":"s3://npm-registry-packages"}},"0.1.0-alpha.244064c1":{"name":"primer-popover","version":"0.1.0-alpha.244064c1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.244064c1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"866348ca7bcde358e8e2b538f3636c540d1931c0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.244064c1.tgz","fileCount":9,"integrity":"sha512-54+H2zToOTqU557A81W1BVHsKSUhw1nXEdu9Z0Pym6ENQitOzxXuAXdGgkUDznpiCdC75x0CO4e1TZs3JslszQ==","signatures":[{"sig":"MEUCIDkLO1gArOZJLXO+UsNc+MhoYUJ7mgY5NhBxo2sUQb4aAiEA3IGiXsbjOuOylhy5oLuX/4KoiahviQGhRhsKo+mU8jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa54t+CRA9TVsSAnZWagAAMKsP/jb3qvKnwflR6I6gbH6E\niqHqwDiiyN8ZZFmCDv6/5TqNe9o90yBipt0xDdeyuoR/owlIkrY+JiPI9eHt\nTE11con+HHeA2FC7uTMS+O8AVl17F6op4seCFQ6fnoKwjcZ11vRJX516T0rD\n92j15H2RCyZeAupZ6VcdUVhX1atA4Go9Dth2ChmIRetAWlIbAulmPl7eiyes\nKZcZUbOw5qfKwienpvfCLErjQKbaZqOin/mw/yfIoLg2kaonUV6fCjCGwV3U\nFtGPQxHx4M/xl299u16d+1khFHYjbsdcrVoY69m7sSsW+JqrevyS7Ths1P2L\nsWEx6HFGz5D4PEParXjxH++2D5r89pWnvjoxk6DJKjD4KQuwb3+Br0T7+G5z\n0tmG0FzboSEHYdFdoJYLxenLu95OzN5Vaf0I2lSynNMfhjwTVzYXzloY0Kz1\nLoW/uQJq4pEY0PzgcLD/FdIPpxcILmckuhG7EfJ/DxvPntMQHKnqbksEN8V2\ncGaS+NquF6a9A1Qnj3EgOCjIsf2UKlxqVQ7IRp0lD7EOfa6uJythTpy+X1ny\nQz8DLp76f+Z8wAAXPwG0r+MWYBVMBl8M6wQWqMibZkHEGjwieAExoEXQK4mq\nhcwolgFe16m9SoqOjxK3hwyQn1HgV4ahQrp2yEPF7vZmLKeuAGNfroFZ1Mmq\nykOM\r\n=3/Gs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"866348ca7bcde358e8e2b538f3636c540d1931c0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.244064c1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.244064c1_1525123965810_0.5545053127055071","host":"s3://npm-registry-packages"}},"0.1.0-alpha.ff72c63b":{"name":"primer-popover","version":"0.1.0-alpha.ff72c63b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.ff72c63b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"44a187c3f150f38aade3380f9d15e58054c2290d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.ff72c63b.tgz","fileCount":9,"integrity":"sha512-chNCnJop2uiHrX5xfJmaleMC2Jnk1Q3URaR+XfR+Yz8drPga4RDImbiaJrN0cbfEFnNbx2659kO7tmy6emI7rw==","signatures":[{"sig":"MEUCIBvnd96Cnd87oGzV1TA+Xcg0xRn4EX+9v7g6O0VRHsfRAiEAjoD1llIhvFVL6Cje3v/DoShINC+Ju50OBFFHumzhX7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":33699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa542pCRA9TVsSAnZWagAA8U0QAI6KsKsWCeX08uwLvM1m\ngvuh/foh24ObCzDthauaHPuZc3PqyVsFaL+jeAyh5id9KXyReeH7t04h0mS3\nXpas809MlpIl4cJZZzW96nOQue30Z1iR6cqfGOaUQDLn5a3grK0kNkBA+cTk\nhOV/4i6xjjVUznW90gTPvavJfUeky30TYvdM2h+NWFf0zFyvj+GZzthBa8rp\nZPM9NQoJ5+3KiJtqjvzwH34z0ggbps08aELy79onUpP5YpSlUcLDfe1ICdwD\n/u6pzpM6WRxGIUTjD0p/tCh434ZiWKFu88PD2e3CI1j99hTSdYYboxA7asXs\nOrIVNNUb6FSNw8M4PUe1nb7WU77+pMvrpQlHG0ulCxcBFTsNQdKzF4TKyPPl\n45ri5r3fa/pSRJbQXEU+SbrrJ4rAyDl/VQkF+K+GBKY8om0p67Vgew8CIoyO\ndW0DkLgvnjRdv/E09rHvUxrFhg8VDBIjlzrY/KkXITm2lMjrR4IvsLWpyS1+\nbShgkPP0whD3t108n7S8cE+EByUMzjRaUSI1VkxjPfZjT2KwLFJ+uMb4/0GO\nISRTIz13KcJY9zPo11qsKXqf3i67HDWY7gXgEXxUaLtgoAo0cMTHi9Tpi8J1\nWuT0cLOBc331HVTIug7thAWNcEEV+1NpY4bRF+HqMJRJq/yM0Zn8qpLko4CQ\n4gTx\r\n=bLQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"44a187c3f150f38aade3380f9d15e58054c2290d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ff72c63b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.ff72c63b_1525124520338_0.9617111416721296","host":"s3://npm-registry-packages"}},"0.1.0-alpha.e605f349":{"name":"primer-popover","version":"0.1.0-alpha.e605f349","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.e605f349","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0d529d5f744eb01b1e5428b931f34606ea3e2a7b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.e605f349.tgz","fileCount":8,"integrity":"sha512-+MNLSMoJmTeLW0d9clP6XDX43GJClic+hlT57+c5ESNKS6qDTJ5Luxv0pSm6QvsM3qtfvC+b2IdU0VkNuW0G9A==","signatures":[{"sig":"MEUCIQCcc3q9AZJkn3F+K3UwLW6jEX6T3DKjVFrjSncQurGHbQIgdZRIZQTDRhTJ+Whn1JK7bOvbvB4JIob7eZoA5abEqqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6KcPCRA9TVsSAnZWagAAEtEP/RZ54evfS6tmxQAhTm8m\n9qcFFOSrLbvgJ4sBFVacB2d0Pd8pTTC3vIjlngXyD5o7ooz5DaSPOynC1uMM\nDkGmT+aD2Aya+PGUZrVxj8clzYDll+aPKhBo7dXB8RB6wEexOUtadktQHgfv\n6UC8jrpx6Phv9MVhv+o7gmNZqkPEtE8luLHCU3v++Uk1ptjPV2C0B1QCPxmO\nMlkbnkCtHoBA1JVnitKltfV5KEOJLZAPi8bfozm+XmQ+FEwvQF5YZQ0HdQAh\nEQRGEhHcpUOjFDjfWRtT++k888Oyn10iV/pVlkXphxpApMlGAl2wRbN7WIVt\nB4x1zmxIUyYQQIzcIpKImYzpC+6GB9wYlJh5bEAA6/QILgfiDftfjyIpDiH1\ncYrv4cVvt5TBntlU+d7eda5lgBeNIzc6PNwAJiSVXCA8sysrLRf0fIn4Ogj5\nkFlQrEQAee9pkoFZW2E2RpX8pHx8buNfnVKwaNONi5BlcNNZh128j3neq8Dn\nv141LlGXjmLI+IV70kh/H9lM2toYGLUji/UwJXnhJOKhQUJsq5GfX/hwm8Yk\nIXWHzxWo0EIo0/A1aC8AocK2DUnHAqrvCvZiscQQv1y8RiY2Nr0NnRch+JVQ\n962+WWrPOPZV92uJndmR5jn5AtDGjB++k4+f+EL5uFWWE9NpjY9U8x1fLYRo\nGLw+\r\n=KJsn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0d529d5f744eb01b1e5428b931f34606ea3e2a7b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.e605f349"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.e605f349_1525196558740_0.9709941773933028","host":"s3://npm-registry-packages"}},"0.1.0-alpha.55ee9907":{"name":"primer-popover","version":"0.1.0-alpha.55ee9907","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.55ee9907","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0daf3d94e2a4cfd2608aca51d234f96f80c24fc2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.55ee9907.tgz","fileCount":8,"integrity":"sha512-+FCUC5yVDeLw0lQK8fjGbDqaxgdCxrHkCdT/fz+nkeD/k/IwSRDRff0cjaH+DISNxYzGpPXD3E/QXi84GFuyBw==","signatures":[{"sig":"MEUCIQCzFmbJ4uNk5sL6GYaUGPJxPX5Ak6a+xdMEOrI9jcdrRQIgZZ4RjzWizq/XE7nTwkKKbTglvvSvux8xpohjKw+Zrag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64GACRA9TVsSAnZWagAANmoP/2Czcv+SGyEFYXwQ3oz1\nBbHGv/4ldH7r+i/0cb9J12HnnnPFQGpJ6eUv1P8/g1odghj4WlYkDswCLW3C\nJtn46bmGJsfSlyTcfhH2/Qo2lH89Hu+U3flemS0tFqzcmZNyJd3zXjq6oZA3\nu4w5l8NaB64xa9ZcMYQNjzERpCnaF2KEBFxyUotl1sCWOUn0y2aWMwJG60vJ\nQl1eupLJMRh/wv5TXMCUyePvR/S3MBVIwfcHghrll+cKT24au96M1bfJ1Dxz\nxyDJ2gPNHaNF4ofLfmT+wV+jZ3oskJrng89qE8XfWMU+97kTOvZhldc75NTX\nUUbgSAyAmRVUWchF7fdv7W6p/XiWpcsx16MbvfrJbt6biRl88ssWxiPLSoNp\ncwPaHW4VUoZvcQqUc1dOX6PwUiL+njO0L0o0OwSGhuOR8BLr2tifJCwTuTsA\ntHlWZadhV2MIRw4jjuU1v6pZ0emC6cz0WzIjPaL6ov+oqEO4x/EzJcSE3b5p\nEdFeJ9xIliM84BqoHmFFIpZ3vKXsxvFOFXX22NOyhgQ8eGSTxcgmud65uKdn\nRJORXo2MR/Fu/m18QMiH1GL3H9T1KUs6dyxGfs8R8kALkyi/dz69hV8NTDQd\nstVkjWc5Yahn3L7WZZRRpS/92jmZNr0ZM3sBsXMcUV1eCnq8f983UNBx5gzn\nTuPm\r\n=zsxz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0daf3d94e2a4cfd2608aca51d234f96f80c24fc2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.55ee9907"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.55ee9907_1525383551487_0.8842536138532373","host":"s3://npm-registry-packages"}},"0.1.0-alpha.20ae7855":{"name":"primer-popover","version":"0.1.0-alpha.20ae7855","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.20ae7855","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d284935f98c4b7d5ad6275d0dcda77f183c47c63","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.20ae7855.tgz","fileCount":8,"integrity":"sha512-AZ7T/mMXpEVp/tXKhbBvP+Y/SPNPM4tMmANjef5OAr8vjlIO0zjHPn5W4YyXfutYh77de42XNbs5Pqy672+jdA==","signatures":[{"sig":"MEUCICg+AY+cA3nwFhKc4wky1T8SNOThUczWh9dJ1cvc2i53AiEAgECmJ51JmyfhB+vIkPVKL46T4PovOGS0SzrfZs645XU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64YECRA9TVsSAnZWagAAzKkP/13sWb9u6NsJNa4UVryc\n2htYfsVKw9biZ7dE1S3goBtrHBWJEVYidlFIkBRz5+qQUM90baauH/6vf6g7\n8blEdcEcfD+JkeHEvspS+lsSwCMrYSBudqEjl9ikY1EssWGE4S7sQZFLNL2Y\nBU5kW4uC866yEKvoWX6RWAgtM6XJ0qEGeZVxSiUIKQbAnJNg/hanP9d2jDXH\naJAaah2SKWb7gOtNeLdPtylP3lYZhc5nVm37hgc1GS9oxczfBiUhsvUf1McW\nhaxs3gAZd94nUwdIQOkQwDJrdpdl9HRSFC2rQH1THR1vyvZRkkkkY0IpTZPD\nNJMktxjZXhFrE6CxXu3n6U4dsXvj1cX5szgWZ2D4wTgMMVxr54UQQPK6FqTW\nLMPysZLx/CGqfOllOg9vdSxdaL39Z0/Tpw3S8WdZmFZxYObkV9j6hV8exEd+\n7rxScIyN1ndwDTUqMJBjOXyzZUWFQzBAoOQJgSyOclnOOKdSVOMVXE7cEK0q\nA+tILZ1yRVYPyiHQ0AY7RRXqR7WXlmx+l+053pY817+mhk9bbqpkJ15R+7Kh\n32OrQmp5wCjo4NESL2IQalAvK6R7dL/KefR6PNeGoYS48BVmu3+pRfsRpfX8\nOUbApFIfPUHh7+ONWuN2xBgQRtiYgLh64dd4iGsXYR5UiVgIMlFpkmfx7eWh\nadAd\r\n=7IJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d284935f98c4b7d5ad6275d0dcda77f183c47c63","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.20ae7855"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.20ae7855_1525384707681_0.7607851697190413","host":"s3://npm-registry-packages"}},"0.1.0-alpha.41e8c4d3":{"name":"primer-popover","version":"0.1.0-alpha.41e8c4d3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.41e8c4d3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"50812eb8af6d33d11b8e82445a5db6a95c449bbb","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.41e8c4d3.tgz","fileCount":8,"integrity":"sha512-dhLX/cxTjbZ75btEcs6pWD+oI57GHIHdXfJ/xM+5k4r7ltiHyu+dbxLgwsG6ZBgtQEYXsoZ6iMglg9lXzotNfg==","signatures":[{"sig":"MEUCIEFD0jpnXuoEEcg4sm+NwAcl5GBxThBFYJw7amgSC4EsAiEA/Bliv5jKCm82yhQyfef3UWZgBfh7cy/I83yFVr6j6Rk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64bTCRA9TVsSAnZWagAAepkP/AmIaVlYtmiiRlAAoSJx\nk2v99Eosv2R7rTkIzYIDDaksn4l9TtE4ICJObAQ1dX2FKW/iogIKbptedytw\nku2G9ZzC3paO0mDQVAWXct7/qxxfOjJR2tvd6K+5Ww+uAUqjtjVx8gRbdXrN\ncVqrLa+1oLDdQ6tkHuU6/0PJI8JNmBTlyjBJCQblBjLalI1jbQJsdZf0UdSf\nsp0lIUR6+7j0jZNTNMWUBclaZNtLhSr+/AnDeyZxfljYBjg/C12tB03CEkiN\nGpzKPC9RwPKy3ZUgsnou1Ji94PbzmuhHe7/eaONiSl5+HWP9bbuqe6MSY+h8\n0XDFxwnwSrabpWr4IYEwdB75rJg9Bv2rENmQgGASZW6oJjXsgZaU0S4bbSL4\nmijqWjYLukakcVvH/2H/3LzwXGlOnNnris1jvLE2lijSaobaaBcXCZrFq2H1\n7eyHgV9EAo7XkVHukoTOX9QOhHh/3vhVvwalvRLfBmXsBgBcrX1MJdXD7OlD\nt7KIDGzLThBZiOtbusPoxzJdDPpFyVZwcN9OVU22+hleDO/7RKR6vtP/DCYn\nBHPmV7TcxgiXoRB7+mZkgKS97g4RNkUGe1sowhS4Z0iS/PhytBunBnn0vcTp\naCDI3HPjnpQk8L4rbNEiGGCF/40h/xt4zat5TbvHBRVZh5oId1ZANSuw5NFA\nHRQE\r\n=22Ri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"50812eb8af6d33d11b8e82445a5db6a95c449bbb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.41e8c4d3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.41e8c4d3_1525384914963_0.9441826435837861","host":"s3://npm-registry-packages"}},"0.1.0-alpha.9115c5c9":{"name":"primer-popover","version":"0.1.0-alpha.9115c5c9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.9115c5c9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"68e1cdd9020ca1309523cefa4a38b4ab5a4fc46e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.9115c5c9.tgz","fileCount":8,"integrity":"sha512-otfKHqV2kEVQ1Eon9uB51PL+3/Qehz5IhnudFH8uCDvPoGj3LkgrQeTTU9vD0dlbGXqf4BxlrLlYdj49WXjKeA==","signatures":[{"sig":"MEYCIQDWRncPdrXw8VeTRHcmbsUZ3eRqlVAbWItQDFNYwYqabwIhALRy8ucr0p0r4FFrOoWCVsgDBURpn1EVHf0UaucYXW4S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64rmCRA9TVsSAnZWagAAX1QP/iC0301agWNEtDyYvRWQ\nJVXnve0mAQCalkAMgXwzMHEb2KfwbekfrPANnO8pcSWjeEL4UCtIoIGdrLsG\nNZrujm1fIfG+H8jpKlwzhwuU6uNkfSGgN7BhGzhembCiKrJT6IYbeRhP0+fD\ne4MEctsVBJsfcrYOuRavox5gp2hxibDgXWhA13KlGgyrUeOaw/H5u3Yn5hez\nEU4bS8h21Cu047G3eRLvpttsKyGq+mndxuuX1FMuIp8gXvXeG7ibtrfEKtH1\nD1tHrM9auH2KmS0cPGpNY7WMaVfwyRHa9qSJB7CzCjsulrLjt8aQ0xe8xO2U\nnFAUnpCN/9dFwX/8R6tKPQzNVBlUc1WySmqH0SimELCLhTAF58Th/EqTfBXs\nBSTq5ra11BdfTpf6k2WOQv7FuEwQExAA0aMHUZoroUDi+Uc6qdkDY0/olMIY\nw07qFdP3bezCxsBFtdBoy1eQF/nTs8bzJy+h8BlSmxkIZOHuztQumD3HRqqR\n03HCM60HaryGadGSsXahAvvDHp+GUr8UhC3a3DlID2Vtu2Ww1c1+WhSABGbI\nWDeu9/tJhyKKtf6/ENeSBA2sCE/5Xa+veyXrc3cG0kGWjb2eVZXj09kBhtr6\nl3tzfDlFaL33VIUyD/XRpruNgli402GG+bdyMahBfujldIndN7/DSTtfCAdi\nkJqQ\r\n=trKz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"68e1cdd9020ca1309523cefa4a38b4ab5a4fc46e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.9115c5c9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.9115c5c9_1525385957798_0.811100740521294","host":"s3://npm-registry-packages"}},"0.1.0-alpha.942f15f1":{"name":"primer-popover","version":"0.1.0-alpha.942f15f1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.942f15f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c867695e35b552d9130165e9740cb8a382351ae8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.942f15f1.tgz","fileCount":8,"integrity":"sha512-R8VyDI5w5ICcpNgyA/mVDXSPkiLeFfyuu6ebHAv8ROI25x89zBvroUDQ+meF7151QmXvjOjdpES4Y5exkRzNNA==","signatures":[{"sig":"MEUCIQDGjySZLdXdxJxRNBqrvFbP+DSS4r1I8p3Y+L0EKoPN1QIgFeQmE/53WdFlxWLEuuyQia5Lm/JMX5xneHoXQQhu+O0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64uaCRA9TVsSAnZWagAAU3wP/0bXb/tcW+ac2ugOj64h\nrGGnidKau6J16IcKbAtL7Pffpt/z1RwhqVq00jrOVjaiwZvkKngAUuE3RtMI\ny/nEJvciID/xH845bZFibW5dLZrAX/Xb0cQKZpkfKMGNsiDQzwlInPPXduaS\nK+M7+vFJMDbEdaXbmEd/TgjduECuhTvNxXJ71AV23ZZDgaxXzWCn9xJm4+Vz\nKb0RnjZf8TGkddl1BanJP1oCclrF879odcNiDYCDqCq6lOdysuthBo9xdC24\nXeQwXC2xVDP0IR73/1HX44bdOsftYxUerpewK/rwffwi8afdkT3J2VPY91w7\nC18mBa9uEcL2cyiNbNOZEuHJJ3a5t13Uk9dNZW7B4jDj4FbL6OOh8YV5NRvi\nrQ2rJAbuCZQttMVyaEbOroLOLLLyDBzv6A/ztE1ptFRwIAQOcOAGRerdoMmz\nPDdxA6u3tLoeNExEAzYOLTecYWHItpv6+VoLS9jQI+f79ZBXwC74ey13fAgr\nHGRjQoE5O09RQxuFmERMmJz9gmSlcIHPLj6kbhRw2mcAqqYbOe3kqQVKr2k4\nGXdxNuKbdnMqrf3Od4ThxmzjqiHTPORihdCMnk90ofhT3iP5gNCtbvPcWRAr\nMDwPSiDV47ydMSlnDMKBq8XsQT2SG33SQ5YqDLzGaQy663ENl+L25hRkEt8Y\nUtoZ\r\n=r2FK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c867695e35b552d9130165e9740cb8a382351ae8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.942f15f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.942f15f1_1525386137640_0.3903911871704586","host":"s3://npm-registry-packages"}},"0.1.0-alpha.07e8b001":{"name":"primer-popover","version":"0.1.0-alpha.07e8b001","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.07e8b001","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a58e225f2559bc047c1518e1ac35d880aa22e2fc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.07e8b001.tgz","fileCount":8,"integrity":"sha512-1pv03sr3Q1Itbn7aOAQcMtEPS+pEElDy/8cR8Z7OKFWJhDIwyB5OLXd0qdBv0ZV/s3yGCUXpjRxLcAVgXQoKbQ==","signatures":[{"sig":"MEUCIDJqVdw5kUoQZSkeBqv+TLHjTeYFmd18mARRFnnuxPuOAiEAuLn2DJ7pfbC8GRdrfMqaE/EyCi1ZuJGNd/IQ3UpDWVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7MwwCRA9TVsSAnZWagAAds0QAJF6501DV3sbMDpgFmP2\nesSCfoxi57YsomIcANdft7p4Tp/GAnk3g5zuxrVhG3FSifw1vwg+oo3le72E\nFrwzNESoH9KgR/gff1amae1b+Cq92fVqJkctNjPEK0HxhuP14CrBC5V5N83s\nyRzmmBLFqO1+Yv6MV/wezyDq3VAqKxR2ygcF19BDjvsw+sCC/JWk1MbO/6H0\nVAJnFUmMW56kjG1dYU+Z2u4GLBD30ncBdyB08Wb9wOyplY8vu4uhJ9c6hFqt\nJ+SMzEjSWcByE4NWYFrnv+3RdDvDmG0L6qsKmyuaX+YArAN1G2tez/3saAw7\nuh/yxqzOkRztBua7isxLXEcV0c8/Rf9joU0mgzI+H7ahFE7nTbGK2sWwRBNL\nD1tZerOMuTxKhfSNfGZDLn9/EQkVqIh3hiDZ6TqyFHt0dw69ygO4S3utqSSq\nis2IsljJoOF2AUyCIYX5Ce2U8LOwUUyNHZjXgJfZdtNb9bx45ZfRAOSGyFmp\nWbF2Bc/p5nUR1DgtKeo5Kb0xty43YiVjTgXCb2XMAPjwYRjQwcjjUYykwSQ8\nuyQN1eYlU94PSVplbZOJCh0mnVc4g1VCvqnVm/zn9cPl7vfaOecDM9f3WFGp\nz3rH1bwyyESORzlbo0FnlCYkAyqVoH5Ji8mogmIoDPFrqfI0X/U5cCjSa77t\nFUIF\r\n=+a6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a58e225f2559bc047c1518e1ac35d880aa22e2fc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.07e8b001"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.07e8b001_1525468207739_0.35204816754398016","host":"s3://npm-registry-packages"}},"0.1.0-alpha.8881b8fa":{"name":"primer-popover","version":"0.1.0-alpha.8881b8fa","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.8881b8fa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"72aa75b110e51ef1180b9f5694bfb050fb032528","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.8881b8fa.tgz","fileCount":8,"integrity":"sha512-e2tqQUtPGjYWN5BICGW8ARB3Ikuyu0C9z8K6wE88ug+n4oRIBea7fF0wNaT5QY5nWkLm7kMOybvpreyhDT38Wg==","signatures":[{"sig":"MEQCIE7mTD2ItWYFGTbT8273Hhe3Iw/YClgJD0J4K1nIDYj0AiB2ANaN6pcc86BMmcibxtVQ2qq7Uyb7XzKv6F5AD9bYvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7NOyCRA9TVsSAnZWagAAycEQAJuSj6+AwU8FaBMkGX9O\nyDlqnOqD/+acHRfZA3+axsUvqEOEi+ac2AAvYjs75Z6TnNE+Xj35wH7F7JDs\nn2iwdSao2K8nXfDeRbg+NVru1uJGn/8szOOgMjwS5fpljJoJR0HyYhG7aD/b\nSUSuUfHEi2r1eirqr3F0ZqwWI2gncyOdIkf9mPpYniW3uVU8IH2hHI48jbzO\nJTfMEHGYgSDxGW4DurzROUCcNsmLbtGhV27JAdnPoKiSHZWw3otsC5i7BHUb\nNvLr3VOXg04DH2IlNxx7wI1z2ylgcy/vxAyaaN48aPbRB3jCQA9cuUwsyG+8\nRabsbd66Xm+7Spe67hVNDp1M6iTuGZjrN/UmOf6n80FfNXPWkIKG79z7FtI3\n9wsAzFI1P9UjB16HyGsYrEvounAJBuB1rXSq+nKK0Gb4nvQg1aM2EqLBya5/\nMOmcIenUrPk4bKRpexAfJNhhVSvKOy+dEDMT2BUkVz8NHMEPO6VbsjzBHN3x\nmf1AHuNvPVN7KvBfJXY23kxMkdW6jnynMb/MmIAkcWx2UeciHs0D9gw+qmiq\nUTi46nCu7d0OrG2N8eIpq95znu3qF0W5N7Fs2W5LhKotKt9QX3QC5zbnQedg\nr9mkAXD9u+vtOCii56AIV3Mbo8aKOqTH0zGWsYk6FBluZmuD2RUBocKHu4AJ\nsG4G\r\n=GueH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"72aa75b110e51ef1180b9f5694bfb050fb032528","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.8881b8fa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.8881b8fa_1525470129942_0.44821703507612587","host":"s3://npm-registry-packages"}},"0.1.0-alpha.6ce8e0bc":{"name":"primer-popover","version":"0.1.0-alpha.6ce8e0bc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.6ce8e0bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2cfe11872f4ad9fc338fe9f995ad8d34f4f6e3e8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.6ce8e0bc.tgz","fileCount":8,"integrity":"sha512-cOGGsVb6Nzsb5k/InO1eDSJJ8Hp4pTrmPURd6c/KAW8XQ2xceqIXxLBbPPV6Be/EifhrbIM1mDHQuZ00rpL4/g==","signatures":[{"sig":"MEUCIA8EImdNxu2rBM4OPFngRP5uGc+Xn9tS7GfJe5oc5KlEAiEAszm0JBr3kDyOlMR6vX2k7WAGSwcQ22KEolSCiCODzOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7Ng/CRA9TVsSAnZWagAA9xoP/0JB9vNe5pAXO9zcQZBs\nBk+7cPHtbxsUm3lg0D3UG1YYg1AQ/TmYGxhTYo1QEJy5SU0kLi3/R3eS5gp5\n4bImuId4uAgjmUOBjq8RKOAlaXyYHf7wGLk2QGDJxWdXtoZOq4P6qCiip8+f\n2htDgjCKI/9ID1xtyF6hsviINQozAjtdrVuc3e4sM0Jk5jFw3KfYKyH3fQwB\n8V5OC1DPdwVG8l+/gzXxjeMM1uJTLWS27Nxhl/pDBOGcFTHPn06yty91YspY\negVgGZiAljh8J3cP1kpQOfV8LvmAB+e+rQOym+LTbXkTyWKGzuHgbzDfgI85\nUdKdNxrd+YYFpWpFynclkn69hseap08zTmk+93R6dnIsJ6i/XP4/hjVgAifk\nlzRkGs4bGvx9R8onryam9KC0r8V8xsWM1TOJ/zQvg0lxNKRDtsiqibCoPx25\ndLUDnSsmYbp9Z+WkvY8pEB6Ds6ePESV2ZQao+SbhA84jQW6jQPv7vGZMxK9c\n1OVgO9LPG3f4ccKCJ3X+CbW2fTTh2WSHgdKfyjzUD/r8s/BwqWU+Svb1+gsZ\nEyEx9NR6v9aqsLIB5mncR099Lzqn9dmrpUPY81NiShl72BfoWA3e3GuXnTVz\naXmu5wvkp5EYiAXPbEdbfD8ycRLBXNS9wvgz6x3eUvXXxfdcyhdK0QoSANrb\nbd2P\r\n=B4tv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2cfe11872f4ad9fc338fe9f995ad8d34f4f6e3e8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6ce8e0bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.6ce8e0bc_1525471294862_0.6529635174618498","host":"s3://npm-registry-packages"}},"0.1.0-alpha.32b59b4b":{"name":"primer-popover","version":"0.1.0-alpha.32b59b4b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.32b59b4b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3e5fca2efe5e63c6c3c17a921ec1b342053b7aa2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.32b59b4b.tgz","fileCount":8,"integrity":"sha512-IwhqbaEW6KLZEpeaswZCl6NoTKUgH/woK0wEa6ttvvRlfLHIrGrBLCthxvmIxZoeoKAjRuB5n6BLgd7uT4IM+Q==","signatures":[{"sig":"MEQCIBidUMBjAfyQSejnCVArMeQlsnB9sLbN90VGFoRYi5XDAiArnA6zX2TI3pdFdlY2Wt9NiVRMfF3ra8YmsAUIyB5XNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8IApCRA9TVsSAnZWagAAbF4P/0r6S9Wowh+KRZnM/+mT\nrseOttThc6ydJuEei+jld9/TfyHVWe6Y4XGnX5dXoJaVohdRdeD+PZPfteeF\nfaOaDfg4Mv9mhrXY1yPbMvHnHtm0gf3yDraJAeQgq/IyBm/SaFWNnJ5XUVUW\ng07qE0wCcTVZAfzDAtHa7LstGmUsZZOymQY+hT5Rs/kIGue4AXb7/F2LKKE3\nT2SO89+rZwTb9/SHwS78+LP88lMNtOnjnhPa0wtTwsGWMCJdsVsWAYxupt2y\nE5+95ZXVXnhKUyAu7vtrMk8WsyFZYv7H9M9OjtqOeo0GsFKNCDN0VSObTO4x\nzQ7vwFLW1GehFRR6loz/P+LxQ5XudZb+Z6/PAZ2W76G9FlPcPOiNysv9Y78h\nfN57taE0KMrpV2P3hEcmN2e/uOpNvPPs7ikYh0PGHofqSh1tgoalKdYo3q1K\njBQvRKIZwwZxmzAWXGl+2jqV7wvmJaN0jGdfCtbkzkdJPFNt//DwtjKABcVr\nwLzBvFhAvojZgL6nD40k4M4uDjIRHjvLwMVKWlKy3cBzsdwjRhgv0bkAZ7b+\n0C9oZfXx8CpyHT+gfreYQqBklH2zMcwHBul2Qb/VUz3XYbZt4+y8m/ysgkWz\nJ05oPymOQyDQvySgPE4XVh3VcufDn5xAg/tDBGfo9kGykESOdbSoKQx+PLVn\n6yPy\r\n=rwhq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3e5fca2efe5e63c6c3c17a921ec1b342053b7aa2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.32b59b4b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.32b59b4b_1525710889069_0.8595472201104468","host":"s3://npm-registry-packages"}},"0.1.0-alpha.ac4b4352":{"name":"primer-popover","version":"0.1.0-alpha.ac4b4352","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.ac4b4352","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c4410ba4cc1f01df558e54ad18951628076f4494","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.ac4b4352.tgz","fileCount":8,"integrity":"sha512-6t7k7UjeeNkgaNbZcp1wh1VQ9GNzb8tWy1hS3Tic1gk9BCj3xqk+8M8VVx/7rhBc79mN5A+g5qposVYA1Fxx2g==","signatures":[{"sig":"MEUCIQCNFdYwsFqPgjwmZz/tOB/QeK/gWDo32CbdyARRwIOhwAIgMz4iD9r96IX5YvlxSrrkj3KVAPe1sC7OkSvJUmbrap8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8JK6CRA9TVsSAnZWagAALxsQAJKctoEPfYUkmw6yMY6z\nRZU8t7gVX6ICOI1uJeQYSchH0237ZWFT5uuIcqeF+0KySahxCtTxLRFs1w0I\nS54HlDElj7SGUeJ9NmUsdkg1pKXdifC5vc0fb87H1CB4wJoic3PZpcPOJaVO\npG8r1ERpMaiagwf507+ztB107Lxubk/dMeV6KNkQwDL6YLVCfELMA/4GaRaJ\n4uqNSqHlR5eFsXiFTaYDuNxt09MZ54b4P3KC7xzNysxHNFZLCrTkSMiiYPKP\n3JMnw9JOsCPZlSHmsfbquvImcYz1uE6DW4LVqK6lQBkJQyGorynj301gGu1g\nZ7n+S3otFGMjWA19Ci7kWGvBtzsL2KHk8hmdYpurqQCIxThNZJj0YGQabVGX\n95pgaFMEkcJ3UFH7Zgh50vh6IFsBV3lkyDWiWn9a6GTdwPtw5Xn/xWd81cGH\nH6SGH6LVPHXyc4d9f/nzCXOhOvCsiMajv1HNgj6VrkL3ZOiW7CPnXES9gpt8\nSyU2K9K0YZEcYMznhT9pYwkjH7giHGuIpFTw16EE+1cl4M/KUzGlZX/VH7NB\n4hd/Cp6hvBPaHpFz8lobbVYh7LiFrsY1fneXGh3oOuHpKWh4ZHts+cYI6Jex\nsyOf8h1D08uohZylIAhxv6Srz9zIDl+gRHThQ2o0D5g2mid+exeyxYJHYgoc\nbFXG\r\n=ieAr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nPopover's consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- `.Popover-message--top` (default): Places the caret on the top edge of the message, horizontally centered.\n- `.Popover-message--bottom`: Places the caret on the bottom edge of the message, horizontally centered.\n- `.Popover-message--right`: Places the caret on the right edge of the message, vertically centered.\n- `.Popover-message--left`: Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- `.Popover-message--top-right`\n- `.Popover-message--right-top`\n- `.Popover-message--bottom-left`\n- `.Popover-message--left-bottom`\n\nLastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right-aligned example\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right-aligned example\n\n```html title=\"Right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--right p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Left-aligned example\n\n```html title=\"Left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--left p-4 mt-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-aligned example\n\n```html title=\"Bottom\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-right-aligned example\n\n```html title=\"Bottom-right\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-right p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n### Bottom-left-aligned example\n\n```html title=\"Bottom-left\"\n<div class=\"Popover\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mt-2 mx-auto Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c4410ba4cc1f01df558e54ad18951628076f4494","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ac4b4352"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.ac4b4352_1525715641354_0.45332941654681624","host":"s3://npm-registry-packages"}},"0.0.6-rc.1":{"name":"primer-popover","version":"0.0.6-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3913f08dee8b688f9ff9890c8b21073b386bf837","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.1.tgz","fileCount":8,"integrity":"sha512-twP5jQ3Myi9aBaYypu/wiqVB9EhKhRei0uCh85Xk6IJTTNs3CHANDmYNST58Nsq+/mF8xelYsXDoByuVJ6QbeA==","signatures":[{"sig":"MEUCID8Xx4KD06uB+sDmTvFUrSITIaApTeuFssUa1HAn+tOBAiEAyeM1HjSRC5jO4RD5XwvgY4y3GbnfAM8XKxaRIyPGbHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8hqqCRA9TVsSAnZWagAAEHgP/jaqZ39ta+kspqwAb6ke\nSg+EAEGNGyNKn4DKJTzhNVHcnLxUd8m4fDgMxRP1iPgwt+hXkUm7NcdeFfKn\nvdllS5Y9lO14M9pKHF6eTN7nhaT2tsFWVJeFe9sSgMcXvK1T/VoTlZcfUovS\nmraGbiZss1lxv56BmYEfT8twEHw02cEDYeaC4WFCkGD9VlgPuBmXnaSHaAdX\nLIXtHE3O9RLDXeoXZoIiYHhiP4IB0aX42nrbQoqSXMr+WmRb1dz5+7z1ViTn\nMoHw/gvUSoYqvVEJE4/rhEOu+vfoR4zxtN4rdXXhtAaDPHvZ99kZ4cs5jTso\n2dU0OpxwHErP8YN5ESy//8cP2UX/A70Zi5ddobuYTMPy2b0Yz8tD3f3ZawrT\n8yBL1MxLUN3KjkjePcl2fa31gvs6ElwMeKi9f9pQ39dgmZn/haiXXGxUd4CY\n3iOrobD9SQM0Z6JQA6d1oTD03W2p9eVvJiR7r8qZFrssYmKMvagCu0mvQGo5\n/szWaqdcwWPJehpkunUu3SysZJGnrb86N2b63Awzin30Pvco4Ysrq6t5FjA/\nvNLkyYI+YocDWzNOwxYlXcnVcYu5E+yM//yRnHBk20scg/Ty47UmzwctCdZJ\nMdDM+7lJKmGlNf+nFJPFm5nyKTGctVOTsbjFifTeXJvNa2vdRqKBK5sKhzgO\nP/Qd\r\n=w7DG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3913f08dee8b688f9ff9890c8b21073b386bf837","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.1_1525815968659_0.9559257097422658","host":"s3://npm-registry-packages"}},"0.0.6-rc.2":{"name":"primer-popover","version":"0.0.6-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6bbbf498b7e7ac6b901a513c4c1673435f661636","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.2.tgz","fileCount":8,"integrity":"sha512-9bg+SYg8mc0wtX2nD+CNzcllQDx9dgDAKBlQA2yn9V2c3BH1NEOcKcambIBbHuuLNQDp12AEBA6to7ueScTJFQ==","signatures":[{"sig":"MEQCICHgU2EgPqh7xWTKjIaX6f2Tdjs6kqnE7v/9sigSqEyIAiBPxM7Bv3AMIn5eRcH1Ld8as7wwnrNDcPyelzdADCecsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8hv+CRA9TVsSAnZWagAAxqAP/iHCjWvmLyco1S1ys+5/\n4vBsPGcOlWsv8BLuReTqgG4uNpwWbN7qeigkF0hFvi+1cUMF0FEVENDPUOTq\nsB3YG6BeMA2uVbjRa11ZsnE18ohWqkjFFIV2VsmyXXMwmmzdS0N1h5tQhUqh\n3jPQzTlToM+FBnphseQVCl0duGVg1SiQsGOX2HkaBhtT5sqs/BNeTOHVK523\n643qiUMVYL+83AkgYFNz3zowVPRKOWwfEKs49oVuDUaay+6o2eLP7ey81jSF\nYxdXdYJIeW4HRDh8gfEzzasowHmg4CcMhWX/RaYcqchuhNze88C81vtzsTtM\nBKTHsKy5nOhUERgQJ0Of/bZDSzIOZjtllkWRSHVtw3oWyUWhtIEg6caeohUE\nM9O8p/gLE3Wjo0GM/KGpmWp6AQMA8nmmdcmANLCQLk7VgjZ43rXAKUYxeGCK\nWUg1j7V88eO4VSwH1/W7MHL5OxAZfJhWTnkuvFb0to+ERQVJugC6go1WzkGa\n0PQj3bXHzWQkX9/SA8hKyoUILM0OUHbOge2wHkya27vFLV9TOw+E+pl4JS8m\nQ13mJJc8UJr0sP1PkGlWnePqWiYm32losvZEfSZOjK/NwDjtBCYFJ9wkKU32\nGmtuMvmb7c9ArJrLJPG5OT2L8CffKascipjNCy0IUxQt1/xBqEFFedMXDANt\noPmO\r\n=DG06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6bbbf498b7e7ac6b901a513c4c1673435f661636","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.2_1525816318028_0.3084665628563079","host":"s3://npm-registry-packages"}},"0.0.6-rc.3":{"name":"primer-popover","version":"0.0.6-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"60741e306150132e12003a93880c56f3bfcaec48","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.3.tgz","fileCount":8,"integrity":"sha512-xYc7iP9066dLlCe19uzcBUV7MvEwJi55O2ubFyoPlgCX/JEDRQEruHShTn7MiB3LxNhvwjCIPNUECqT4YxjZWg==","signatures":[{"sig":"MEUCICIL00+FYqTwLPjvkJ2lCxmzhdchIsp7WAYaH9OkmBkyAiEA1cJoNpPerhgmjECz46BtW27bGGd+H4lrlP/yqr6dxQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8h0lCRA9TVsSAnZWagAA2voP/2ia9HGjd0fOwBqMyZzX\nrFLEjm1waDXx6gaMgeYLd1V2RlxxjC4QSZbuK/8pvMHqfKNz8lmE6RWt6yOU\nSmezhmktmv1IyayT0r1DEfmqpHqvldXcYZ5WzkQ4NysCjpC0q0b1RQbftWTB\nYxnjFjT+1TqGtF8qLjZYNGwLqc5lMuV43FynOH5vnWjRpdukQ74F4fKxqH4u\n5BQioyZohbMSB3vpNQiG/EBQHLQCrZC/gDSIzbvHdOzYzqNXUBHl1jpyKR1o\nZRQjy2aZ8FaVZ+T5tqFzCkh8gpf19LVQjePzVcaeoO5jtRwJsYf4OMBH/fGI\nh4YIawp2rMJ8U8f25RPMPdxoU8f3b2GFoTpTpaaUcq1/kKIn9FfTWXZgQOSp\n2kCdSd0AvkGoabDSyO/228emSS8lYgwxkyfUu3tLNHuqEy+/LyGrwumFJl3c\ncq5xPY9abkDZUhjaJl0b72puqSuFGTnCK892PSOpE7NKKU1p3MrgO5lfJtnO\nMlBVkx3UF12oWzUFe3V4m8Jm+WZaz6XBdQuu/hY0Wyytdk6BwwBwgBFK0zXc\nRsoP7V+DWA5ZQuyfk9NIzW7EFifCwn9KzBrvpZSN/W6e+AQp8KwgzudsEXlt\nqMUpL4x87FIl8jg5awZ34ZbCDOfolTWq9Ix27RXc0ZjVZobFuyMf4akMtIuq\nz3vj\r\n=pdY8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"60741e306150132e12003a93880c56f3bfcaec48","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.3_1525816612916_0.6833302259290899","host":"s3://npm-registry-packages"}},"0.0.6-rc.4":{"name":"primer-popover","version":"0.0.6-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c8c2957013356a53b9be11721eae74271d5eb50","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.4.tgz","fileCount":8,"integrity":"sha512-1+vtX/PAcCMNuVRRRSScuuR/UYuo/9GaSjCLLpeuNUJ2k944MBqZuDek+nk/ukBD3Q4CVi5q+I8guC+HOziLjA==","signatures":[{"sig":"MEYCIQC9YM2F4IMTJrWjvEhxeta+/6tZYWCXqKFqgvvCr4eZIQIhAKLKb2qvTAuaMrbINmJkzJFTB+qr4uxTznBQzduemMMx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8oBRCRA9TVsSAnZWagAAK50QAIOVwRhOydx3dTnRG4dS\nmGvWQoOilAbXdlGFpaVvkXQPUCgToR1JwADBVJvSpd4SaXL1v2dZjw1ZlZHA\nx4mSJxPv5FOIIT8zAhQf4ANSSyMFZdl25CnNhjbmvtMkvf5cQbMcEmvIcGuS\nUfll/BoBEi9uoXGWSZ6drecSkBO2Uh/aoCGBh9GDDVHEDVD588BKw3KwQ4hO\nBAs/rtxOGHW/VB5uU4MDjPIM+aGRvvSXe1GgHga65KmquR5JZkWZW+iqc3+6\nlKQ/hRtC7ZYUpH7fypZ3gKa9azvnzFJbIrpZ59qGFiB7VlsIa+t9P/ZyGTWm\ne8j77cN9mDi7GaKPoef7SQKzSK1cxnwQ3sl3vUGc9i2ocHf3vzuZWhq9rodE\nHFWpyB3e7ybjBb9/sopj+JbSmIcmfQzPGfIvkPwwvj4p675zKjnp2JVL4pGO\nh/cp0MxmpIUhuqln48QMPzfAi1CiBoRfOel/2Ik+SRQVEP7TBuNDqv/VcDne\nqJ84uV+dYGyNyQzaixaV4OGhwn5k34IJlxaDMnYKykq0uKNptiIqadyyqBUD\nAPBOwRRsvG+2M3sxrayfo3vbNoQrnFLx3QCqr42xRk9oha0fGyC5Y4clt5iY\nE9FPxrMMwXwx/JhJS8b6Kkq+vYDocSYb2QgKYtU+tnkof7nT99ojoe6tWqXy\nGOrz\r\n=wHev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8c8c2957013356a53b9be11721eae74271d5eb50","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.4_1525841982908_0.5053494728137684","host":"s3://npm-registry-packages"}},"0.1.0-alpha.1e956978":{"name":"primer-popover","version":"0.1.0-alpha.1e956978","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.1e956978","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85ee518798203feb8284aa3bcd4134f735f08de6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.1e956978.tgz","fileCount":9,"integrity":"sha512-+KNdMv3JSQVJ4dmEQQ86CwBssMHRARcYta9z6dybnJpD7CcXxqWeba375qACfV2EVXzUfVJyxf604LoOi62AZA==","signatures":[{"sig":"MEUCIQCpw49VTae5aGjJ9HIEgerp3U6tM/y1YwBoDI/i98EIwwIgSk7lsCd9MyXIBGQl3NdUIymS0hJIZrzxdSko/zPTpW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8033CRA9TVsSAnZWagAAlZQQAJEzygEpprs0JprZf0X3\n0wrU9n8Z7JtADCP3a0oYEjDtSd0/RidQUoJRkoaIKKDh50pmUqNRVchcpgxx\nhmQAeyhTwraBo6gALTe4ITQk5N+R6Tvy15Hyq09+4X4aaseyj69F8JrsRZfA\nB/RPATVdWfToGfH4bQqAWqm3hSYcFRzBGyVhyI3k2seZfhegLHNsr5P4CTOM\npeAfUXDpUdLwhcS3UVRKvJgakBOK5ssf7ZHCjBZMv9sWsIW5wI9bhcGGEShM\ndqnuv8Xsa++A6CxBmvYPKLuer0//UjQ9miOke08ZvF9nSzL8vqBBLiDXrzJt\njzIbDqYejju8B5Z+P/r+L7Mlq6IO0cucnmVtOwQQseJnXOHSzmnGxXABsG0d\nGdDfrRUou+PqU1L+tN787hpC0nYdRQACd2XlK6JG13mWkdzejJCCNZwetKMF\n0PsITAcBhIulp+MdadZAPsKFuZJ3GSdzOmwr68dtl5MRVmDaFypljx6fOZVT\nLRUcGSKDGulzgpu+MFg9xWpJU/3NjOUyrFH3a+EjJ+boRB1hwAuzN+ePai+J\nkGGe0FfcBnoTXtGd9W9VQNrLx8fLtrCRLYiq8fCMy5/5KUFdpQo4yLGU7N+P\nWopiiGPv3qFaLtVdD1+g0obJs+kL493/ha/RFStOO40h/NXwXjR3C81Z6jz3\nJDGE\r\n=Obu9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"85ee518798203feb8284aa3bcd4134f735f08de6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.1e956978"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.1e956978_1525894646864_0.62795795274213","host":"s3://npm-registry-packages"}},"0.1.0-alpha.2f380714":{"name":"primer-popover","version":"0.1.0-alpha.2f380714","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.2f380714","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5f3b10a42cebf6e34fe0bc48b6d1e1a5ebdf8395","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.2f380714.tgz","fileCount":8,"integrity":"sha512-5Pu43jJfYKi91cebh7Rv8E5hFw+WzsmAmtR8pi4rI+GCNMIIbXfdgEeGYWWD0BCnnHRFl0WqDgLPUJMlrv0EIg==","signatures":[{"sig":"MEYCIQCD/pzawGIDITp8nXTXeeSCq+WxpqR18SXUvAme3mIOWAIhAJvPRbLy4GiutW0P8yElqIQ8Z6VAZGPE6C4O+8zybFSS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82zmCRA9TVsSAnZWagAA2GQP+gPfJ2dwbGW5Eaa75KUo\nlN4nXwo0LP9G2AJzvII505SqJgHBOWX9d9j8WyhyaK385czXxkNhSMm/njm/\nel0e+cWOqGDtntdPAs12cceQSCqFJTYn7k+C5zizLtnlGCkUn0Zh2udkabvL\nwAGfJiql3i0uujAU9icPqUQLm8VS1ssaiQLccd9uOrmCFkK4N94+6km1phQ9\n1b4fqrxqzEafG5A1u8GuZHqBCFGIzHv0HQsDgkl+8qaDZxOJd4ydrHLqGgQF\nirqebEv/xeMrNPxp3dNhd19NTX801eQHqD56OX7EDTdQJBMDFf0j5MqfFAFF\nJneqkq2JSO0jGJNAYtECPeUcSMdgMBvUtc9r3ugmlDHynzgpwDPFhz/ZNRPP\n7hxR1pjtZ/v1XdsklT5lSTn/b2A9ha9GKOYGGBf0KeZXJCyMhbT+EWxpU7vb\nyb9maFvQWsWwdCaN0HdbAm67qjEybVK5UZ6yGT6tCnv4my4z3XEchvjF72wB\nOqKPddsaQ3cxeD1cASWjXXo8JAJNcSk6hVcWXfmk1Q1GD7jWHyIIwA29egnR\nCgvtnaFj4D8VPbtbCK6n12iXU1M+9riolb3m62QVc4gVmPBjyV56xmZVVG8y\nyGLEOmGQsG4FTLYtRWZRphIvyMyDCRqy2vUoJQM1Kt7ElKH5vUH/sLd8CNCC\ngQns\r\n=S4km\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"5f3b10a42cebf6e34fe0bc48b6d1e1a5ebdf8395","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.2f380714"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.2f380714_1525902566036_0.20533195433080675","host":"s3://npm-registry-packages"}},"0.1.0-alpha.51cfc597":{"name":"primer-popover","version":"0.1.0-alpha.51cfc597","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.51cfc597","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b20101e0d19219dd6f21950cba7cdc10bce45a80","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.51cfc597.tgz","fileCount":9,"integrity":"sha512-fcAD72CZP1Q7VO47tZLwtzG1cp2RipmTBTvYzj3f3hPVV3sAckuYl1WD0MqkVp8/Y6w8FtR2SJy587OLDZ5k+g==","signatures":[{"sig":"MEQCID2n+365lsKtk1sJ0eEpFIgfnFmt4vEzuMfJBY7UMPz5AiBsZy5SZ6yBAVLOrCeZq+q/eT+rT0t9MWqIzLgR9FQSwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa84NtCRA9TVsSAnZWagAADYkP/25habFDx3ERtzy/P+VQ\nvZe2ALzkbOmjRRXhoe6vIHRIHtLVy+IyiwvKFsp4oYVm+om5z+yC9sQjasps\nwA/DqXPSdvxe+oTvwZ4WkDiaWUjrJnK/t8/52WgH79c+Bt8neTJcnifMJ2us\ni2ul0LSjzOnK0r+t++GIEBsrQnKvfkZM5Q4dmE/YLKpwaAeIQniIk5y+259y\nqAk2amgrYTg58zUl4G5JjLYAHmlRE25oiyXBH+h+uzivpAJi8XySy3wyRZZP\nvFfxxGl4Qt+srXpHQbaB7HkPxcg7P3xNRZCIrSG4dZqARAuyRXZHA1o+O4Tv\nfWglLm+ERJ/F4M1C+cuvTFBm+15xschpTofyFmTbpop72wyakf+4oLfm2b2s\n6euY/JstpR/ddX2Yws1fOFuZ52bJKJNw22Cm/uttm7PAokBswfHX28tQXKwP\neWUTFHKQJ573/nB52anXzv8V9SyEHABN6nCTLuUTZGAJhcx4biAuCjIZdpTK\nHbEiZpZ2wggATvp6xWqSo0eeSbahihtB2GqQVXzJkW8wgXw/o3yAm7vQJEFX\nzAsW8tIg9Plsntn9OYwcQLiYKYnB7+7JXx527REWrlcdLE7m6QeD0BqsOpsS\nygzDG8boNtqDVSDQgiZ0WCgeRNaiFOd/CR4xWlccPNfodUKZKxATxCxld448\n5q8a\r\n=eKif\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b20101e0d19219dd6f21950cba7cdc10bce45a80","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.51cfc597"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.51cfc597_1525908333328_0.3282433540604799","host":"s3://npm-registry-packages"}},"0.1.0-alpha.7e6aa5c8":{"name":"primer-popover","version":"0.1.0-alpha.7e6aa5c8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.7e6aa5c8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"99feb4d4c68c0ac58cb3416a92c559d18f64bebc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.7e6aa5c8.tgz","fileCount":9,"integrity":"sha512-vK5vspZZvUUJm8Gv53dhDG9J0mOdf5c7mgjatyBEzUHUL4imLgnCjygAPLoV0RVdotcBpndzEKIJlFb44G9mIQ==","signatures":[{"sig":"MEQCICK5qWMLOrcr65PadhiQrHBjoLM8pgKnTSQyeZzHggLyAiB4NwWOwjaTy9ht6Qsg4bfgo0netacZOJhSmxotlYjTCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa84WCCRA9TVsSAnZWagAAgdMP/ixJtdqkHuxP9qi6tq+l\nIv3Wt/5NL3lW+wtSZKH5PFvKMtwKwd8a8J544A94ClhiozR4GrT5/k2eEjoi\n87PISz8B00fbDUL/tx/b9EhFY/mkR5Z6KedBGEjfcbTMc+uWBdHWT8+sSL40\nvih7dLFPga431//SPvnf4ir5JVXBDbpPYBXcuBS/lcMUk/A7yHvWo/1IMxbs\n2yXt6pZXMJ/h8vQwlDJvq7WtucapMg0qpkNBA7rT3uQXDCgBcR7jg4DdtXh+\nWgpSfhUWKlPltpZEpDqpW3/X6qT68DO/MjBL+gdA94E8kvF7txfY4JtLZw0b\nSZbM2YZj04o/pXkmh9BQ1I0moypHJ7IgBz1+XOUq/myLaWrnl0lVwPfJ4qIK\nDQDueScZZ2GrDKl1q1VL5neB3HHfRuvy8TgZGe3fHnUmZokXfgGDxNKqHrfJ\nhXLzTX1xUQDTEia5MBmd0LEM4I+UG/YHwApyjLoBe/10DhzEtVgeGd4bZiEv\nS+Xiqcswp44ivo4DaIqiOWSNK/C7nFnldts1udRpqdud/7vmsiYQY1BuS0cA\nS4JgreRrBNX5wwJdlXjAo6S5JymNBpbCnn4/eB0qvNF5f2+m3QqAjGx4oCmY\nIOqKi2pEq6M++oLdnTi+wlYddx+lZdMFHw8LplForX2s+vKCnNGZfzMcJq4w\nvebK\r\n=Ilie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"99feb4d4c68c0ac58cb3416a92c559d18f64bebc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.7e6aa5c8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.7e6aa5c8_1525908865653_0.9985049964191937","host":"s3://npm-registry-packages"}},"0.1.0-alpha.68e2fa59":{"name":"primer-popover","version":"0.1.0-alpha.68e2fa59","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.68e2fa59","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c7f35ae97d740fb17f43f7db259173c896e908c9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.68e2fa59.tgz","fileCount":9,"integrity":"sha512-YPkUHtsX6FarAcyNyn9u0h9K/Uzl0c3t+DNWOjEYL9UXUW0sT+FkzhZwLKMtMvzOutpWWWC1vQ1o1dsdRAVDWQ==","signatures":[{"sig":"MEQCIDBCI/tGyfvw0CUc2hPwUGWogZ5RGRcOWrhAyUzUjRD0AiA2pkdmaw3VaOUHcbSLJ/Qxzjh+aSdIdizp4Eca5WVSjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa84avCRA9TVsSAnZWagAAungQAJVZFwXOURcreZw/x4Ah\nmk2GYo/GXXIlC9uT3AqwjCSq3yQ6xdXr0tiQ/P0Ec3wziRmYz6SS0Wso8KAE\nU5Ro66mDPO33afuWPpaMWzcJAy/ESQ3HIgqdWzHd/T3YUOJr5Gm/xUJehIaz\nQVoRIztfKMR8Oi+uvLVmGfYFEgkRVBrV3kxWBmSk4eR7gUoi0oHqHZ7tG/mf\nkwOZVAsw38biB7regD8P34hUdsmFovwG4Razx3ZnGH2IbmZThFBfXG67+edS\nDp6IXwzawdqSGF+Qp+Xhmaa2d3V7zZv18jOvDwLfUm957HWr5FN1rnbgFBTp\nuC5MqxoiRGaz7g1K4Whie0BbAKYwCtbIqNQXZqAkCorqvfepov5LhI6mx+x9\nwauNwpiAI12dG4lXgt2zqY+fpT9zkqbiED8zh84LacbfueOQnMyT7sPEAX8y\n2W6cb3XlIXGDul5MpQS7B6sOWrfGfojOfKaRAqssfrMPxF4IZCt/1jobVg4J\n/nsH7VQDjFrq446YAZN+iZRVN9f5z4Vtx1dVb7tjzvDdy+BwZeXYxiTtTWtJ\nzSWzH/Jvkso8qy0YL6GNiSDM2Vc075QOkM8yINRhYxIJFMlV/Jt9k9KUroaI\n/6nmPGUwqcC3iNdRieR4AmPbYB/G89Qg8fTC6BEIiL86FWVsa4wgLhO3Gp2/\nK51I\r\n=G+xN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c7f35ae97d740fb17f43f7db259173c896e908c9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.68e2fa59"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.68e2fa59_1525909166763_0.4229778032923921","host":"s3://npm-registry-packages"}},"0.0.6-rc.5":{"name":"primer-popover","version":"0.0.6-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0ebbef1591080239242c6da81bb4d8d9c9d0446c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.5.tgz","fileCount":8,"integrity":"sha512-n9QDDoBpxGbOlqWQ8aSeh9dS+NjFlCgscwuAIuyI+tUuRO5mbhnjqwTl6iZ552H9Bt95b2Af9t5TY3mM9giLzw==","signatures":[{"sig":"MEUCIFYh21F6g4xvDtXZbyn6vk8oUHw+YmvqaT48k7fcDav2AiEA+/4/dVFzplk3mMcDP5xdqZRfEfjVrCre10HTYbqymjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa88ryCRA9TVsSAnZWagAAQScP/j4V8oKZF6dpT6viNVsW\najimnDt5mifLa2nvE9+1XhncUQXK50D7iTHrwI+oXi+SiShCtkQQcI1ykCrx\ndYLGcTxugKZMpqu1wfIYsnvLuZZ7UnA0MtG9Tx5R9doXXNQPUS2b3C9KaRmK\nxRRt6mbmK0079PDoQ+BLcas6pkvK2OXGVHlVkOYSDVB57w7lj9SFCbziKymg\n6wzW1Nhtc2O7xUXIm1DVk0gPUH+vLTFk7ebsuNh7Mei/j4T0s4fDuSWO0CoT\nxLsajfa3eO3uOOXnd2VhpXCqr5CCWKoVaZbc41bjoRXnLVbmVRPBy1ughWO1\nhbh/FYusTi48r4dPnOtKIFqktPR79N2XnB2Qh/NXH8hIalm5dCf9UePvByur\nhalrGXapTj6YJicqRSg16/92UAHwIeHMguOJzh9HfybgoOt8LfGrW2ToEU/o\nQwj99zSdokLabovWUax0/aEHboWCEP+b6GquW9pMsBvOBVmqNlwKBIVJid8k\nQdGLK7dtEK8ITNdSM7kJrPi5eCIm6OhDkSeUWPzS7RnSnYiQz1B8hlLykBNc\nyfUCYarWx1adn14LGKeHcP+WBTn2xIvxZZCY6NdJ5Xyg/H6D+7y+osbQT7cC\nIWMcaPdmRPNaZBm7lqiP6Lp0UGLBToR/NqxMbaEF3ccF+7JOMZE3M7G4dK3N\naMTR\r\n=iXbz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0ebbef1591080239242c6da81bb4d8d9c9d0446c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.5_1525926631811_0.04250685189274939","host":"s3://npm-registry-packages"}},"0.1.0-alpha.5f2bfac8":{"name":"primer-popover","version":"0.1.0-alpha.5f2bfac8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.5f2bfac8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"96fa80563a75d55cf82e7a1f91a84438021673d2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.5f2bfac8.tgz","fileCount":9,"integrity":"sha512-zmrTKPSjkfH4li/jiGIwfTsSgKKvoRLIJQEPqdDO7GRbgboKFYsDUJLoaFAvh9SRhhVv2JqDjxCrT0Sb/lxNLw==","signatures":[{"sig":"MEUCIHg8R0Pot1hbY1MrDXbUCdTwZ8lQ1f+J1v4LKnCIAu1XAiEAjLp3l01OSTZT89cYU5YOhGLw1QHXcfSF/3hI6MebJcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9IepCRA9TVsSAnZWagAAzo4P/231fyK4aInDsR8i+Gbi\nDh0K3ebS82QV0swbpx0YHd4hjV8VsIW1UHjGR9uuRAJ5/YFn5tk0VyL9NstT\nEgtU/qcuxHm1P7FNFA0LB8QgtYMtao6WV3zo4Q6cvRI2MuOrzbAEuIN2UNaI\nAU+nrXVaSrZaCsttWh972AgWuiK9sYj92ixdpbW6FaAoU2dETohLtdSyQCeM\n9B9maEUJ+gmXx+FeGhqAQLrsU58NEmsrp03FHp1Hs7Jhxq4WveDzrQkMwGiC\nhCd7mvDa7RqyxyO8+9+F/cPNkICBedu+mRhap4qBJBu8fgGsnpz7i5yyDQK6\nzXFyIDAZKYXwAPx80+9nSsLCf5tjRXjwUYWpdUB61jQ3/p7BvS2BvwrjHIjP\nKL6DKvr56RZg3345/EjiZPxJibmWZ3pK4Pu0jrVJH7U5QMOi3CD+UuFZGgEd\nyzQ5tqnFRgqJ+tpBhUAKPKfXdPIlGEIEMeMQrQYTKTrS34KE3Xk+I0aKrZbY\nBxA+wxvcdpTfGPeFFN4GmPbGzuSXPK3Q/g+45qj3392X7iTJ78XLyLL3OR9d\nVMyOUmRJuaZpKF7aZkoZhEV20a+unckPJcyRRhNYFhU8X8eFwkGr16IJXEMr\nsXPRKXZStDbJrtDPdaM99DeVcAe8210gzHnE6RcYTxovk9q7RlxaGAjJW+JB\n7tNC\r\n=fAkH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"96fa80563a75d55cf82e7a1f91a84438021673d2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.5f2bfac8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.5f2bfac8_1525974952449_0.9679243060820371","host":"s3://npm-registry-packages"}},"0.1.0-alpha.5c3ca04a":{"name":"primer-popover","version":"0.1.0-alpha.5c3ca04a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.5c3ca04a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d0af298a0da42b85d2b315446d0e4428c2f22fcc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.5c3ca04a.tgz","fileCount":8,"integrity":"sha512-J5cUMYHFp8EfvHFVQ9uHsgd5QK/+94OorHCDE17rfZNesDANlNL/19d/1B9O8Bs3MVPCc821Ttt9CU9PjeQfog==","signatures":[{"sig":"MEYCIQC+XML4ns15F56ghUp+FnNwlOpRciha0cX+L4K0XW79BgIhAJx9gqVbQkuhPFgKY7UY+MXDaXtfgjpFIIWpID9eSh/a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MIFCRA9TVsSAnZWagAAIIUP/RAqiva/uFnltH3Xn3IK\nBy3BImwPQvkK745lGsvSiqdrx8iBCW4mZyMDqheq2OJTs8W+t/Ig5yHTJzAq\naBCZw4vU0zO94SpnA0Vwph4z199SOGlJp2z4TQTReypMdLqkYxcFqJ9gXtN2\noRgq9CVVB0oZiStr7Vy6GOu3duewi/PRaJK0Cwvy6AavMLAYLbbbjaygXWQ1\nh5Erd1+yKYt7e7W+YmL0ueF0Q+AJVQchqyf9bXjaXKJN73NlKhjnfIJs9JIj\n6TWyx8A5NM/qnQaeF28H87Q/I+/IQUY43fY1hfjJtPHs6MCb44I+HR5xFXt0\nyRpyjpWlZ49TJn7JLLQfNAW1JMAwRYIz5BAasanpxQ5/7h94F6pfwksXWmcE\n/ljrE0/RyKUcVNxfVGAFqUvnoJjg5YoyG89LRj9Ld2KKyCpuzpj2sD2OjSCH\nWDlsXJF+cxSS3DPwczXEoZPLdS/3Gr6tQrGh+GsKR2878q/+X3K3WbkPxPQc\ne1FG/9FUad68NMz7KBAPybtUbI202XlItXIs3zCLk+i5DdOH5HSXWcyCAnm7\nSFc6/SpSmD39TDJubEgo24XPM9uEy2845y/B2p4pS9v5A73lfrxZtd9wbjy2\nEOlOIl0Vk7Sf6bSvr/dpiKUIv1SZlK7QFMx/2avoHkPEaFB/joar65G8JgFY\npLIf\r\n=6YeF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d0af298a0da42b85d2b315446d0e4428c2f22fcc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.5c3ca04a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.5c3ca04a_1525989892152_0.9740369013060375","host":"s3://npm-registry-packages"}},"0.0.6-rc.6":{"name":"primer-popover","version":"0.0.6-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"de574fd5f0daf630b0399517e37be7525e54cde0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.6.tgz","fileCount":8,"integrity":"sha512-QFvsuZMDdzW8mqBePwwhW4YJ4xZy250dAPXWRFAF5AkV5pC9dnLf/FGeRrh26bLIVmtlBQ3dK+1qSdpDoZjXug==","signatures":[{"sig":"MEQCIQDnxj7EA/VtVk6/osKSI42Ns/nhNdHSfzAvQdze6Fn6OAIfaybWfBIAjQBfX2PkBGWErS0vVf/13s+E3pWbQyYsSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MJzCRA9TVsSAnZWagAAJ/4P/1Dv+V0ittNHdcZIXWc1\niz0HkpNNit5HsqNjKXKy8F+vxAmLBWM2K2enJ/hpnUqut6TdGXVTC58XIeup\npnKTquqM7RI44sBi6afssJnpppxj9834USvzY7fDhkvzqJ5ttZezpTyw+MMa\nKgspZT8YMEYBB4gMF023QXy+hcqG/qchdVBp6rm+sRR7YQtqEu7veKkpX2Hp\nW4V9/lOivdtApAr6j1Bb28QfgzQ4xipTo1GZIwz7S8xhSzEabNh0ymoGcc5x\nW4SUuyh+IWCAaeR3n8Hc7ZwPvxqTENUna0IZ3ya93cczEmYgvacg7mPQZvo/\ndhGEeIVW7Ml4wcOq6oAf92dU0c0LlQfKUv12PWShjo8NJwA6+mB5fJ918ejb\nya5BqFmqY0Im3A3jYn84rwKTCXAvVlz8LL/MBM4GVRgkEqg6w/YdnAtoB+xf\nvMdmSV5Qxs/f0J2aobN6SjTDkqCTuLc9TSFkwYY/U/uv86rGGB5uoRT35Tmv\nc9/q8VfW4qjI7utkrqDef6QA24sqKaz/xB6hiprESdpPVpqqUKw0htxsIFaD\ndvNQpoT5Hl2I1VPu9c45B6Kspuu9lkwWtQxci+z8sm4cXHMTM7tPHUsj75UZ\n+Ok3OcwEPXtn4MLK7V625aUUGfNP1LROuwYvwUU+stHhWi0OA9P8eLGKfgCK\n9lUI\r\n=opz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"de574fd5f0daf630b0399517e37be7525e54cde0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.6_1525989982635_0.6329579281243873","host":"s3://npm-registry-packages"}},"0.0.6-rc.7":{"name":"primer-popover","version":"0.0.6-rc.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.0.6-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d10562921b8c7224edf4c1eeb9a1bdfdd00e5e69","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.0.6-rc.7.tgz","fileCount":8,"integrity":"sha512-yG1BjUPRGzBwGdNA2FemsBg9PzVks1qJcW6NdCTpdH4kaTWc+3EFMQyqtukiULBZGJ3JvoSmO+6xd5AuT/jGLQ==","signatures":[{"sig":"MEUCIQCb7b9ctakL2qaqM6SWf24FNOgdjE4bezTOPZBONsxRawIgXWLVz8YGX1DFk4GInbBudi80/Chiyo9XluP6+5PXRhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MRqCRA9TVsSAnZWagAAZ5MP/idLjq3ToLQ9PSXFFNuf\nUvPqvGh7Vk2OzVmijBwk3u/qFoA1/HIvj0OQRyQ77oxDr+JRB26Au0Y3gIGa\nYR+ZBjPu3Eu9KkU65ruUStddAVqQlPLBpmrZlVHf6h9YFst8bAB8q9TN4zDJ\nAk0g8Fx0uylf3n7CDyMfL0+zNYMXcztdCMnkSvTmh5Wffl8QKdK+Bypwa1ks\nZnU/kGd5FDfSekK+K34a3wj/x+XvO6fZ0q3OCiMc6ihjVekP8+DU3P5qk4FQ\nLzYO1JNnD9LscYmS8JVa9Al/Sy05oY6P6bHF/8xRfT9KHxSA0Up1icD1ZS/w\nhCBp26Px+SY9hlH3nLpXz70ahMu6ET+8XM0uaEPYfuysSs/UR1EgRy6PfnUj\nQFCBkGEIUQ/gNXd5nxpv5s4c+nrlZ3rOKlduEDHyYnpnmTog8kpZRPcMqRap\nJNQtN0OtWMnJ8c/2N+GNbI2fxFutrxyHxXtUZIqCbmCdIepzMP+L3Usexczo\nJTq29uLd02GOuajvZqNX2onxHckzWQQBZISbRM3TBFEo4MO+LPtePKnV/72R\nHZVqlyMwLHZ3Ls57NTbnoqnymjJeSTQmqCbSzaEYBOcX+D0BQ78VoqDtoWkS\nxBIdr3xlqJDQbj0F719Zsnw4lY61EMaaXMn8qE08JS+fHW0MCCF/gBM81WiW\n3r3p\r\n=QYjM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d10562921b8c7224edf4c1eeb9a1bdfdd00e5e69","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.5-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.0.6-rc.7_1525990505504_0.418770160758986","host":"s3://npm-registry-packages"}},"0.1.0-rc.0":{"name":"primer-popover","version":"0.1.0-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a5dd611f40bef75354874bb0f7b180446244c545","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-rc.0.tgz","fileCount":8,"integrity":"sha512-oSHNNzL5gSlnn0lGtL80Bgr7jXfseBc90YVCixmmZzzR6y+rZlzb/VPOG31yxU0ejAcc+8rGbGTTyEDLG4MW3w==","signatures":[{"sig":"MEYCIQC2s/tx69Q/jwQVSQXTtdrP2f5mypHn77NisicRE4hEGwIhAL8/Z05+Xgvh9foAyNYz0epw32kqu0h6YxZRImyyFPW/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9Mn/CRA9TVsSAnZWagAAhZcP/i8Ov+knz/k66c1VEaNl\ntvOqA7/wN3cu7AbWRnQlDeRlEQKpNjAQQ5KPep+rBlo7sImOUFz9oIRfTltW\nVVMr+X7XYY5lS9m8R+OONSZfYq+yz6RxLmO8vsVR7JUONl8+D7nU06kRZXH3\nhXxN7MSNgx02iKrBDydineYCak7TTM2hYht72YoSnorpcdEv93hqEtC38VT9\neRv7F5KIIraC5LokQRwYgSochHvJ+MiwM50+H5vRD0RFEhLTRYknd3x+fEQO\nLen4hwzyagWyGAHWRi6bg7nqEGQWNpEpOZkCUwnk2VKYevkcQyFZNaBHFdfv\nqRWuvPG/yFTIKJ8HuOyrVKegr5eJIuQvdElYplJCcjG28aq/ogichIUiamzz\nWI+OYgGEZ5ygZv6Cdrz5A/Gi6/xJOrLs+z2wQr6Bx7Rn9CCQO9lPD0qlGLs3\ngq581Jg1YsIDEtbsqPoK/26NZtp1ChsR/MFJKBQE1qshjs4HzGecvBFPtGnu\nSO8nF52qLpgOSiz2yA1MEYwsj5wkeb/4RtgQy65W+3aZeHAzVb5nolfKxiIE\nPmldhqVsu4Oe6XaaN3fD2mmoVgOrGCyvNJrlDCWf6vBPuabSDxW63AbhsS11\nURaotmrmiEylv+h9tL3nPlxSvZdD+79OabSPesYpXXcyB1A1ekbpbJLxDVYQ\nLj/1\r\n=hmre\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a5dd611f40bef75354874bb0f7b180446244c545","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.6-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-rc.0_1525991934454_0.209420016805705","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"primer-popover","version":"0.1.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"53fbb76afcb617f944d2e805c8d884f6e0c97c40","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0.tgz","fileCount":8,"integrity":"sha512-YK1XFXFf0wFNKZGG29PbxSXWkCPlJeO0aNF5G09guX9iq2wk1qfCDCBIxyQ+mXju69npZ4rwnpqZ9jDKg5JE4w==","signatures":[{"sig":"MEQCIG1eirrMgx6ayDunXmJ1GxBS4vWDjG77+eCiN+B0eKCMAiBjrxsmJ8mo3rPFyuqDzdubMyZfJwWuas7GbThc0wSeYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":27969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9NDpCRA9TVsSAnZWagAASbkP/1LhXX6CrO6oo4C/3eX5\nwfTyYULRzq+8uC0SXClvmwlSFENc6P5MLl7ejkapUUiwYG66tYKu/VDFGRSJ\n42GKodCJZcEl6cyI9rnvWUbpVmCgZ6HnmyepvEQVlITbGrQ3NWXzmSmRg4rn\neQUxnCVGG3TxdOPtd5oIrReAiU63q4yQkiKPEv/lDHYm+8F3mOFq7TIO4S8x\nuD2crN7uAgPFcN1RqmbKwR92c5cZouzVRuFY4GMxgLt4Bb5u7MgPGPfFAg4h\nBwznqMryYsANKdqiUGw3b5rMkzNTAbJTJ/G/Y2WMdsbPT//wp85LZQmq9dRx\ntU2+97J4e9KOChskRho8Ik/QBAAvdL4LLtY5hPDD8nmHhXSKW3rbZciSCWLu\nVoWXLs2Adnabqpp2f+uhkNPk1DTw3G0cI9iL50PSAaklWvCm6CSXSc69OXio\n1VG94xzUEnxk5Q1dNfnZNN9nrWSiov5YeY5fyLqZ7kmASQ9EapOV1j4iuTtE\ncnrEV3c22tVp+EXaGqjD0SzJThbf3At0c0iA+VRO0r7eAgX5nxpxuL7YBapo\nVb8VUYvxrKCRN8WRJ7R8wU5TmH4QGnyce1U18WS4ba/fXUy1G4Jz7kar9lNs\n0+evASgE2yxe0ZB19UF6Aw5ZvLIRA2XBCrX1zWPNS2WIGKnHjMkW7utdu8Vw\nCxBy\r\n=/z97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"53fbb76afcb617f944d2e805c8d884f6e0c97c40","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3"},"_hasShrinkwrap":false,"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0_1525993703811_0.46086697764021123","host":"s3://npm-registry-packages"}},"0.1.0-alpha.62c2f82f":{"name":"primer-popover","version":"0.1.0-alpha.62c2f82f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-alpha.62c2f82f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"03b2a75be77d21b7ddfab78b3199b2b4462ec0ba","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-alpha.62c2f82f.tgz","fileCount":9,"integrity":"sha512-bozo/CeaVGRfkdjRo8dtiMq4Yi3WFka6dKUabgHavyz6Opbxs9xC1Cb9Li+32cx1GjhW9lNuFQ6itDhdgLR71A==","signatures":[{"sig":"MEYCIQCxxdpSqxjk5DIin4pgRKnRNpvJs5vRKParzPZn5zoUHgIhAJm/+dvuSbbcq+bVh98pwfRzqJDysnWj/9Wx+/xana9L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9dtQCRA9TVsSAnZWagAAS/sQAJ0syR8dTTzikDcltRxP\nlrp3ZEraXXNI5fbeNF2wgWgjiMyCPcdb3U6ohjeEz5od3+dvgC7e5N9rOcpG\nxcaHK60emDj2IXUfogqyHo1XuT/XhUSUTL2iP7ie3dm4isLuYBO1Lp3PQfMc\ngyMHb1vUSW+upyhfILhZeXOGZSsXN+8mVq+MGUmPB3yK1WkPPcL//e/y1tuO\nO0iOyPXR8SS9AATBVfjMMCVm2YGxOoDp83XOUQqEwEzqT2qwzInPy6JzYYiJ\n/dliAJTn2Dyxy85Y6GeUEg45NNQjc8S/PIdApJKjOY4PhuPlzfa3lxn2332q\nqwXb1AVcHU6PEm+MHL6V6sS1C5dJESUWporn8zmFjZTjpRMpEL87CdaLekuy\noleY9KNIIduDFb71JhKOCNHyL03tzEqf7b2GDFB3iYEqPeB11kJuVAD6Nn/I\nwhdfX8eX0GFA5UVn6L+uFutFqxIit/JQAQM0Fvr0VuvgRoUYcjbfjb6og4ON\nHkjpUhOpM+bS8lI4lB4cgBbe17hKhphGXtJdtgyVuz1AEh/9wCUm7cpUxGoA\ngfyjKvzAV7d0PgrIJXlFGNvqbVeqTIJ6Dt4CzAZYBsXYN4GkcpQGdaEXqrxe\nZ7aZohidYu8JVp+a21/clFtNQq9m+g6R/uKydKe1v8vWBYeNMRBgCPbZur1Q\nrAJG\r\n=sVPg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"03b2a75be77d21b7ddfab78b3199b2b4462ec0ba","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.62c2f82f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-alpha.62c2f82f_1526061903819_0.6301119832802962","host":"s3://npm-registry-packages"}},"0.2.0-alpha.749dd3bc":{"name":"primer-popover","version":"0.2.0-alpha.749dd3bc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.749dd3bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dbb870cde7daebbee91e7f109dd92dae333ff66d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.749dd3bc.tgz","fileCount":10,"integrity":"sha512-KkVa5s+1iUSY9lhP8wgfFmAix5Ojj+yKCfGVcUyYEMT/mVs4pmFU7zfrPcHgyf0jJKWlnHzvAjBx9uOoPO4baw==","signatures":[{"sig":"MEUCIQD9A7SW0NeK4UxtX+TNvKpzP1ZvAXKvDYPJEIqn4fv06gIgICLN9uzthotWorECCrotPjjJWxDvOHNGY+0v8ppvg78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9eZ2CRA9TVsSAnZWagAAEU4P/0SFBpY1IrtsvXo1RK2m\nvwNF8QV+YHLYp0zlvldmdVMFxCYU45YRhA5civp7mqLd2BFz9xmC/mmZ8kQI\nIDrF/XGQBa5cdOdzOcttYFRTVc/I+bNV7ggPEjompKd9JQYVJoaM51R/LPun\nxejjW2jBQ+6V8RMnLrHiC8hCdKPFhhyvZoQAeYAtJljwwOSvfgYwL0jK6QXH\nH4F9EAZi7nN5CVbydq/ym8UVnwjNwV34iTdIk9QzLVb10gvOmuwejPIEZZBU\n9EXTLlzMPh55FnhbBaos06jAvN+xs19oM9QovTpCnkVhLrummPL7Rbip+PrU\nsT0UEZFQRax4a8ae5v2SYF1UXYiYlY2KrkGEZuv524pII9y+hqLno9HQwqsK\noW8oV4I/wLgYx8rYfyeuVE/oL4t3yT0Fm3wTzrgQ9nBjljs0zrtqNOBhf65p\njkY0HpKnKQGbCXE8cjR69ZvLhXCN5WqMGmLIsmBbHD3h+OTAX7Q2AQAKj3zF\npwIedGZoZcKemxlE/us1WKhN0ycuNttDXKNpv9OVDTgoyo54V8zrstXNTmzZ\nhtyLN/Y3tfgS72CqTONt25LZkzIic63I7an2EJl/gJG5zGaVVaHqhhI/haIf\nl8LnBZ8aA9EKh0RAmAY967S2XzNc6q59ZpLzBCYb4uvRhP3Wjcb//vLu9Vys\nCKUT\r\n=e9Eo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"dbb870cde7daebbee91e7f109dd92dae333ff66d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.749dd3bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.749dd3bc_1526064757219_0.8785573503828259","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8673492":{"name":"primer-popover","version":"0.2.0-alpha.8673492","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8673492","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b9e7c0162776de4ffa2eec7a0d72d27c41eac610","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8673492.tgz","fileCount":10,"integrity":"sha512-kN6YAPyrJt80f4zl4zMbELrnNzQ2yqd2sp3Mb6wPu9zgO7KPXEsmwjQwz+RbJ/A4uR9BQN2eprV6+6B2/dW+QQ==","signatures":[{"sig":"MEQCIHld6ORxqqMzxxV0Dm8t+ThtEw4FiLsNCn7GvDnmL7uwAiAzRTI28FdwmMdv/ybLK14Ft0KDWLL5x6j44tFYVfsvhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9edRCRA9TVsSAnZWagAA8AUP/iS0o3IukIeOhLk1jI32\ndasA78XSKCzGYlafA23kTeX7gqSoIEDdcYkwmPsPABrJ2uyX+4NM6tI/xEUI\n3G7jsDJrbJ5EgsUXMQ1vdfpz8v9nf/z1D0GitMLuUsExMeucYDa+HBqp5shc\nzPkO26waDrN7drbU1ncQj4GSqRsPdDtXzYkoxCHHmNFmaNMsXBsJW9a8xwXw\n1IVZx8V3ikoQWLh4dTWMVX7LGcQV1H8zruHEsBHQCEzmd18YYYmEMQHVQo8B\nDeH2WJOyVDSSMxRr5BT9M8haiz+oFgDgyhcW+igVQ/0j87jLQ0k2mr3UGbcr\nS64jk/st1UdTJntQRtlh0zLQBx2x8jaRbDauERuuHVtXMd+hWiVpnNRWoW2u\n96vza7tgD5YjaOK8GU0Ia/8ThuDoPaCBMz73nJ/8OEmDwdvDXwplrdvqxySt\npOwpl7kMh1ABUyLzvkWYnW0a2YnzwwRlSLTmxga+tNcReqHRrGyRFGBWLR3o\nIgyP9zkEYsg4PgZd+6sRYfu8ewiM2iKup/7bqBLlWDm60+2UZAVwN4WpmoVM\n9H/Jyc/erEsMJb9jf+3NRJ6h9ylnN54rLOyOCNqhLluWmNGu4IL7CYolHZT/\nHvhqcx1lU3yskQPGmGts1xkDD/W+DWYdOpHPHJCe5SJqSJr8WpmhGhVZbRRi\n3ihy\r\n=jYU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b9e7c0162776de4ffa2eec7a0d72d27c41eac610","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.08673492"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8673492_1526064976469_0.6372151529779226","host":"s3://npm-registry-packages"}},"0.2.0-alpha.dde66593":{"name":"primer-popover","version":"0.2.0-alpha.dde66593","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.dde66593","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"93fbd071baf7316f91d1190aca935648f13ea963","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.dde66593.tgz","fileCount":10,"integrity":"sha512-0HQW87s3cULfPhsYCiqz1CmF2B5Jn6b6c+r1sbQj/b7IEp0jlc0K1u+VTCLx2jH4fki6dKksrjfWhWrqAB2uzg==","signatures":[{"sig":"MEUCIBeHU6A26wAcRV0t986o+N3Z41al2MVHjA2scykSzksCAiEA4vKHv920anTn66NMmy1g09HQvwvRhhpVkShwW1dwW8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9eoMCRA9TVsSAnZWagAAi90P/2fkDNqk08byrgo+ksZp\nQSzz/1HPgTFYHNBvKcLe0gAS4F5sx7co5WJryhRV8DIFzMgrltheR6m1VX3U\n/5YkStjERP2aprI/krSN0zvPCokyvZMrlha4rOQOlA3UFbqLpLtEZHe3tSPO\nl1Y8d0OD9jZvw2HzHAhafIAa9CZrDzCAboagWvPMNltoQd/gjzVaumK4Ivu5\nBarzE7PpFsg5lyOH/0AVB2NHtQxqXksU7RJc+ZzpvXkt1vgMkgNS0xTJ8XLB\njIOjDRp1tbK39Y0CqLh1UVMZidWbZXOEzwdRbVy7eo8UMRmREgIf0Z8pqYsF\nXgwgTOzdIcQVhXBv3aEjN2oonbaGHibDmOTbv2B8heQb1E0NceMbyY2NWMOV\n9EX/syaf3o1ktWBxnF/0gpb5sk6wBuM5Ezx2jlnPNSxJC81Yb/9LDeby7N9H\nOjqVZHZjS0FY6SHp3JMQIl7cwnkdJfyoj4iwubIiUYcjeyiT/d5aP1wQhcIg\nDjdZvX1UHxAaYBoiUqxqlc9V5ZmnlqTqc0cbByQDHszAXtGjzFhKU2Ip0iMU\nV3PDnaVMzfbgpdsd23DyEhgjcs5FXAqKAO5GO5Hbz35FU9ry7zF/3aeb30wh\n1FCKmQAhsoKTfw1cGQ4LFsTIcaelyMcfXNq11YutT3BgyG3GCLObeorKeJKS\n02JW\r\n=VQMQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"93fbd071baf7316f91d1190aca935648f13ea963","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dde66593"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.dde66593_1526065675522_0.22148525700984423","host":"s3://npm-registry-packages"}},"0.2.0-alpha.653de47c":{"name":"primer-popover","version":"0.2.0-alpha.653de47c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.653de47c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"28026b117fcbed825371a6573d263c88dead681e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.653de47c.tgz","fileCount":9,"integrity":"sha512-P6M+L8JYGVGtRGj5opjC60Ny+DNahtZzare2bXKK5WSkFjJPGHpQw+632+5/LZZ1RjDEwwyDdw335KmTwtgPMQ==","signatures":[{"sig":"MEUCIQCMt6I9Mbaqtk5b9F/EI1woXV261JKu95OpCq+lNdaEvgIgaMPLCEZfYnyfByQbFQ7aInNhIiqqDUKPVfUla42/urc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9e87CRA9TVsSAnZWagAAohgQAKJ3K+VYKVah5VyDhXOA\nMEnSVgt4S2OZ+yCE9cH7iG6HoEnp6mA18P6lTnG8VoPJNvqp264EQSBPhsQA\nRFeSJV+uTpu4dhDnLZ0CTj770FfU7dTKX1ToCLQ3vJxL3zX0rfT3fvciP5S4\nesFu+3UT+wd2XEJcRw6r1ZM1HEEpmI5AxRuebbDexUc1enTUAM5d/16Bkw6o\ndxnH7LTRDVluvWDwAcnbOI0rcVrBTLmq7vRABlZMAKkjpbnXtbOD3xok4ZKH\n7GdzkmNPscJUGWHf+6bQZ1UGfGuJZ18JyFmQ+vSwuFP3nN/SF3BPVXGtEGYn\nje/gjwblud9BZLbjYjzBSwIwzX2lF7dDT65PO/H0al7UBDrogUo8wnN5Rf3Y\nz7Y6tjSEWORHs0tNBd1LOFjp4e+9i3yRS7wLvA2sh5DILuDKzEeSsU237Rpy\nJxdjYfo2m4dFVJedKQHTKuLReF95ZQT6BsSJGRFajaKj8Hy432jJhRodJ4X6\n8yT0+thK+65rKfI11ZuAw8/cbgchwGu94YmM5WpmKt2C2PJbVH3hxPe8oJWH\nPO1qs13uqS3ac/BQJEP3Hr3vmbk8FxxLo6Uw3JiYUUpJ4GWLtRLGlPCvdM5h\n3hWMqh2IzmTPFmE7PjbyNnweP6gaf0pOzntpKsEJ6+Hdc/9lRwzdkWo0uycm\nbD9B\r\n=FyVD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"28026b117fcbed825371a6573d263c88dead681e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.653de47c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.653de47c_1526067002374_0.517180146643796","host":"s3://npm-registry-packages"}},"0.2.0-alpha.73ea74e2":{"name":"primer-popover","version":"0.2.0-alpha.73ea74e2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.73ea74e2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7c115e1ebc6f278e218da007465ea5df5da22c7f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.73ea74e2.tgz","fileCount":10,"integrity":"sha512-WBlPPrkuimn1WCKXA8WKSCOAtjrtChkEpmJ0SC5DQfk76g3S72+Sgt9Lkvp3Y7EAHFDBaiX9OHVJrKu1u9wO2Q==","signatures":[{"sig":"MEUCIQCFNwwYQOgHuSoHvTLIT0CREd40475xoVrnAN3Xt1D9HAIgYcPWCO0yV1AfStQ9zwmabIRekakZBO7a+Tq44qohEFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+cB/CRA9TVsSAnZWagAAnoEQAIhe2lmg4ZYLUb7S5jdg\nHh8TudD7FEv4H/mwcssbV8lwUlK7mPBYBtfyuceoF9dj7xzOev569QX7PsY5\nADv5xFwM6zFCCXAfQ/GYY9YboHpyaKr+bv4/j2mT0NDEbxXsiuvoOhVBCMGE\nXVilvMqpm4krgDSO4sOHKD5hH1Ta0Tpx+X9sMsonas+Z3+LfP/xXtJYW3HGD\nnBye9fk0/1Y54lQmOv5/J6y4TeQYy8P1m0kshRAU27gNej7LUa1Ryi/rpPD6\nKZH7VJZ4S3V7kCb0g8sI2xBOVgZgY8AnIr8aCFuQeMJ8fzPD4Un9YaaqISZr\n/m77GqsOD0yaBq6f+joKNPzdvuC+VZNk8bwrIoA0tQtQkVdD2jRBd4rEwK7Y\nsjQVv3aoOXnOo1ZCVnS0P9Gdhmjd+ZeFjP7hMXAZpSRq6glcRg+5uu63yaot\nJH7g5EGhtcz9T0ZdYsZV26ppS4UTmrYOlYYmPzHp0Usg01i/61EwPeZNFzh1\nPF7Pra02IBUuhXfeoW4Ui72fq3flygNWdS2LWkYyfqOwmWjXSIC/gwn0XU8h\nr7zuXWb1OJCaCSRRJZKn0fZT/DSdLK7TrVB3CAFWEQk1fRH67tChpUV7xXV4\nAs9m0DVXlYzbVotd33nRIcGp5FT36yPIJIb4hQeEZeGHV4WaBddOGk/ShtT8\noLmU\r\n=IZhw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"7c115e1ebc6f278e218da007465ea5df5da22c7f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.73ea74e2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.73ea74e2_1526317182719_0.5979658526380027","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b92c57d1":{"name":"primer-popover","version":"0.2.0-alpha.b92c57d1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b92c57d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2e3e7c0fdd7f6afabcb1dc75314e1e84a40c5c4d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b92c57d1.tgz","fileCount":10,"integrity":"sha512-GhdWM6/lkofAkbWnb9khLes41+BHCSYr8w6VUbh1LMndF9HFCvwbRNEvluGJHRvPQXHlmAhn61PwcML/st1gCA==","signatures":[{"sig":"MEQCID5w3wtQEQr3dMozm9UzWVNUe0DSLLhvpE5WCBVuM9MgAiAkcgZZI61FX/9EJnZpnNEx6B8WDW/mz+EFkzuWOoCjCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+cFFCRA9TVsSAnZWagAAX74QAJen33prj9m7WoO8q6c+\nU/NTdEi3/YtT5h1fxwCk4/hFTogiIBLsiaAV7zPu8fEuajpkVkPwgqhae3/K\nIE8kWCBgyJ1o6waT8Y3WV91QUl02t/d47XMHW2RbGsU0BpLghFpoGszMtrB0\nD9j2gLbeEOL0vKEqHBxgpchGkX1s5ZlXoXAafk77sbIc1772k9N4DUypAisM\nohFNO0onFOH9zYB0+I/gmiMMz1KGLAObXtIIcm717qK+DDfUwzK9IMkIclae\n6cw00pqrvD3nWJJV6g8Sma1lWdzl060kKZGcnhqgvu6bqOezpPzJG5d1cb0w\n8eghVG8lddtJOEfkP8N7paJicbfhtLRocGXRycZ8PH2mYdDeVtQQekVTj4YE\nSHG7jbdHWpbEu5aM3FVSvudmO75RqyHDWuhkMoN0E4i4mwOmaShLSHPqnoEa\n+29Lr1KhhIpdbcPtd9X1hOEJ9Z1OhrlSPYZlaKyeJPtJyCPXBIrTFw4q6UPJ\n5RI0f7DDD9qhq1q1t54WaXt0gLFI8W5AafBwa2LeHiDFWQBSHfMwsouBwVbh\nNKB7yZc0V1y+bts2xhrsYCoGh3buvRVqEX4c0qYKITA/Nr98/m3l7e42i57J\nqLslhLswHHg1n7m3bZZPSyAj6DsD27DlYxFg3lK/FceyoXHYIulH1sgCWC4k\nNbox\r\n=N0ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2e3e7c0fdd7f6afabcb1dc75314e1e84a40c5c4d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b92c57d1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b92c57d1_1526317380470_0.8429663776416054","host":"s3://npm-registry-packages"}},"0.2.0-alpha.814cdd3d":{"name":"primer-popover","version":"0.2.0-alpha.814cdd3d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.814cdd3d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ea2cdc36e51ff9acb78298fe14fbb6ae7610a5ac","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.814cdd3d.tgz","fileCount":10,"integrity":"sha512-TPi9186vnEqF/zIAgJ8JLIb6L90vYY0hGnlLtEZSx2XAM7lYT1fN2Js54TqSRrdk54AX1I3q9UkW2ku+1SSBew==","signatures":[{"sig":"MEQCIA1G9H7jPhYSNyK6hPj9nXEOw2rhCksIeUZvCVbdje64AiAgo3gHoaZNroo7g+/Amusl2CanWiDusL6ATmGT91y+sA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+cKdCRA9TVsSAnZWagAAzi8P/jHPVNwiK/fUK9EaMyMx\nDMz90NQFMD+ICfTxPYUjSS67Z0VoKZxIuWWA5AwrWWKdW1RIHaeG+bni+64I\nRTKu52zmOjJbMMLrwCPK6fYKDWdVvWOkNX95xt4uo8w0hhTUO4lN3PAhR5xF\nDbicP7VEMd7LU9TO91XxGKHiyNlkKf/N6JJsF7NMfa7GXKE6CbKu8axd9oU9\nXUqMoMZ1rhXhaQnldz+qUoQUKIKy3weHhbTG1mdVRr5tG2gf9TSdLYu6U339\nbDFwgH8J0OrZqD0x455bVg5y7Sc9POBIMoN42cItpNYWa9Thd5CdaVTZNumr\nJG4492mYDaFb+B1UhYk2zoQVJrDFBkAT2gg/5hmsTqJN9RFUGazxxq2Axk5p\nEnqUI6rvT7RJB+m+WiXRb9u6RzsHQTLZLekcEuuQTZtyvO6HI4K5aP5TeVT4\naGD7XHzPprjoKnenkxduusSpwJ+d/RBX+LMdh5WQYPhLk99hdey+olM/p+fW\n7jv8X0hJhpfZhD2eX9q7uVFI3LgJyVZwFDA8e5oS73aSeX1NflTF9apgy98U\nr5cKEIa3pIJwu8T2e08NNfKy8dgPw51QZEdY22Cz7ILjaVMsrziK6BxI4CYH\nBnabm97GwtQTez/BTJxe1a86bGR8RwF7rAuW/jIziK/34E/GuZSLuQ5H2Jpv\nwJwG\r\n=w0XW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ea2cdc36e51ff9acb78298fe14fbb6ae7610a5ac","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.814cdd3d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.814cdd3d_1526317724939_0.2614929489686828","host":"s3://npm-registry-packages"}},"0.2.0-alpha.68e890a4":{"name":"primer-popover","version":"0.2.0-alpha.68e890a4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.68e890a4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"602a3f442dd4ff85a536023e03e85f6b96051b13","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.68e890a4.tgz","fileCount":10,"integrity":"sha512-td30SvZ7sHlUnkna6XrU+E4YIh2tVfTrkKp2HSL6xeTyIlwAzImF/y6B2wj5ulXJhbsDiGeSeqdtmT15sp4+Mw==","signatures":[{"sig":"MEQCIDyQjS1eVT32/7V7bRJTQ3spiIsG56CCzoNpjDwAFCLfAiBCzMvDcSnMm9LvpnlgHkMSoHlQtiNVe/K9Rl6W31FchQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/wcJCRA9TVsSAnZWagAAXakP/R9SykhwN9BoUSbt9PNB\nEIESQAhX3KVgAeApJ4/Vr1OpnNNqJJY/+eax0d/0d+sY7aBABU2Oc+QWPXVE\n4P+BDzV2r2Gf4mhg4VfTqZ09HFL4Sz4pyrI2BRjJfINj3fZAG1drmFK91adV\nT7PKjW9bNwxoDeiiDrDpx10484GW6y5HZ76xIxVRJfG6OA2cUX+KuzOz86LY\nU3+oAmliQPWBZlsat8BsMdbDUCz4r1g66m19UMj1b7rG7oZR6U1peDjYRoPc\nRQA6acD6rhyQ+s1E2JNgEWd2s5z9kYSyD5vGTEQH7ItbrhDqSFNXVNxxba51\n9cAuiu/5FX6kJOeYgtFhH/p65uBE7Bq8DKVKW1XO/1tzMfe81p2GkoUxo77F\nS+asmkP1r8GA6gMkmHHjGE7DbJihNNsD728Us//wXqZgIYnjXjFGLrr+Bqbh\n8QhN4e+C62wXknOx+UXUUOjEsVSjhQlQpryPnuwuAVx6s/fgNBOf1gYO/7jI\n366FxVUGxqRqEWmXtEgB5yrdvOuehCyg1HtEo/VBPaUx7++xBibxdfcv/2KV\n16h9MDRwnPU3Rz05e3OSu7GcKO9YNhmUHCqQnL3ki5l8FMsgxBpxRXmMLhCN\nNWEwtold2v8R57gMo+fuQdDFBEALhzMjImu97kVsHduhOW1kRf3XiwBsx+2b\nGgnf\r\n=+6gG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"602a3f442dd4ff85a536023e03e85f6b96051b13","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.68e890a4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.68e890a4_1526662921104_0.3908870260483639","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b088b8ca":{"name":"primer-popover","version":"0.2.0-alpha.b088b8ca","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b088b8ca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"30a8896d1f914dd4e102e465517a3ca4953d92c6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b088b8ca.tgz","fileCount":10,"integrity":"sha512-yNKobsK8OMImoL/38q+HzCwJlbBGBCckwuzg+NeaBaj0dpRZt0vAOASMJfiGAtnuCsWWWgGM/25Nx2DaqbBKFw==","signatures":[{"sig":"MEYCIQD2sJtaALxQCHNOJLSQzH+i0DnJFaRzjuYG1q6mVjvVpQIhAM655oD1EQZIInT7zL2xeAr537aAqvuesPpGADAwliLk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBdehCRA9TVsSAnZWagAAFngP/1Z0An6pgmB40mHQCw+8\nit8kYmW7QNhorKPiHP9I2+BQRy1QVT2gMcVBITDgzdR67nVtnvV7MbxwQCWt\nXyPGE+tIYImtUwK3E8QMeg2b3IAB0IJFogFt9RYiUdPRigiNGG6/JgQIHsMl\n/yNrZhDrLOhFV3HZbXEHnCqfA/0/KAlul7fmQ4Gt7tNQYcHFGiaLKimAPte1\n2JjeFMH6xKZlaKS+1m9zspkYMzf4Cngno9UGLKOzISgQ+6vYwxrPqskmyPFp\nLXbIHwsBCMJNvyjJLYcIm0sN+VdhT6lbA+8pBYjDQlzSOcaG0FAMT6zSA3sm\nmjvD8nS6Jwsb9egpQFRXjLIpuVl/myeuA5l3NfBa4b5vbn/RgP7jkV8zvmDu\nftIDBqxSzqwYtmbgwtuejLsAGG+CqafmUOBoo/IBSf2J3c/zxW3A2a+KZ8q6\nvhPBEqkWz6IuahflhZ40bx8EdJ8I6NjxheHUsU1kj6lguoy2+PIOwBlju0Nc\n0ib18aML/ODCDb0gLo7zRIvilpVnOxD313uEj391m10dYGYFtXm4j+dOkxAr\ndig7yfnNmOy5FOoVGFF1ZMiNzbtjMInCs/IKOTXHzBMrBY3BbmaTeaer8r6Y\nzhCO2eHihEyy1G44WuqUTFDavozqLWZV+Y01vlNB067BWhLm5lVRH4CudHdm\nDn4X\r\n=JEtG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"30a8896d1f914dd4e102e465517a3ca4953d92c6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b088b8ca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b088b8ca_1527109536418_0.25359033477823134","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4e70f02d":{"name":"primer-popover","version":"0.2.0-alpha.4e70f02d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4e70f02d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e04d4a2eb0302c548c76fb4b82b7272416a97000","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4e70f02d.tgz","fileCount":10,"integrity":"sha512-BrnHBjn6fdfetDB3sLScj6W3QSh7lnFif/u08OKLScfQQ6nIhNeaDzf4nMq27HGsJUazNUgmUOe/aIUM6idZJQ==","signatures":[{"sig":"MEUCIDqcyV2Mj0tHO9aWtzTPHxB2gmpP+4mOUIXx72fJMGiJAiEA22Cn78lhh1Pk0AoRT1uR1YonJNu7WEIwbq+Gtwa9EF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEdwSCRA9TVsSAnZWagAAB0IP/iyDyRj3n63yWZJwRhwH\nsSn2GtTqBkny1uJ9Po5NIj2un2U2Y1R4viG6XX/A2CpdBzXT1htNpkFrKtnu\nbVrrLNleTKckdfI4stWf44KSwOubuQXEANP5toY8z+vgc4/m79zhc1JwQGUC\nSqTzYKx2NDF6Y8FOWLTkgzDK9FvwREuoDN0UAD8UIJdEgCInnxu//6imP8sd\n7ZwGQ3aFdzoTtKk8KYzlyGCa2csMNuoRuZ80qv1wiiVISVmsQeHo3zGAeXJH\nb/HcWCuPFGYtvKebgA9itfoXlQF/hD0Yr+4fIGNc/JWnGuVF3SaropitneF6\nbJ6xwd9ZcR1k53j7TeWKwHY6gimT8WRsjuiI0DwPiDsUJAyga4zGfxqn4vb0\n2WiMUsZ4PVhUyLEEaeMZO0rS6cKekV2sN5wly03gxVy3N4X4acGu7rddo8PW\ntqd/LeHi/bH/ZFX1oTbT/W+oTiEIy1gZUkDRuStoY4XjNCrvGrr5J2JDw4+S\n1YqPtgblFy2HDfN7jEmtgnMoPCVFgMSnw2wRfGubkUjNmDZzWlK8r0YHwAZQ\n+FN9Dlvg1AcFE4UKC94eEg7Leg7u2wzENBDQMHcMQwi4p3bbiJLULxB3X4SX\nlJGzO63lhro2T+qAcMEdo+zQDvFj8a6Mp1BAoi7n753tzNDc4tCYncemuNN/\nLG6t\r\n=MCvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e04d4a2eb0302c548c76fb4b82b7272416a97000","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4e70f02d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4e70f02d_1527897105492_0.9997174587293431","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b62d989b":{"name":"primer-popover","version":"0.2.0-alpha.b62d989b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b62d989b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"13408a24bd6422610db72176a12717d8c97e4779","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b62d989b.tgz","fileCount":10,"integrity":"sha512-/WGbg3EbVdz3CQrOfNvIL5cPn1JnnLjNc7BjI26SX0la2oUBZHMn2WnGFsmUw2zFPkHSjHX1rve/aqXu/+wdug==","signatures":[{"sig":"MEYCIQCL52mnmDo4eyKCRnSdz1bzYQMtzZ7HMyrUIi2ufhQ8pgIhAI/7k2iYr9OKJqAPbAzjxeGq3xct3/E9zZ7FWWJmBF1f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEdylCRA9TVsSAnZWagAAk34P/19F5vUnjzey/uAotZv1\nxU4Oa5QDt6pBxZCjj7q/AzBgQbByvH5i2n1WQqhQc+eJnNFLuiUuAbJaeIjQ\nCTZOe3FqELCIbNE1dZz8zgKfVpjvCuY8a93SLQg/upMyXb3aA8Qfgmx9E8dM\n1bRCeJGMLoGfviJqsZ8bsp0pV7r9yOXmfvlLSkkmnT8SvUUVW92rfRQZj9pA\nHW+O864SZpIBMDD8kE66SpetaNFi/T3Zn9ggOmc39A+AgWrB2Bi51yBpgqdS\n55s5sbyL+f5NynP0bBrcCUCi+LIPLljRUU+VVycrdn1ZM4gJPFWNXIn+dl5q\nkRbXhBIiA9UJV0BdCnSQcGL8ay9Qrgn18jxh2VU2fdXYK/2ujm7Yh23J/5Q2\n+0UIP5qTF5OO5779bIegY+6NYQ4huyNki1iRSRg/Lp7GBKbNMNPE2aTTdG21\nsdtkMoFmyLyVp2VImXFFfXvLhg9pj0vpSXqklaBCw1KMCl6AP2m7Wb4+ZYPI\naLCbM93gMs1bDYDC/lE7DXDkayZ2xgFCFJATqm55ckEMUiuviS4J7d8j7/l+\n6+xtHamtFtGnPAR2HPab5vmc2okz6RV2Mk2xT2Xr9wt+DiXOcQYRkR2EfNSk\nikkiaS1ylZttObKaNl5DDHRQ2v9zfBu/I7QLLzfHTCUffM/GKt8m1YgO2qKj\nCs1x\r\n=CwZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"13408a24bd6422610db72176a12717d8c97e4779","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b62d989b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b62d989b_1527897252199_0.18462096521978166","host":"s3://npm-registry-packages"}},"0.1.0-rc.1":{"name":"primer-popover","version":"0.1.0-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b7618c31e713d4c8f1dca949af5ddc02ed99b201","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-rc.1.tgz","fileCount":10,"integrity":"sha512-Mfo0pwUE/7Ky0Y8H4hsw7vzhXHjVBuxQDOaedx4LOm2nSO9YpkqzA6itqw8UEELxG4CXDvjUSi7wPT5Yh5mwFA==","signatures":[{"sig":"MEQCIAvTkwb4daEMZ5TDgQOx3L5hZxfG6akMz8ggThtoSED6AiAbiqaFTFnum7j8PtvoWAmzvOeR9xA6FWgPhbVAnTuCrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b7618c31e713d4c8f1dca949af5ddc02ed99b201","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.6-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-rc.1_1528930517555_0.9300912865881488","host":"s3://npm-registry-packages"}},"0.1.0-rc.2":{"name":"primer-popover","version":"0.1.0-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.0-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"143b36b54ee7f0dc18aef462e8ca8524804c260d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.0-rc.2.tgz","fileCount":10,"integrity":"sha512-4aofV5WDuElsaJ82QWzHnD3jKHoijtaIuAB9S/KDqoluXF0oBa3/i43Ae4BM0+LAlft5Hs++VD0vBE/9MGSVuQ==","signatures":[{"sig":"MEYCIQCAFHdz8w+wOhui4skzTIIHfRaMZmy63sYWPNJT0JbXkwIhANU5whbEJO3sAgzWcRTinXQonoYwE6XDfyeFbkhBatvv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"143b36b54ee7f0dc18aef462e8ca8524804c260d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.6-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.0-rc.2_1528931154244_0.7960707685758523","host":"s3://npm-registry-packages"}},"0.1.1-rc.0":{"name":"primer-popover","version":"0.1.1-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fd539db37c23633d3febfb45f66c22d2a02918fb","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.0.tgz","fileCount":9,"integrity":"sha512-8fpXvu9D7a/T0grTJp6y8romG0IZ3RSMhlJapNxkL8TCg3Dj1VIwJM8AXpNPjkQEmChO/0qiYKOSRzK4wV3R4g==","signatures":[{"sig":"MEUCIQCEqnuJinutqNZ3R7Ltxhwh7TrMyCKkXS2moYaGvqN5FAIgKvd85fKt547Zlcr8deFrAiHkus+QN2Az9E8ueC+o3I8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIawfCRA9TVsSAnZWagAAtuwP/2kPOKH5bqXRs8q1cZUm\n0M0LVLoYfRpU1JVpsfRPubke61/ymoBCXpoX9skmg8A6v8ZNzTQamk6Yfzsk\nXtBwagt3psfwO2ddnBeujf+sUaDrO5wfNXLxnM2z/XVRCNYiawdpfSlOnel4\nY6r/yggAtCXChg7K+e844Pu0pSAjUNrPQ0elTq4KCvbeuh6gxM+oXZHkdqHe\n7lljoEn+C/5rSTpDw7Tm5Ad9MYE4ZockcF/d0vEyF5Jg18lK3ajfMg8PvJNu\nzJrQIjO7yFX7CGACvG094GLkQorVEnnFJKOOfcJoIo+MQvhdlYhOsnK9xi4M\nfJriONUrXzmmWmQRdbvcbnr9xw0jzoRTULy5S9egsiRNJcl+zTqXINzMt+kU\nFE2kab+7nemwjl4UmZ75bB/Bu3ORaeSVY34Vsbrtca8bg6GIfOMMJePAUL+c\nBfej6MIz2LcB1WbGSyP2z0rwzNeWPzuuA6/zyOVBrEEGKKnMkpp+Jwsb32Ub\nGa53Sug5WI9d/mARfKCdpOkbNKrdFGB9TiDU3YWpDjq2H97flbXUrsQSiXTS\nbk04z2lJEgB+qxPzKO+BgsUCUHD9gYTdAScBTOrFGdrKjPZloYuMFoDDW7XT\nl27XFqMZII1fxH1Uh6pszYTz4rQFcwDRgkfMDwvIHh6QkmEJV8TbrpVxfqXa\nVdLt\r\n=R5DK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.0.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.5.4-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.0_1528933362966_0.3073280468159034","host":"s3://npm-registry-packages"}},"0.1.1-rc.1":{"name":"primer-popover","version":"0.1.1-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f777ceffbbaac2bd0f97f3c76bb2967801e8b418","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.1.tgz","fileCount":10,"integrity":"sha512-cxeXlLEHkRTBFDs8u7vrk3HaVMT6SoEBbmPTMu5tPKFc+wsh+aRf5+E2eu0KEhZ/qO7giHX4ROoL6iYF1ax8zg==","signatures":[{"sig":"MEQCIHojHHEwMyH0/SNFwkUnmS6Ct72vo7ga0lb1OQfIrEbhAiB0HNukT9fDcNW5zvAtWrq+XEzDU6kaj+er9hoCsWfZJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"f777ceffbbaac2bd0f97f3c76bb2967801e8b418","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.1_1528934903371_0.6499911980877362","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"primer-popover","version":"0.1.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ffab228485d9d23902acc914d17de106a9ce77d7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1.tgz","fileCount":10,"integrity":"sha512-avjNZwnCiEF8NI2vR6ADuhbzjLJ8Qos9qXqiu49StQ3PplQaUj1GHAgSwcy4fmZ8Ay3XTWXDFgNbDUsIKacN4Q==","signatures":[{"sig":"MEUCIQDjIeIoejNb2d943TFYoGKq9cwLmI/Vj5m+chPKf20AtgIgclH+uyO6X0DdgOzANeN1RfL+0ULe76k2FLGcckaRS1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36663},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"ffab228485d9d23902acc914d17de106a9ce77d7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4"},"_hasShrinkwrap":false,"peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1_1528991503771_0.8631920883305837","host":"s3://npm-registry-packages"}},"0.2.0-alpha.87a2e243":{"name":"primer-popover","version":"0.2.0-alpha.87a2e243","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.87a2e243","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"923aa2061204fd537b802424da4f69573d1a0901","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.87a2e243.tgz","fileCount":10,"integrity":"sha512-YQ9P2FJoHJxP5ngItXvp554ztyitRgXNreLqlDnjPIFxfzHkY0bptLy7hutH83Dr7NBu/t51+uFKmyQ7pSec6g==","signatures":[{"sig":"MEYCIQC17HEvFgf5Ehx2h8v4wiGAd7PZMTfJREUAza4ly1UXxQIhAPZnn3nQPSKkcZBVcV4HdtkjggQ5wB7aKQwYgoQbjtET","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"923aa2061204fd537b802424da4f69573d1a0901","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.87a2e243"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.87a2e243_1529358539517_0.10777042749272492","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6d79c2b1":{"name":"primer-popover","version":"0.2.0-alpha.6d79c2b1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6d79c2b1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b5fc7c5013309aba4fa780ebec0be29795dea432","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6d79c2b1.tgz","fileCount":10,"integrity":"sha512-ydMNVrkZYJSrUfUIGPocMQR7kNbks+OkxVTKQ/GXbEgAjySP++y/ZQPGGFOF/bobM6vfdPJcp9E5vN4FrMpkbA==","signatures":[{"sig":"MEYCIQCr+xpUSYyDB3bzsjzhFew3P8+513p4YGwwD7BUGpzBSAIhAKAE3p4MQ11WZxqgKs5RZf8Rsr1ecb9DfVwDhB8cR3gw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b5fc7c5013309aba4fa780ebec0be29795dea432","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6d79c2b1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6d79c2b1_1529446465280_0.5815762941972777","host":"s3://npm-registry-packages"}},"0.2.0-alpha.71a72cda":{"name":"primer-popover","version":"0.2.0-alpha.71a72cda","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.71a72cda","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e8867469fd383cca67e9fd815a7777bb916d5f76","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.71a72cda.tgz","fileCount":10,"integrity":"sha512-tPSBdV68r5pJzy55u9IJKxv2cvI8SpRC0C8SdlESkNUA1tS7ieOhWXD69XxeGs+9mcZqrU82yEyCmtLxz0jt3g==","signatures":[{"sig":"MEYCIQDIPvAUNb93BMuSlBy2uBvh/cZmT5ntRXlmQEjnFC37wQIhAKWL8uQhvoKlcbl8LrUeBOLnFca12bvFxGWGihVEIqAT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e8867469fd383cca67e9fd815a7777bb916d5f76","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.71a72cda"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.71a72cda_1529447694519_0.2686501669923911","host":"s3://npm-registry-packages"}},"0.1.1-rc.2":{"name":"primer-popover","version":"0.1.1-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"34e731b84af102b9ba58e8e37dca2e2fa238ff5b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.2.tgz","fileCount":10,"integrity":"sha512-J8jG1S6kediHz5pAF3dMjpROLt7x9Eg91Rz7rPfBzqsJN2kRRYp5HpQHyNMaAX17PmSyvxZlCZbjZCEueEc5aQ==","signatures":[{"sig":"MEQCICMbKwaxj1T5AmnIw7gv49mJg2Ml91LGETOHFMVfgunYAiBOKbPTE5J0b5AV6//ofNRZgy77p2YvUt2CE61jCk6nqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36666},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"34e731b84af102b9ba58e8e37dca2e2fa238ff5b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.2_1529529018281_0.6301572389145298","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e78fdb9a":{"name":"primer-popover","version":"0.2.0-alpha.e78fdb9a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e78fdb9a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"724b0f4f5a9da090a76dfc236dd7e939d62ed05b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e78fdb9a.tgz","fileCount":10,"integrity":"sha512-rCSYKZNnOqbWMYsdw8htvn8HNPzuwEwfFp/2L4bQpmKd1Sg8FBEElPPy8h935ecqQnzDk/nB5Pfz8KSUiRJLdg==","signatures":[{"sig":"MEYCIQDdXO3FFoyfVbW9vfjeZFhKRnwCZaWo3sViU2ALhPw0+gIhAJkxevZg4LkudC3s8NcAnfGfY3+FBUKWbBaznQsyHLgF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"724b0f4f5a9da090a76dfc236dd7e939d62ed05b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.e78fdb9a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e78fdb9a_1529531473486_0.008758426500089955","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3a1e758e":{"name":"primer-popover","version":"0.2.0-alpha.3a1e758e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3a1e758e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e985dd484787735876fffe6971a9cbfe2a016e3f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3a1e758e.tgz","fileCount":10,"integrity":"sha512-jgV1Fmd92ltQO9+OXmfKQndph3/OFU5Wu1RRn1joeokMtZJORyIM9DsRMHGG3EPeWSEUPV0Kzjt7vj94lj4OLg==","signatures":[{"sig":"MEQCIH1rwujQqo81la8gHzDV4kzYTXvLzSV6xMajmYHD+dRvAiBSQfwmbX2TK48mdNEqbVTl8YO5zzJskwY7vK/JL0TkuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e985dd484787735876fffe6971a9cbfe2a016e3f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.3a1e758e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3a1e758e_1529965403054_0.6437106872807958","host":"s3://npm-registry-packages"}},"0.1.1-rc.3":{"name":"primer-popover","version":"0.1.1-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"640efe5eb6b2a2dfd3ab16ba802d90557e839f45","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.3.tgz","fileCount":10,"integrity":"sha512-mzAXIkxv6V9w8R5ZXjGj2uEh5js+RnowHXQG1hg4T6gokftnqNOhxMjHaKyobPzc2HmAgm8+8Eud3qyeaFOhnQ==","signatures":[{"sig":"MEUCIQCS1bOHmI1Cwvchx+RzR7uBQy7O+gtv6HXNo2vz/kJjbAIgZ+1c/B6bDpqYeHp34HqrYucGXh//FNLRVEzFCd2mZnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36666},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"640efe5eb6b2a2dfd3ab16ba802d90557e839f45","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.3_1529965858560_0.44057350726977473","host":"s3://npm-registry-packages"}},"0.1.1-rc.4":{"name":"primer-popover","version":"0.1.1-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cd1c1fe28e1e13804484bcc45faf1477ed4329c1","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.4.tgz","fileCount":10,"integrity":"sha512-3VYlMgF2vXEYnCL2xs6L7WrYR8JHKagmyWvQSAExznfUKmoTVZyEQReLry/tujg8EckLA+lSMPfL4tueuJwQJw==","signatures":[{"sig":"MEUCIFP80Fei/yHaO4fY1Ty2201N+eHyUjuFqpXYFXq6UYPFAiEAyyjgP4sHbLv8nppnBjCXbc/tl3ALNC15OvB5W4gHugk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36666},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"cd1c1fe28e1e13804484bcc45faf1477ed4329c1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.4_1529984510650_0.8031720207897795","host":"s3://npm-registry-packages"}},"0.2.0-alpha.dc6b5a17":{"name":"primer-popover","version":"0.2.0-alpha.dc6b5a17","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.dc6b5a17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"954127174665702d0e5a54edefea2e93550c3363","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.dc6b5a17.tgz","fileCount":10,"integrity":"sha512-q6oMjJHXfMaRwycJiZ0expPlaBqa6DJX75LILPRbz62S1+oDZcmXLcy2jVcL90cf+OsZouQ7s3pRTWgA2wmxWQ==","signatures":[{"sig":"MEUCIQC6YbjzPUIdVESLd06Id14y86Ir+Ai/7YgVuQnxcsw9IwIgRgQZaEvTusPNNMqoEArVfXMdgZ3/vuTD5H/Qq0YVVPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36691},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"954127174665702d0e5a54edefea2e93550c3363","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dc6b5a17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.dc6b5a17_1529984728400_0.8245751773638887","host":"s3://npm-registry-packages"}},"0.1.1-rc.5":{"name":"primer-popover","version":"0.1.1-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c277470b67004fd0d50e7d924bf7f5bd3dd0e05","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.5.tgz","fileCount":10,"integrity":"sha512-ZgzA2ccsEi0HuG3HZKR7mHYD7mCMJBj/cmrFUY1h0sdueJq8W/vXgUscri8u1MmXjVVjk9y9HMmSOrS7lFQaDA==","signatures":[{"sig":"MEQCIAL8bXUX3G60AmXbTLmiyAl7DGLb0KIL2TA5JeCHcdRfAiAdC74IO4uhgJFn5PaVD/f5mYgSy8A95L57p+NRsLBENQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8c277470b67004fd0d50e7d924bf7f5bd3dd0e05","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.5_1529984893869_0.7662164979300619","host":"s3://npm-registry-packages"}},"0.1.1-rc.6":{"name":"primer-popover","version":"0.1.1-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ba7e13b168ec811ef527c8aaac152676423c9cb1","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.6.tgz","fileCount":10,"integrity":"sha512-k29VPgOe4FaYrzOWH22MWrH4IMs1dBNWx2BX6HPUFAuqbqD0pkD0Vyx1Zhk5/0SX/06ouLN5ZRAyqPaR/6nA9Q==","signatures":[{"sig":"MEUCIHEXMQnJEU07OYuCoaWVbGCvLQgVx8TPJHb9xDQODlE2AiEAwCGZiLQ7X6rRMsIPcfnWZXd7EOndRC71laC7psAj2uU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ba7e13b168ec811ef527c8aaac152676423c9cb1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.6_1529985832431_0.6051566224610845","host":"s3://npm-registry-packages"}},"0.1.1-rc.7":{"name":"primer-popover","version":"0.1.1-rc.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"65d0406cdc1f8f667543b77cbe58a968e5d11eb5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.7.tgz","fileCount":10,"integrity":"sha512-e20oqYywteKuY5ewCfhAgqvqLWI8DRej+O68MeJ6uvBfNX7yIXUYHQsxkL2hpGFtDb2P+Ys68+q7yZ/g2isNYg==","signatures":[{"sig":"MEYCIQCNSKk7OeuybvplgR+3QseiOfnZQ8ZIfxp6QdjS/GGbJQIhAP12EC0ejQMHgu0EXh6CFsDyu+M9nF8U7/luc0NdZhPi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"65d0406cdc1f8f667543b77cbe58a968e5d11eb5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.7_1529985952086_0.2600224932258144","host":"s3://npm-registry-packages"}},"0.2.0-alpha.89893e4a":{"name":"primer-popover","version":"0.2.0-alpha.89893e4a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.89893e4a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"18a894e5ce3e46e5ee0e1d88efbd86f98f484dd7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.89893e4a.tgz","fileCount":10,"integrity":"sha512-NdczsYVvutOgHWGSVl9pPfys/ZbTOrvozbtX/cTyYps6WAENoW88FSMpppu0rSzNuzr/wRF9GsHrHElSDVl2+A==","signatures":[{"sig":"MEYCIQDf/1UxI1OAJwR3iu+gaBG7MG2oyKvCvXpJKSHjcPZBiwIhAMBxl041ym5U9LEotgFcorkwZZos5LDIrWSziEPAcP6W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36691},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"18a894e5ce3e46e5ee0e1d88efbd86f98f484dd7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.89893e4a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.89893e4a_1530214544671_0.0866048403696329","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3091902b":{"name":"primer-popover","version":"0.2.0-alpha.3091902b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3091902b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c50548a32d2c7f2ac01fdebae110fb4899066748","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3091902b.tgz","fileCount":10,"integrity":"sha512-6vcLRJTsRP+TwjGER7EujJHl53IZmupUOFd7Vl64MuOAF/n2CUNHl9GWktIkotMOWB/HEBeYMhA9Dnekmo59dg==","signatures":[{"sig":"MEUCIBbP29PlWCUBuq+pwMvffyWdUUj3CLH8BXZ7gsncvOYyAiEApwzOj2tO/idNTgMF0mZj7Bd9gvGbzcb5U6JRARIST78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36691},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c50548a32d2c7f2ac01fdebae110fb4899066748","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.3091902b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3091902b_1530215219511_0.2690233307832264","host":"s3://npm-registry-packages"}},"0.1.1-rc.8":{"name":"primer-popover","version":"0.1.1-rc.8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"53c2120f5651a9b8dfea6fbc29d9f7be9693c927","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.8.tgz","fileCount":10,"integrity":"sha512-ITGYscTlc/tL12lAxwebznsuCN3rvGpfYvbcKCrAneTQIYUAwfEfJDWINyUDZfob6RYuTCgNDx53EFuROWZXyQ==","signatures":[{"sig":"MEUCIEqKmYVihNLLDPFC7ip3G2lXWNFOWHgnQRZVTWi5DY+nAiEAy9lnuCMJ9xVNupDTmFcCBbLO/Juw8MqyZ714lm/0B/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"53c2120f5651a9b8dfea6fbc29d9f7be9693c927","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.8_1530215424868_0.4917328730482875","host":"s3://npm-registry-packages"}},"0.1.1-rc.9":{"name":"primer-popover","version":"0.1.1-rc.9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"40831ae7edd2b1711e49fc8da8c7462e55878fe8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.9.tgz","fileCount":10,"integrity":"sha512-Q07jbwSO2j6f+ENl4mmLugsxQ890nfBZ8lgp1xY0GDZfywTMwxh2mZvFX42S2Jiw4BugY+LAeP+mLff0lgrIMg==","signatures":[{"sig":"MEYCIQCo5NjDLLJjIKv21DatwxrsuYKbZnzV/Oayyvh9rENZcwIhAMJShNc0IsUxcFpRiSxXftgbfiqJXPt15krO6iuolmlv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36676},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"40831ae7edd2b1711e49fc8da8c7462e55878fe8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.9_1530216404277_0.2525130948516612","host":"s3://npm-registry-packages"}},"0.1.1-rc.10":{"name":"primer-popover","version":"0.1.1-rc.10","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"90343a0c1abac2eedd5ec2bc818bbb7d0a385c08","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.10.tgz","fileCount":10,"integrity":"sha512-kD47SDt+wwpGZ9kD0VHIsC0Db0Qrp+5uyPUKqTiSFIGJ2fj863WyOMR6RxnlH3aRzQQI3sv67mDEyL7qoqAMvA==","signatures":[{"sig":"MEYCIQC+nGk1JDNKFBSg9ineeu+lYxy7dFQjIErMF/dRaQIeCgIhAM4tCgnKPPO+WQ1Uu0BmUN9GaYjZwMS7LTXUEtWNylkS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36677},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"90343a0c1abac2eedd5ec2bc818bbb7d0a385c08","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.10_1530218328177_0.8195900467332999","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a134dbf7":{"name":"primer-popover","version":"0.2.0-alpha.a134dbf7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a134dbf7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2fe31c9653605b22e50651c2fa220441546d9e1d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a134dbf7.tgz","fileCount":10,"integrity":"sha512-jkDHQF7CmBVlfW6YjlK/yHlliSTnoLMd59+mBJMSwFF7PaIFeEPqNUu7RjWdL8HB63tX3Sw/7j0rkdBO9GFrSw==","signatures":[{"sig":"MEYCIQDneRApQDQLzCAwLH2oLmVHfC4dUKIdxv57U7aPCnX9gAIhANDVF2p5s/TaH1FN4KMxTQytdMIIwIHTJeb/6MMu6Mfv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36691},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2fe31c9653605b22e50651c2fa220441546d9e1d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.a134dbf7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a134dbf7_1530227772355_0.5026283337168098","host":"s3://npm-registry-packages"}},"0.2.0-alpha.effa8d7e":{"name":"primer-popover","version":"0.2.0-alpha.effa8d7e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.effa8d7e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ad4a433d745171631b63d781c81050efdd05d48f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.effa8d7e.tgz","fileCount":10,"integrity":"sha512-8zO7hqdIjINTbmOzZ99fmYiD/NKT1W4NmqszlkI5H+SCAHUYk1OakzTcY522U+e9psFs3XKyTwYJ3MNWO9wDnw==","signatures":[{"sig":"MEUCIFpLzbL04Xkxr8bXCaAb+QxwKhOBoe5PNQiOgZr0YnqaAiEAt5ogs4PTsfCT1Wr91OlfmS4vkjpZ/gQtr0tMUb/g+Fw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ad4a433d745171631b63d781c81050efdd05d48f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.effa8d7e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.effa8d7e_1530228865815_0.45170438673318825","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7d60d746":{"name":"primer-popover","version":"0.2.0-alpha.7d60d746","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7d60d746","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b73a8b5bc819239e1e35b5dfb5b0f4966277e7f2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7d60d746.tgz","fileCount":10,"integrity":"sha512-AR2c/7O0HU66Uj6gi/S6Vx393dEpg5WBk12HVfXkP+qyO7la03hcpklWnZpbMcy/zgDvZaMj/IAKJavuA5yuxA==","signatures":[{"sig":"MEQCIHJ3H0K/bML2RzMYZPRlXDra9qoMeoHInDh7NeNjW5SXAiAW8pR7M9MHwhFyqy9JqNQUMNdSA711jx10VFAI5zQmcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b73a8b5bc819239e1e35b5dfb5b0f4966277e7f2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.7d60d746"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7d60d746_1530229170928_0.23527275116031876","host":"s3://npm-registry-packages"}},"0.1.1-rc.11":{"name":"primer-popover","version":"0.1.1-rc.11","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"effbd13af00ce64c4aef5d6593c3082a29d289b3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.11.tgz","fileCount":10,"integrity":"sha512-X7/e93rv8c1bymUmpoo/1tXw0L6i+VPfnDfUkrx5EJrdFXyAa0r54IFkLEVx9rLUH/aF3svBBrklROCXNlEySg==","signatures":[{"sig":"MEUCIDsoRzLk5XAfH20d43qK1L7rVq79hTtLOT3cuSIYwpxPAiEAvQE7A3hg8fHp1y2ZhNAgOvDpXQ3NutQ385YaApqgwXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36776},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"effbd13af00ce64c4aef5d6593c3082a29d289b3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.11_1530291401549_0.9517161880682612","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ab698d5e":{"name":"primer-popover","version":"0.2.0-alpha.ab698d5e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ab698d5e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a1709f2b1d8db9e439fd330de0bea3128773402a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ab698d5e.tgz","fileCount":10,"integrity":"sha512-ZFMJPwxaXoQU9lWBu/Hid7OOUyVCOB/GdyswTirFhtOSSGnrdxLif7j/wLEcvMONHGzgwqmh9pdmdTh07/Exig==","signatures":[{"sig":"MEUCIGQ94rKaA4QL7YAM8OtPOm0Xs1wFkQkxHdK00WzN0bYVAiEA5cIX8uyS8KFODPMeZj7Ra0h10VVxenPFNtFN9Bt3FOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a1709f2b1d8db9e439fd330de0bea3128773402a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ab698d5e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ab698d5e_1530300134782_0.3588011630368304","host":"s3://npm-registry-packages"}},"0.2.0-alpha.90b4f21c":{"name":"primer-popover","version":"0.2.0-alpha.90b4f21c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.90b4f21c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cc2ea658b170ba5123e0371b3d2fb3d5194208da","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.90b4f21c.tgz","fileCount":10,"integrity":"sha512-tDntmF4uCydnHkC+RxcQEtE62zipWV3M9aYpZ3m29mciQTjlibUJmnKcCTXIR4JUiwFRT6JfZypvN3qrasdQ2A==","signatures":[{"sig":"MEQCIGHxAWLm7wwpK1Jxa9b33DKWZL0YCu8c/1WGXRaEYWWvAiAg7NMKepqhAnWZJeoS6WgidT/J+zTUsYQ4mjngBVXKxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36693},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"cc2ea658b170ba5123e0371b3d2fb3d5194208da","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.90b4f21c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":">=2.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.90b4f21c_1530301793985_0.9251081511892894","host":"s3://npm-registry-packages"}},"0.1.1-rc.12":{"name":"primer-popover","version":"0.1.1-rc.12","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fac7f81ca10a30a22102bfd6726708b63af1866c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.12.tgz","fileCount":10,"integrity":"sha512-pnYpg0SayiQS0KwSL782VblwIBbHjHekbWMAzZsBGh67eulPDHt0BkwknXQVL+Dvop37+7q81xx0v4O7qQ/xrw==","signatures":[{"sig":"MEYCIQCI8+elD9izBUoxxBVYqek5frBqb1fAkM2Cl51vX07kOwIhAILw7Q3yU8u0ZEiL+kSCW6ecmkJyCqs2uLAzWnbd1Htb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36776},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"fac7f81ca10a30a22102bfd6726708b63af1866c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.12_1530304276751_0.7829798773186651","host":"s3://npm-registry-packages"}},"0.1.1-rc.13":{"name":"primer-popover","version":"0.1.1-rc.13","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.1-rc.13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ecefb0be0ce9436c840b1c1683d35a427a362fc8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.1-rc.13.tgz","fileCount":10,"integrity":"sha512-FThQZDoMUp0qVHYsuB1o1x6a1PEAPWKTABVaIh5kmRwJOATGJv+o1LS4ochmvt8SatxLnWSO5FINFfHMdkqyIA==","signatures":[{"sig":"MEUCIAMPetcNqQxdGIFLhZm9yIVLU+nas49+iJKS1V+VxZLoAiEAv3Azvv69E05vi6ftR5ntdXeYTbcPL+YqBCy/AVn7d4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36778},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ecefb0be0ce9436c840b1c1683d35a427a362fc8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.1-rc.13_1530305783784_0.8541283910487882","host":"s3://npm-registry-packages"}},"0.1.2-rc.0":{"name":"primer-popover","version":"0.1.2-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.2-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"286d15fea30e406446bd38b10d86a1847f2310eb","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.2-rc.0.tgz","fileCount":10,"integrity":"sha512-1wAmDVfGJ+Dzyl3IaKoMOvUjqiFhvi8xozabnWjVEUXIIWuuRCTJ++7nJozHV3SvnLWyOi5GqWudttcwyZRkpw==","signatures":[{"sig":"MEYCIQDHM9UpLDRpuV5dSXpu5OkMzoasIxeqvbN7IYG2iICz6gIhANMaWAeAH4bCS14CeaFEf+NxvkofC1A4s2zldRnKJoMc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36775},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"286d15fea30e406446bd38b10d86a1847f2310eb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.8-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.2-rc.0_1530305969920_0.9383600919485695","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"primer-popover","version":"0.1.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"95d8cc906017a09955a55893a3ef98ec0313f074","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.2.tgz","fileCount":10,"integrity":"sha512-Ha4lnR9o64oWEsgIm2uatTxyawepuQZFggacGgMr1vbQ9r53t1h3rj5oz7nKJn6Y1R5PKHeJIrBMcw4f7h4ZLA==","signatures":[{"sig":"MEUCIQD5d80C9tziA6IyOPmaqny4jawJqaQRB1DxZLqGqvKYAgIgSvXqLzlGvwPKtTkoseZQKsGdxJGA8FHYnqkjqwkQVjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36760},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"95d8cc906017a09955a55893a3ef98ec0313f074","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5"},"_hasShrinkwrap":false,"peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.2_1530554597350_0.48518530214750744","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4901ed89":{"name":"primer-popover","version":"0.2.0-alpha.4901ed89","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4901ed89","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2ae4ccb4f06e2b4183a2b8146159bded5ad7a257","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4901ed89.tgz","fileCount":10,"integrity":"sha512-LAeIrqxKmx4F1UlGShYdyGxoWB23bxEJfiB020MN8vgjFMDOAJ0yqcPaAuZa4R6fpD3kY7WgVMakhc8F/J55mw==","signatures":[{"sig":"MEUCIB0qKSguL3oLrbPfZg8nlZgCav5dCSbPbWKI7SdYONrMAiEAxLW6h2rXPbeL7TjAmvIJWEGnbSqjpi6LN61Z9bAsgbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2ae4ccb4f06e2b4183a2b8146159bded5ad7a257","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4901ed89"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4901ed89_1530638820142_0.5557132387723791","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0b756ad4":{"name":"primer-popover","version":"0.2.0-alpha.0b756ad4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0b756ad4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8b27484d7ec79e86411dc77c8670abfb49514a0e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0b756ad4.tgz","fileCount":10,"integrity":"sha512-LLXog1osqiMmqJmSkdaAfvriuu8IaHoJU0/dOZMVuFzgohkRjYBJ5QPt7DADVF0s/ojycuK0f0Zp3kNRLr/4Yw==","signatures":[{"sig":"MEUCICWG6G77590adu4sdJceuYWF0l1f3db1ViBfYtRMKHOOAiEAzEnD4vIit+zXOqrRrEW6lZPlViOD8iBeI3XVe57dMYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8b27484d7ec79e86411dc77c8670abfb49514a0e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.0b756ad4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0b756ad4_1530639163336_0.2594733725234075","host":"s3://npm-registry-packages"}},"0.2.0-alpha.fe4010eb":{"name":"primer-popover","version":"0.2.0-alpha.fe4010eb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.fe4010eb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e418828b46537cae00e43c6eb2439d9a47740e02","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.fe4010eb.tgz","fileCount":10,"integrity":"sha512-8Yn3QQ0Es8ordqpY2kSsM9TMq0BIxdSdGND7OMnkbgCReZFqMNIoFZbZTmci7njryiCQwfvdrkChbX9xewmEmg==","signatures":[{"sig":"MEUCIQCpOOso/pbstBgnDaPHlhRY5RgFNKa+HHA1om6Pw85+mQIgYupnr9AzFNKLf9dD96XPEF78mJqCLrvsOb/Vv1d373U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e418828b46537cae00e43c6eb2439d9a47740e02","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fe4010eb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.fe4010eb_1530639201372_0.6277157208616904","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4103b139":{"name":"primer-popover","version":"0.2.0-alpha.4103b139","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4103b139","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a1a599c12816bd20b4e50ca5cb38fdb78576820a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4103b139.tgz","fileCount":10,"integrity":"sha512-UEnOgvUuV+8xd/LJlI+FqCrcEjVoawjJbOFBsnnAOvz9U0bEiz83D0+tFS6c/ZUUx3lBjl91llRFuyKtjYdE5A==","signatures":[{"sig":"MEYCIQDHVoDSu6KFkvcsCUWuMNoRtM0k3oPWxYKsFuY5eYWhMAIhALJ1Rn9R493Q2R4JM+2NDIjAftEeNrclkGP4rtlKD3YQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a1a599c12816bd20b4e50ca5cb38fdb78576820a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4103b139"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4103b139_1530639795983_0.8107089827935481","host":"s3://npm-registry-packages"}},"0.2.0-alpha.eb7f6898":{"name":"primer-popover","version":"0.2.0-alpha.eb7f6898","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.eb7f6898","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"119d17fb2911b76603d1cf975c0bfcd8c93e35d2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.eb7f6898.tgz","fileCount":10,"integrity":"sha512-4/JnT3YO1mYISi8XLIY12I1rF4HFit5PaaBt/TwYVdmyDY79nLjK87R9W9GWNrCMJf90LS1i+ffHhfqypb9aHA==","signatures":[{"sig":"MEQCIGVZAIxAGrTd5cW6kQb82W5/AQZlEMflfvKySqK7gzkBAiBUuzMKqoW7KKK1N7EwR3+j4pKM1Kqeav4ARuZUrFAxWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"119d17fb2911b76603d1cf975c0bfcd8c93e35d2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.eb7f6898"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.eb7f6898_1530640595354_0.31576641750675916","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d773723d":{"name":"primer-popover","version":"0.2.0-alpha.d773723d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d773723d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"65a8ce993c09073730faeab9d4205b791c2a56e7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d773723d.tgz","fileCount":10,"integrity":"sha512-hQYRajkFJ3z6n1SXV9oS51Fgu3h6uciik1xFHXD6A6/AKUhuyOqBAr3AM7rtnkku7ds/wasWc1a/GDSsA2klcg==","signatures":[{"sig":"MEYCIQD4QHt73ffOUwOPNErlDElLXX8ki+Hag1m8DTDcpLZ1SwIhAI8qeYRiI5ZBdEprguAA/A1h7QQmuinuH7VW8TQx4s8b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"65a8ce993c09073730faeab9d4205b791c2a56e7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d773723d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d773723d_1530640671903_0.2905177456454964","host":"s3://npm-registry-packages"}},"0.2.0-alpha.dae40155":{"name":"primer-popover","version":"0.2.0-alpha.dae40155","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.dae40155","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aa1e23894c8a5dc26de298a2b9b07023ef43c6a3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.dae40155.tgz","fileCount":10,"integrity":"sha512-S862kjeqNhkJvJwaArlfII5g8cwI2aXct56TU2Ads3juDp08dvAK86+FyCOlRhRCcWbllAfHS9pAKkc2PpQIhg==","signatures":[{"sig":"MEQCIFhhN6W5+1EMThahoAn1Vrr65QGoDurFSZMl95aREn3eAiB6qagbFnsoM77SltxUsC+Ph5J7JRI3+Y9Df1D2Q3D+xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"aa1e23894c8a5dc26de298a2b9b07023ef43c6a3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dae40155"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.dae40155_1530641700569_0.22254583742782863","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c417c2bc":{"name":"primer-popover","version":"0.2.0-alpha.c417c2bc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c417c2bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8f00d791304ee062c6fdf99ed6ab6d96f249dccf","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c417c2bc.tgz","fileCount":10,"integrity":"sha512-itiMYndMs9v1Dnus8B2HyIERO6BIYLfXdx7secQoV0kRQTBnYO/0EsE5Ex87Jq5MFjIAarnT/vA2kBiy3PsOsA==","signatures":[{"sig":"MEYCIQDQvHQGOzCG6msQXBRJz86fWQ839n9hb4Cus2keNr8KJAIhAPilS86YUVB6vcaVOadzZS1qGvdhjPxmVfbMwQopjrXJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8f00d791304ee062c6fdf99ed6ab6d96f249dccf","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c417c2bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c417c2bc_1530642920604_0.42411100100804155","host":"s3://npm-registry-packages"}},"0.1.2-rc.1":{"name":"primer-popover","version":"0.1.2-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.2-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7fa576edbab01ce71f4967b77066405a326e218f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.2-rc.1.tgz","fileCount":10,"integrity":"sha512-UJIxCk00MzdTsw+y4Re2SIMSbLGt7tOLekNTRRRhB17lBpSixvS12r6D6yn5lOXG0wbeRQDIJyVAvBkB4xZygA==","signatures":[{"sig":"MEUCIQD4fyT1RKUL/bJSmzYpZIYPqcY0ad1NLygvcrf83w/dPgIgYM9qqgw+DN24IbuTelrHkwtgUdRT8k4FdaKFXfs/WAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36775},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"7fa576edbab01ce71f4967b77066405a326e218f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.8-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.2-rc.1_1530642923630_0.7771583051617821","host":"s3://npm-registry-packages"}},"0.1.2-rc.2":{"name":"primer-popover","version":"0.1.2-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.2-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"33538b3499f8cc5efcc2f5a348b80f44902bbbcd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.2-rc.2.tgz","fileCount":10,"integrity":"sha512-PFxcVjPceSVsl6DHtE0t7JmWwn8UqChU/lW5ZmQebyqIVQDgXpsGW0ztdyGsJMDStSvAhz/ajoH8t6uOi6D5fg==","signatures":[{"sig":"MEUCIQDZipRmvcRlB0EEgakoYuXbyVbUHp9/B+3BB0rSujARJAIgd+mcjQM4aqdg/pZbUdLuMklvdJLXF4iyQhorzAnlU5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36775},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"33538b3499f8cc5efcc2f5a348b80f44902bbbcd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.8-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.2-rc.2_1530643860262_0.7924946119213827","host":"s3://npm-registry-packages"}},"0.1.3-rc.0":{"name":"primer-popover","version":"0.1.3-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.3-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"684fafccb2c28bdcc5cc7132ed80be691dcfa87f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.3-rc.0.tgz","fileCount":10,"integrity":"sha512-P7VcnanoIuqpwYWnltVijtyf4Ky1whoWESxBIrVVppTxJQO9xSt1yLxxy+njF0wnfFpvUHeEqEQ8Bh8cTypSTQ==","signatures":[{"sig":"MEUCIQCiCJRaT3dqTIlt8noJPy5zswbImSq4pu9vzW26P3EOtgIgAm+4mZnj7RBI3OOGCr1oIf2aPsUxzqgi2PA5yKdZb9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36775},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"684fafccb2c28bdcc5cc7132ed80be691dcfa87f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.3-rc.0_1532721457200_0.41088889491430747","host":"s3://npm-registry-packages"}},"0.1.3-rc.1":{"name":"primer-popover","version":"0.1.3-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.3-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bb685cc2373b9bb8e5d9a2536a0c217db922e601","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.3-rc.1.tgz","fileCount":10,"integrity":"sha512-qIywdhaUoqwID8tzVr6XJW2kwMEV/m2Sg/73eLdTMZzuRWa7ibKekU8EWwx2ZH2c2WX7u0upEV+MAohJpcpY7w==","signatures":[{"sig":"MEYCIQCJuuJ/TJneB86/npHnBU+e2Fb4dGVqBvAiefAhP9R62gIhAL/aWmKJhdjMYHtDi3JjtY2E/JUjH0Ds0tZloHzrGn1c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36775},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"bb685cc2373b9bb8e5d9a2536a0c217db922e601","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.3-rc.1_1532723368173_0.3174783032919397","host":"s3://npm-registry-packages"}},"0.1.3-rc.2":{"name":"primer-popover","version":"0.1.3-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.3-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"36aca9e54783bb7fc100579e60411fc71d24c01c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.3-rc.2.tgz","fileCount":10,"integrity":"sha512-C96nqzdv1ExDFQyfucKPPJ5TLO9LMqkanKKMm0L8WQJ0DXtxNYYe6l1ZF1xUdkHha1blD5OCHPV+jzPVps8rvg==","signatures":[{"sig":"MEUCIQD05PPsbnz9OY+LA8bFXPoAJ5YXjLZy9QIPYKx7WswV/AIgV/sGSKh1nfaRA9/1y014oju2XmcN4GalTY7/LbEcly4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36775},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"36aca9e54783bb7fc100579e60411fc71d24c01c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.3-rc.2_1532723532411_0.35448248915426195","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"primer-popover","version":"0.1.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0a285c8dc7feb4447744598a79b7a17091652c76","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.3.tgz","fileCount":10,"integrity":"sha512-2YQUt9PEXAc+IouyA0eZ0vK5e04tHfxMNYvNt5lZ+UFkL7weKO4P0SnG7Q0AAqmUHJ1o/2yALttFi0puGza8zA==","signatures":[{"sig":"MEQCIAoK7UCXEVYDQaCpmSY+W8p/uWzqT+ofCs/0xMrjdq2ZAiBtsShQC8evd7/wtuKNzutPv4j+dfeyqrO+uOcaWep6Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36760},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"0a285c8dc7feb4447744598a79b7a17091652c76","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0"},"_hasShrinkwrap":false,"peerDependencies":{"primer-box":"2.5.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.3_1532727969159_0.07968279446357385","host":"s3://npm-registry-packages"}},"0.2.0-alpha.dc28805d":{"name":"primer-popover","version":"0.2.0-alpha.dc28805d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.dc28805d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1dacb1d48c8bd811087bb935ac0b0c4d82a40222","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.dc28805d.tgz","fileCount":10,"integrity":"sha512-ieroKQ0more5y57mvLOh5V6/mTrQqDD57KyM4wWUVF/fTnIILYupN3lPON0xiK99LpLtMC0mkDYWtGvKBNj8Mg==","signatures":[{"sig":"MEUCIQD7G3N+tA+7vr7GCNa/scexmG5Ozf5hte0b0NE3BJ0zQAIgcBFl/Scr7L+enSPi3UIrIMpQTWUYyOiYRdiaCq+fvMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1dacb1d48c8bd811087bb935ac0b0c4d82a40222","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.dc28805d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.dc28805d_1533234157045_0.0949215080114183","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c66331d4":{"name":"primer-popover","version":"0.2.0-alpha.c66331d4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c66331d4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"64ffc1703822271578a757b3b8e404c052c63ee1","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c66331d4.tgz","fileCount":10,"integrity":"sha512-Tgh//DARtzBauGyzZyIF3yMTClLLoeSqCRIoPJwn1mnL3J3MjrMiW7gSMU9qFfKQBG7vmCOS1j53qV2/YvyXuw==","signatures":[{"sig":"MEYCIQD59fuQ2U/DIkyIS59WW1YUOmgQw66TLQihjkAVFMmu+gIhAJZ3OSMSDjZF+xjp3WCt1mqXR7HtXUXMEeZciaEPAzYM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"64ffc1703822271578a757b3b8e404c052c63ee1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.c66331d4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c66331d4_1533234504724_0.1340782080678169","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b19ce449":{"name":"primer-popover","version":"0.2.0-alpha.b19ce449","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b19ce449","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"58d0bdfb236abf4e74e91190202427250f1ad9b8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b19ce449.tgz","fileCount":10,"integrity":"sha512-8nHZkRVWnRMl01njzCzv7TnxPJXcCIAXSinYIzQB945568lSMEvDkYzriWBQ0Pk4WhbQV8rRAa1Hp+lmfvSmjw==","signatures":[{"sig":"MEUCIDsC4H67mqr7x6ts2H2eg8GqSdNj3D0oPw0bqN5jfUwVAiEAv64RMnkpz4Q7mIizhMdITJDXMxRrVJpHKvw351OXhIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"58d0bdfb236abf4e74e91190202427250f1ad9b8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.b19ce449"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b19ce449_1533235007928_0.14956825413517727","host":"s3://npm-registry-packages"}},"0.2.0-alpha.86ffde2d":{"name":"primer-popover","version":"0.2.0-alpha.86ffde2d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.86ffde2d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b161da893f86d37174c213452f29a28d43bbf6b2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.86ffde2d.tgz","fileCount":10,"integrity":"sha512-CMISWQk1Gvuyf7Foiwf9dckbpb6usErVEW6nC1KvkupsVNA3OugJRf/3qAAKYozHpXWzF8BkAPfVjJVREecZnQ==","signatures":[{"sig":"MEUCIQDDqrXb8CvOCRNLFo6qbqzmm5zE+G9o6oDg7WPXdTWsRwIgWG4HDX7ggxY/MYtBIOv0OUqOiN1OxB3JrXlcXJt9XUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b161da893f86d37174c213452f29a28d43bbf6b2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.86ffde2d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.86ffde2d_1533249520589_0.8811265352105573","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"primer-popover","version":"0.1.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"74d481025d7a25abbbcd54dfd60e272586552d80","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4.tgz","fileCount":10,"integrity":"sha512-0k8v7jFHYbp7Fjj1o3gixFLuu6LcYWDna1ICG/VCY4I0kOFX0SeX8QR+i+OVs/BQRVXWTHqsQNBGPXNkMVWvfQ==","signatures":[{"sig":"MEYCIQDQ6mB1ue2NRF7uzgwdm33u6L0MvbZ/Gb1xrmsUZzUM+AIhAJHgvps7z3ynNYQNNV6BDfGd6BmKBf74exfDM4Um2aGu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36760},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"_shasum":"74d481025d7a25abbbcd54dfd60e272586552d80","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0"},"_hasShrinkwrap":false,"peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4_1533322367003_0.689220694111899","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c1adda16":{"name":"primer-popover","version":"0.2.0-alpha.c1adda16","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c1adda16","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c6067e84e3853a1951ba10b3318c63c31fda1aaa","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c1adda16.tgz","fileCount":10,"integrity":"sha512-cuoYZEeGYD/YCTEoodgGY8TZw3d3rtPGL+HIO7o4oUQHfqWIE23W2se1gXh2ZxUNkJTcwFKlHVMOBR73uUiFtg==","signatures":[{"sig":"MEUCIQCIToFCDbFXUorvrETUybXzsEn7/kQmFsPG65DdGFxNXwIgBuyPAx+wHDD+jvfNE+IuSw6olgI73CIsDATpkjDAV9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfv7qCRA9TVsSAnZWagAAZXIP/Azyn/0PCLj8M8873pRU\nDQp8rX1b2Ba8FYfZVPU1yG7unw37K1N2gSGAfG/HSqweewTiLsHcVuQW9nSh\niaef3wnPbBom6Qk6fLB36Rka5oppA+i7/muTX7UQJYtuxHx5xlDIjFMH4MOj\nIRro2xjA/jWUQvB1yAs7j862SMtmkpvQHhjKGt7NA5koFs6eyt2y6vKWJiaz\n2SAUiW1j3Kmypgy8xeqLjCI0m2RehY7/diw5o6CCVe3Zlbt5ElpzxPkxXoAX\nQsR2xtpFUFCG5Z6Sp+DgW8HjkwHliACl4nwdbrxNuGnOpywSMfT4YS12dMZk\nd/4QuxmviLh4ol4m6OyIDcbsVNNbDBJw/jSYmRiG/Olji4MLfqj/u9fDapD9\nhyuS8u/Y/yuU7F4/kyelM1UF56cG/rtvdf40t4nf3ZI+38A6exDqpUAZGe/m\nRZMUXj4odnQN7mEz3rNHkxpNBkcyyw29tU6PImRjLwUYD48/VOgo6ACiyQI7\nxJA73JxLslC5Rf7QaG2hu+LaEWr5azPh0Cni/hLo10srwolV/0wpELxcbH90\nWpZ4r5ziilpc9ytrWLKwxk/i87BGtJT3IezilyTZ9WXzB8RTWwvzX7QUhhem\npjBhza56x+1dMGvudLOcxt3upjZkG/Ip5Nl3Z92WIP4Lq46JWio9YXbXipzV\nbhWw\r\n=QVQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c6067e84e3853a1951ba10b3318c63c31fda1aaa","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.c1adda16"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c1adda16_1535049449949_0.38338786972884686","host":"s3://npm-registry-packages"}},"0.2.0-alpha.602ed262":{"name":"primer-popover","version":"0.2.0-alpha.602ed262","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.602ed262","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"53c90e668f64118e0018e9ad9e0bd4ba63ae91b9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.602ed262.tgz","fileCount":10,"integrity":"sha512-bv5nMO+aBfe3zSLZl28M3TpLVMqSzOv0T/4kbWtcGE7v0IlQ7nKQebAl1vW4mP3LPaYldBuebom7P13p4v8rTw==","signatures":[{"sig":"MEUCIGq56HJCxjhUejbGVntwjQaIbynyfBvhgktbdoVnKacPAiEAsZVeiz3ur7vQkBtb7Xk9pJ+yb8Lz5hw3tiCOkIPABqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfzhiCRA9TVsSAnZWagAAQXUP/2ABs3iIaPsExLFEPmts\nmJEWm8pKzyt0rM/sXnKw+5lp2ShK2bzF4Q/8xxO7Wnc5M43d1/APiF13lRN/\nHeZyjLQZGEUfehdaPfATg7hp+UZuJnwXZwFg16oy4kC7GlQrCE9NgsNbL6/B\nbNcPko5MaHlgHEo83SPbuKunKnn7mD5YKHSbW7qSLEUS9103Xoqg+M/YOAMP\n+00z65KT5iXJMhnLuw1sO1OZG1yCt+m2O66VfGyKRjG2lZCwMp50hdj0OYrT\nA0ojwXOeC3AM4DrnX1lIYrhaq3+NdTwkfgqYwMaVTN1lEUaNvWWaTO09pj7J\nrNK5oGa2e2npuOXojLqw4arpnbtPRUphv2DjDabX3CQrqJ7YhqU0ThmmOG+Z\nI0iF0H7NI7jysy4xTt6XE4eiEx3S6YApgVwzy8zQ22mWN5uKZppS7BEBOY5n\nXfOPCrlmB2SuaNCyxbDyPsXydkaodsVC+lGcpNVOMCkdd8C6hI+Sx+kN0UzR\n7z/Odm+3SUPJFhsXTmTxY8c5C0V0TR9CRLLbCpxSmufJYfei3JhO++B2OPAf\nZVvRJpGPKCf+1FpGWYUK045R3djiL+frVTO3x0xPzoFwGHMpYYDC/1ztbb9y\nDl/5ZBQ4COCSoy7XtFH1Owd0mx7z1FcM4223+50syl3EBRlM2UZbkG8HsVM+\nJtku\r\n=o+pN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"53c90e668f64118e0018e9ad9e0bd4ba63ae91b9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.602ed262"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.602ed262_1535064161749_0.5875003823516942","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2e96422e":{"name":"primer-popover","version":"0.2.0-alpha.2e96422e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2e96422e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"84d9545b8fbc5875d7b86ac078570d7709d2ba28","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2e96422e.tgz","fileCount":10,"integrity":"sha512-M4Bd+k0mP0xs+XBl2yjujKP3eMiwtf+HYvH6ThvqAJ9HAs7MMYnbEsG53NvVtWzmMF1V5r+L0pDmuakb9Y1Tcg==","signatures":[{"sig":"MEQCIGw64eB+/z3/AFCxV+dKpxsY5Mrp+g0KcuWHZiYbUpK2AiArXN9rvYok5qV0c+l6PATd6tVWAoGmGJX7xv7I05j+tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbf0NSCRA9TVsSAnZWagAArg0P+QHZ6XkjQkg8shJIrP2B\nxqmpnEX9NFtkD2eXCuT9kVId7j75t4vcyuuElM4wjMfaZitQB5OA3ggdDeMU\nbOF9Ru6jDm/qndYwQY3MfShS9FCNUSZDFs2Wp4ATLLnhGvWhbd+UIiV0KVoa\nxwvmUoufWu0rlPQt/3pRPDOqAOHEJU6hX0eJNQI5UgJLCD2in3WfiI8pQ6Hb\nYzmPcnCWK3+A6QCu/Og03HaDrtHdyRLwjkyJ9igFjB5o8pSjgVTtNZLoO8kD\nRvGvy3AaopgxICHCY0661F4Ygp8l1PcV8k7c1qg13OFuMDPFVcyfhlbVMAUj\n5XpNYWuuDr+BZ025C1n96Ffr74gC7p6lMeSQpsWW5I8TUpz7/2JDaPa5hkc/\nSYanS7tCZBzxNL6gAzU3eyRsCpriACbj30OjClV4c43MMkqoSsDAinw+kiU1\n2xjcFJ6RCz/znL/+dGKPvW6feb9B1SwiFP76DY4mLnh1vlerrLjOEcAa7uPr\nhlEL3MNIyPG7k1bHm1VtT13G3PUbjnfsccZ1BP09Sb9BTTtIutJSQ4iY4+f1\nFlWiZ9pKPsJutU6JLMasPFean0HYn6HaBE3lHWTklJ/fc7LbU4An06On3DM0\nl2yE7jG+op1RJ6kyjzaTPaoHi9cCpOMn1OXE+W9pg/gt6JTMdVQNlaK+LANb\n3XQr\r\n=MRNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"84d9545b8fbc5875d7b86ac078570d7709d2ba28","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.2e96422e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2e96422e_1535066962262_0.2589926768831885","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b669eefb":{"name":"primer-popover","version":"0.2.0-alpha.b669eefb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b669eefb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"38d52394fc0820062b6a0f57f95c0cb5291eb577","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b669eefb.tgz","fileCount":9,"integrity":"sha512-4xUukjL4IOS42DSSKxVjdPAFZ+NUkwh1Luihirw2NsmTjar5c3aDb1QLWreiDAQmRUAMA0cA9YMzECxV+rzn9g==","signatures":[{"sig":"MEUCIEwQenD6yQk900YSoFZduXHZ6oPCI0xL21jx6f82GHT7AiEA/FmtNbE9s0qOJNrcQB6a95mLwMoyNOVacjiiGQZu5Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxPl5CRA9TVsSAnZWagAAmwoQAIVXqQEByfTGgCa+Nnlu\nxOL3Y8g/epHnG+1rXz074IdnmteEg8v+8s0uX1+Nrm8PehyKXfjTZCn95vEn\nDEoHZ7s3An+L28/8YJh+Ms0gz/L3X6qW+/A+TFBVzdyECTV/2Yxrpk7CaGLz\n7jyFdZam6oorYPgxlsmd1BMtvBvykYSX5NWgjh60iOf8uEipQJwrAEu8j3Hn\nHb1mXCvSXZNDcz0vCJDQqH5K/v7kTbwBggmiw6/05MdDySYxOpXs2cAvrLi2\nEm3pi3MVtNBm6+kdjVkRt2fjSg1b4VpYmuBgzAnEYbxK/5O6+xH80JUnpwSQ\nEvrtuXlkbxDUz50O9rHxgTw59gorKUt1kx4AV01psxzWNwzJGlYfaxOmvDii\nWFLPeHV23zQdSE3sQghGgRFHO3kNx3HyGfn92yM4oNi4uqd9maoX5Njhyq/u\nm112fgo00245iSbG3ffUUeTI3ipFt6RRDtMzSzRK5rJuUvWk6oNM/vhmB3hR\nmNOzhxVvzQMSmnXeFjCEnfGAh6IFWkeL2SZ7Ril9zf+WJ0mmI9Rf0jwhmN3O\niqWBeSR3YQ0jxi1KELeNxCKaFw5ihi80AC0UaTUarYhyd9lpD069oAC20h3R\nC/r5HR6kV1iR8KauV9mL57QSsTMvwEtdJ6s8yvsQDxrBakrcl04KLkN0GvZW\nw0W5\r\n=FLHL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b669eefb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b669eefb_1539635576892_0.7222863358320557","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d9d741bc":{"name":"primer-popover","version":"0.2.0-alpha.d9d741bc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d9d741bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f69de1ee9084fbce772c18c4f481a4d6eb107ff8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d9d741bc.tgz","fileCount":10,"integrity":"sha512-QyxrY9krMXO+rQTnG2WOYvf5N0i3D8ddHvYe3k4j9Z/1Fuc96H+T1emQzrWodEe+ewbU7IYki53QawCuf0dLrw==","signatures":[{"sig":"MEQCIAEOws56hNjXWW2WOrXKTaGvaD8Z7xdfuyV0Bv/OV5jPAiB6y4Hlx+tpWJfsc2rKhSxsk7hD6HT5EWeflO4coqYBKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxQZeCRA9TVsSAnZWagAAqNMP/0+RJmNQmWSxkoDdaaZM\nyU5k7UDmnWyoAyYeWnq1fYO/Xwlvl46GxD8D0QfxgCBM/wlCqy2zxKYN+CoD\noT1aGo6STfI/JjL3ik28wu/WR5qGHGHLlAtXIKDLa2gtRDHYpFULdhvbcxZY\nsYcjo88UUARfmkdhSiLNZDL6aZX9gPHSRbEFYkJfryYKrXuMzAogKx/Tx6HA\nGUOYyyezAtJ1PfPpGr3bcWfhigPy0MjHL2TXK7r6NNpB9tMmJFgoeqs3KXjv\nbUlf7iiA2T4XKjD2LroU4etTiaYV9MCQr+r+FGJRSfidnfMfMgjeYbENPaT+\n864vcBeTB4cLgayMZCHr0v+ZCRcBuUzCeoHtksgBiv97Dv94LK3jF7mnCC+P\nxkqoKv5B6L+QWC70LAQluWTkh4/wfjqGIPXBKgzpFLd36BCGdSvQsIyb8Z/X\nX0SqX0HQoFcD2jjAGapMTYRttqbdJds8RfklKgNgojdSCf/bosgmyw8fi10Y\nMHSM83qfDaZbTKkvPuy2357xt7gWp+k2Afh3MpWq4hLs1Z3xwogFuNe0n9Rc\nn7TlUxKrjQWLRSqC+u/itl6wYqZK1XxWbLuZHr62AF5pO/foywQn1HSaPaBG\nuT+HOBiho11W9QcGoHMteZcT8GOcdEZIsMLIXvzS5F4Swg3fIisfP8uyFcbD\nYA0Z\r\n=KOe4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"f69de1ee9084fbce772c18c4f481a4d6eb107ff8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.d9d741bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d9d741bc_1539638877258_0.1294955290110298","host":"s3://npm-registry-packages"}},"0.2.0-alpha.671ec2a2":{"name":"primer-popover","version":"0.2.0-alpha.671ec2a2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.671ec2a2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b9210f5bc6c53742b40d6bdcdd70cf1fdf820b0e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.671ec2a2.tgz","fileCount":10,"integrity":"sha512-9vTJ7C1l9GBMtQ3YNgVUPnFvEIX0j4d5LUhSJio41r60tncj2f9WvJeExjaNUlNyTiHezL+BLmK46Ug1J0kjoA==","signatures":[{"sig":"MEQCIDreg4/0TjFE23yhE5NaW4E/WKku68f/1JXLTeCormsjAiABGAhkDZRPnzZ8uLkx690enmeDdceLbKgKFYvigtcq4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxQaYCRA9TVsSAnZWagAAVGsP/3b+xajlIrLiHkuA4CYN\nYtJL19lVX7ZrIbIZ9iRRKUW4xNN2y2pZfBBxVXm55n7wc3eY+xnvdxVxTXEy\no3vSbUnQLUVyATuNMSg/6yQUefMvTWn7fUtb2HXAni2/PxoMvVrzvYKgxI+u\nulC4KOJ4Vl84i7G5x7rvQ/kSo+5pZTVPnJTu87AxYIEXsWYKyFQwgcSx9Pdq\nV1468vmC2I5i4Nv2sNBdVgV9vQLReZBGUT06A8uvDJN4xP8QwQjGIn8fbKIX\nhNnC8BPcwkikxMCK16ghmminecfnk6G6e9N3Ea6qyD1M5rpku/YmpoRgX9CK\ng+WtG6C3qnQaGz+PVB5XZrTe4nDtSVvAT9KfKD6v884SsvkuXl1bIRHGHpPO\nKbDaotlBjCmvKgMv8i3JTSoIFHQWWRLLqIAo0zSa7k3tgMVhho7AqjZk5f2K\n7b4Ck8kmgNg7gPIQ6/gblhY7vgppIm058YPj6mNQuBkUGjry2MaNhCO02gXi\nCs7G6ITrK+QBO7iAPFjGzT98GogYTFMsdxYdhWdECWmlt09pfe23O5Hqrl4m\naHmLZbLo/Lr28tpftdImkvS0T/u4K8EyGTLx5Vp18MofYzoZavnSZagFD2+U\nHlj4AP/ymrrP7SpiiElhDzaSTVsm7znzoyGInFRF00a+iGOmDpuWMA5b7oK/\nMNwc\r\n=9Wul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b9210f5bc6c53742b40d6bdcdd70cf1fdf820b0e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.671ec2a2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.671ec2a2_1539638935629_0.7423722831459341","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a0bd1a08":{"name":"primer-popover","version":"0.2.0-alpha.a0bd1a08","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a0bd1a08","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"17c6cb2f2edd3e74529246110c0602259b10ec01","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a0bd1a08.tgz","fileCount":10,"integrity":"sha512-nSjXYrzxMYD/1yAZB9gNjEWGmaxIq5nlkOtWH9Sxy5n0J41f85L4P/0rcPQGKCiTpoJTdxsxNK7mARyESc3BzQ==","signatures":[{"sig":"MEUCID86KNw+SoTlfzZqy4NvYXPpYQL9TLbchzDN60ghvrTAAiEA7K+VicU5xyDe4J+uKa/HVHA+BoRjp15Mo0nJsVtb5+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxSFBCRA9TVsSAnZWagAAbooP/2Mh2WRfHnH01bCnym3I\nrsgCVtOJosEmVcD8+SB3mfzl7DqYyeIMRqEF/ii1+PI7aafr3MH+rnqBlmom\nDjs6tb9PnRhwXd89lfOHvcm15AoaZX0DLgLnw5IWnTLHR/5TWVmkAQuhkKli\nAqJBMGC7C13jv6cmByLrZJ4goSxKP8u3Gno6GmXZkp74WxQrbit3nvLBPbKT\n5XICy6EV6/DFwoGJ2IHKCr/7LWT9800JussXCmMLsfJLCJ8diQqC2uE+Jnzs\n+UDqbZ4mYYBOPKxJ/SUeUQRiZxQ/rLKU57u3jCZTurW01BC27j23YRF0Y6NT\nGP1csuMpGu1lAOfWZn2BRDz6U15yWx7NvC7G/CDYQI3Y0kSvu7OO2rBnXL47\nynss6QgAVx6+/UOM6dywvSsf1M85mvW/l1AnHo9yU+L/s1qhduUR23su5j0o\nml6PFCrXBYcxMfDyylT7URiB/mNegPFWO0zWgjnD5yBGVEopXXhYLwYB1Z2O\nmb+6tBvrHhU7Wgs1/V0u8p5pC2e7f7WbLGjGjrg+FDzV0GYN5ko4refNwi4e\nFDXwIikH8N1UzBjL6ovZV1qhemnTLPtsUf2aUh8xqALivtirjogNpOCGop1/\nMG1IQG9U6xiWjSRzG5Kuso9xct2L2YPoXxCP9cpMVlKJOoaIlGaVPAF/6kwv\n9OoQ\r\n=SZb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"17c6cb2f2edd3e74529246110c0602259b10ec01","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.a0bd1a08"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a0bd1a08_1539645760351_0.6299239438334909","host":"s3://npm-registry-packages"}},"0.2.0-alpha.472eb506":{"name":"primer-popover","version":"0.2.0-alpha.472eb506","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.472eb506","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c7af99404aa025af0164e03ecac67e78fac87a3f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.472eb506.tgz","fileCount":10,"integrity":"sha512-tpUxKSvr8ruaKcwTTGb77HP+09P1ziL6IxMmAoxwSLxBQHppWJcgPIyBIZWvCFnwSiWHQAyDJ6joJpV1IR3+MQ==","signatures":[{"sig":"MEYCIQDYvOZIh+7qVr+w0wHaHlCyDEXs3yVIC94hAM71b0mc9QIhAM3rj8nUrPDNMaIOXcdsS20EtHCQoz/8OnEkSSQRArPN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxSdeCRA9TVsSAnZWagAAWF0P/Ar+dQrCkt2BR18iWZAf\nBCD9vKJFymBMsubYQFbTN7MuKt+KMe9Myb3uYHqztKwkvXbLBePiRST8ifbz\nOec7/kZNo8dhghtqtpRce44o0K+CXmgqtBfGPcvQo1mq5u3ANqCig4e9mTaJ\n2xSSrxm25MpJk4XaFRsNGehHbt0yYa4b2Dv64Zp3SJCDrekqbcHpiAneh8is\noUfJpSewpvVbwtu3PjxQELtEODR5NvyIfnLROCBlgONoXgs57mU5hyGLVu9M\n56QGTlfELCGQRlHfFOaeani82MvpsEOgHpFIQz3QFi7iRPcdyDIFgqygck0g\ncnVJt0OesFymdHYwA0ydAPu1oGYoTR2/S5InWFxdkNDr1/qmFx6l1C1G3CZC\nDGy6+FrdH8urg2ADNmx4mBAuPH73ceJuv9hNEC4D05Xq569FtqUkHv62LI61\nXo1loTcKc9ZUvzYgOLpw+rEWxEyZhAgdBWbnd/zGI9Sma69kPF7L4jcTDL31\n51ysMEUH3Hi1X6qf4nWaGCmAzakIYi+y/kjvo3z3Ye8jyVgzfkIUq9/+dN3b\nMNVJPmAnLoCtGHu6ZHZ4/aExSMEju3Smvyr2GoyvLx7r5NZln7z+K70TyLli\nYlikg6XssHH4mb0jLCn/XddFzPM3NwEkIOKgulSgG3O0KEG9TCbJ3ET7h+Eq\nqPvw\r\n=VI31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c7af99404aa025af0164e03ecac67e78fac87a3f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.472eb506"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.472eb506_1539647325527_0.9508408992929256","host":"s3://npm-registry-packages"}},"0.1.4-rc.0":{"name":"primer-popover","version":"0.1.4-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f890a848bf2b1ba312d010455c36b7d404b0dedd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.0.tgz","fileCount":9,"integrity":"sha512-mFd1D9MLGHMWYVpQGo5L4/1wPo78lj/TdqAQxINRkRlwlUWh+2iF4JP/JIwCJJK1BDXLzz+V2NAq0pkBTHWvsQ==","signatures":[{"sig":"MEUCIFzCXIp81Xs+KeHg2uG/EACixNUpQOQNk8U9NDJ0KoaoAiEA+crGXjhqvufv5WE2hjzt4XQvT766W0yI06UJJgeTTgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxYLTCRA9TVsSAnZWagAAP6QP/1znIVv12SZhl2FMqtD9\nCmq47bGceBPs9T+AN/INJtJo5l6JX7sUAytN2cAge/IGDw2XL/feyMSB9caQ\nXUbmZ4UdHoDidXt3PeiwLIElSFT8ZYR0bTPptucXC9f54JuMma4POLYG/ish\njNnC9wJthseAn1qeiWJjPBSFBJU2M5mV4Mb4mHZZ9JWJNLFkYvtOmA2UfAZe\nDstTStIVly6Kn44x1j4uaUoZvshDhdmrGI3Vdw+OrB8NKDRNakEE2V0gQpis\n1VfmfRd3joOC0bev096USjpM78AQauXSuuFaWE1eg3LiNBsEcoc8QOKoKBzg\n4XWMFzLFIyFJbQU4EG18yEip3r0Nt+Aqh/fb3b/pYj5crCpc2qKrGSeFu6DM\n0/c5rVhDQbJ8PqIRry8bphkLPKb13Ytmw5Dmhzm/2UujM2MQ4mLeVHMFt+9M\n1NlyaAaJjlBtqIE9V6x/elD2RjZMJWYMfy0tAjC9slu4Pqm6nDqLsdmFlNxp\nG52VyPWQQnbAXKd+PIjJXbm7RB+tgHFgVLCXtQPdHV7icEwcI4OSmBJBT0jl\nYWowmcv5kpaG24NqbY8d/waof/rE3/Szg7svSdqzMqOjbhj5xeJbZ9UNIIti\nXL48qdUGSyrHKv1G2TLQeKTN7v6pPSwfEDju8pCFskWhRH35rR6UJcYa6s+v\ntYWv\r\n=u4vu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.0_1539670738613_0.3343492997183115","host":"s3://npm-registry-packages"}},"0.2.0-alpha.fdcbf941":{"name":"primer-popover","version":"0.2.0-alpha.fdcbf941","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.fdcbf941","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"055c3dfe320a92177f9043e6fe1ac890a3f503a0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.fdcbf941.tgz","fileCount":9,"integrity":"sha512-rUHYm8PohHZZtVR2EyA2026QO/hwZb/IH8f4dkbNd0fFqaWkelZZX9nJ1ykGDJwhQ8hbJf2M7O0bc/aS6JjuSg==","signatures":[{"sig":"MEUCIQCdhF8fKohkhzZkMXXXu4C269fZHtfzsJm0leccsBMNSQIgE+myHHXAUC58EXirnABj5CXBaDitNWtw8ISdAIPJnXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxk+VCRA9TVsSAnZWagAA8V0P+wcezd52xPe+FzN1KskQ\n+c8nynXTLSNeAB1Tc5FirTFjItjo6AKpkuoUSCvZ5b2MRMVd7dSjtiOs3nWV\nh2J67aXXXITMSzMgckZmwjq/oh55Oo1FSZ2iEUViOETJ5wMFqoSr/LDdlOsP\nDAAfa+CyvZ3XzSQfeN/fvFC6I3ZrEOX3OiK+sATKT9Ir7pUK78CnoQBcn1d7\nSR7aU/k+HEscHSbton6ApOL6WT0kHBpe5xMqc5uADw89dqaLBLwmmsib3I5m\nKWUbsaxKAv/a5XO3V8evIUlnDxtvAWC5++TmT5dysj6vDqJX15peDBxvl/Sm\nyUWLODgU81zNVHfVsMndltin4H+eFeHgQUaxCHjslKQlV2uS9Wjx0tpnC76A\nS6HkNHkBLzZUK4+mSnhkOwpMHLMaqQ9oVaNsBEeVTievaD6500rkZfFFiDPe\nVtsrNg/49KcAvT+C5n+ngfkekAVOeYhkgkVwymPQjA/i5uZTRl+X+caqS/W1\nM+2XEVaN4jzcp9uHzlFl1HH2XmA2dRJuLAGu5YArAg8SpoteaSEggPfN53HZ\npyfmnSg4YSkIYWYIO+uhgYFkcEOdcwDgjlSK2pz0O+kPp2HeGM9lrOOputRy\ny+HE1vHO1PcgdOBvX3VUmodslqHNnOzW08+hnRo4lNPhKr4Dlf1IJvvq9DZZ\nt5ZE\r\n=Ziig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.fdcbf941"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.fdcbf941_1539723156864_0.28503487108634307","host":"s3://npm-registry-packages"}},"0.1.4-rc.1":{"name":"primer-popover","version":"0.1.4-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b4951c8e6815e459217aa579a094e18e7cdb7e2a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.1.tgz","fileCount":9,"integrity":"sha512-DxwLA1YIoTEsI1TZCTPQWVHUDOnzDMzutTOO62oZbefwVTn+1L7bgBEdJayMxcCrNDzTpIFtgus0Bet7OPvGcQ==","signatures":[{"sig":"MEUCIQDBMvDajR9UrWiNyUnqy82E3OIo6u5HXYBLK0uZNN6GZQIgPgm5I6ah2zZJjSe8Y+fPzkQIoEIIWSEJxqn147a2GmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx23jCRA9TVsSAnZWagAAo3IP/R7rnrxMYR4LGG2ZVeua\nG55hizpp8RzihxKATrl3KiTAow4DwBBKDKzXP0L7Fe7Pq7eyiUnC3lXb6LDd\nZ6my/kAWbwXlDVB6tJkcL5LQO0RHicVtYq1DIiCJ2Aa9/PQ8cCVYl/AVM+7v\ngswVgry0zjb+3X8YxB5HD+ydLQEZOK/8EaFkdn9gkALlXguj3AggK7317zjl\nDg+EoYBdoL8D+gXKQD5memXaIe/72gzk6kwBoxciO/Ab5TGP8VaMB3IfgGoS\nAg/5JsaGzNItsb45r2StlfXHRnNTg4BtoW07eyoy1/Z1JpfsMMuvb7U2WvVN\ntun3BNYSTH5J/7eL546531LDBNTBDjf4ZBQkYumfHMPBp958Qm8OH7uG3NlF\nZUSo+uIewjtNqvBOnPgb3Bq3p9aT1a2RikB7Y+IWcDdhT7Kgdclv353b2XB6\n9bFf/wKdM2zThPmznAhw3pT9BhG6uWDC0+NO1k5af5YjySMF43dBSSostYdX\nqNJXcV6WtOX0m6eXVzPObmoht/vmvrxvcH/rzIb42uJAk7FDw4pwXtVPoOhQ\n9amdw2FOUR6KXewTfaejh5lNAnOrvhPm9ZKxDZlipZoogHRRObazecqOAQYu\n0/ST2hovqkmSUdVAcVu6Ylopy1Zio2Ziuoi8a5zG6fG6PpQ/lBCz4Zp5zXMg\n5Lqo\r\n=CHFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.1_1539796449525_0.496666983567041","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ba09cbcc":{"name":"primer-popover","version":"0.2.0-alpha.ba09cbcc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ba09cbcc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"178be11dd0d68f7307c09f39d0bac5bdc38ab450","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ba09cbcc.tgz","fileCount":9,"integrity":"sha512-XO+RTyDQ3Php2eUX6WYPOA7pTWMnXXzwURcftx+viKiBI2JYuA8JISpZnsqWhy/+oZoMny5LpuJQsuHSBr6n7Q==","signatures":[{"sig":"MEUCIQD08e9Whq99OpPw8L4XWNJKbiAoND3R7Q4y0z1TQPWsYAIgI07+5S5iUXHtNg4EnwK29afBlQDAm3TQq99VgsTEuxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx3FECRA9TVsSAnZWagAAJB4P/2os6TZYE6YBky1lQ4w6\nTrWn03HgBjC82pN2PhmjQm1MyWJaXPyC1Y2p0ehx9ruduHWGDr4uBGT46BqC\nvCfM3X0e4GsahrG8FjeUUqgAdKXirxKeLAvT0epPb/YFSZUKLpXolnJFAzRJ\nuCzLGncH5EUEo+uGfd0zJ0i0I/ltnI1Y1k23hRcvaWkXNQ9ARg9uJXxTrV6D\n8bF3agrBHy22q5i50Db5oH4aw48N/e8DsBsy4p9Uscr/Cxvlb0ZhgAtTDlsH\nxrdkmdnYnizXMA885cbzKa4HPRepF1UxCqtj3hMLR/xZdT/fTrFLZUrntSvC\nN+QqM7igIt+SKChfA8nsEwjc9UUyy35rx5MNHXMYYiFQWy0DEfJkrqnJRuiQ\n/8CHygvJaKhsv3PAtimRW5sk4eMycaO4V6Hzc23ZxLC1JLiOT1TZn+zbeFEs\nwzkacBGYPHs0PQKkdYy2Jp/N5wk1RZqPJOK/KiNv5Ci3gE2yQx6CxNW04FtR\n92ix+2+0L23J/eiWzlXHOuQBFu5A65X5uUBTaLx3DMhDdGoR8Ik+HxeMqdeW\n1/De4j6mCrRk1GyDg83Drzmc9ps7Kc8XFcy3JOVnOGCER65z2m2urPrmAJcP\ny9tzsdDluxKdbBJVVt6F9LhnDRiwwOx938XdL6hXMRWFdIIV95hlwRJAi7SR\nlSuo\r\n=4BZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ba09cbcc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ba09cbcc_1539797315895_0.22326574941262667","host":"s3://npm-registry-packages"}},"0.1.4-rc.2":{"name":"primer-popover","version":"0.1.4-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8829a11c90b9cd5ce3d3d8dc76c4123a51790078","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.2.tgz","fileCount":9,"integrity":"sha512-kg9BaLf1UedcbYwwuG0Q+KHC5pDmSBPjFffZfprMFQfn5IVKbHL4wzBFpMGI3U0CLpYAZ8GE38vdMV6DZVaN8g==","signatures":[{"sig":"MEYCIQC3j0MaSwZ46MLJPM0iViXLqaa/K1Qb3kF6jVE/+fYe1AIhAMOrT8GuJB7nuZHRK55zgnxJEcgH6BRsa0YfHMuZPS34","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx4s3CRA9TVsSAnZWagAAluYP/3ZSdHzA2qLhlYO2Z/g3\n5jM0LsnfxUU6vyj5E16F7CrTUhwIaYJEpVbBTQYl+wJI1GutSkOkMC6MCY/u\nAxnSZc3MPOnVnNo3UATnCyHMFdXyOsQ2xeTPQvDtolffPLL+VhAr7pFt21sZ\nmqoED0TDSPxOJhjPTClfgoIolS26urVcXleimZXUi3JQtib1TidwRYkDBD4U\n5HH+BD2wTJbPJju2wJcnDZ06TqJFwNWzrgz8plyMFGt+iOqIw0QPBCezjOKd\ntiRC/PE/70Vp95EcUuR++NzvWVb0OpayZKPiI5CQ1k0DQbNRk4iuF5giEoUC\nZFgoUsyovqyBnvudQ5rA7nVTeW9g9rzNOMwK+PdW81npp8zgMBNVx8hKBO0H\nqNKEvf7Ei3ucnssRpuK/dZh6Mfg61zVj8458DcmN0w0CtPSa2q0sp+ZWhxH9\n/0XdwrmYjeMP0CbcwS54BfmF7+X/y3VMe3WniwVe4BjDD15G85ASQfdCH/fV\nC07g/6VUZSIBLt/BHEm7z6L+GWPLcUN5N7fWLbZXkEudBxhMGZiCZsSFWj2s\ngugHA6hGi0jM6rh7IbKtbhiiqulOiuo9f0yp9WyTuLir47SNpxkbxnI49oMZ\n3Wo5ViF2PGaKxsJHcLgjANU1I6L8JdhJ4y0ok8C+rYnRq5y1Rmvpfc0TD/Fa\nnWYK\r\n=8ykL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.2_1539803948199_0.1915820547888314","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a8b75a13":{"name":"primer-popover","version":"0.2.0-alpha.a8b75a13","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a8b75a13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a59d9879d4f54b9ef8ecb63949e01cfb7f978c7e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a8b75a13.tgz","fileCount":10,"integrity":"sha512-mY+rrG1TTiozEUA9zC9/W90kFF7AENANzKRfYtKtAsJMgCjfKE0UYLNuLA21LTAHLrg1OLA5+ZlaBkaMGa6gEw==","signatures":[{"sig":"MEUCIBT30XIfKk3SFq9ENgJLKwn2CLr4/Ozgzsyhh59O8llBAiEAprkYYrsmOI/xcWye9b1cKDOGJr7ouDJta5vqFRlN2lc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx44CCRA9TVsSAnZWagAAREUP/3ENJ4+JK3Uxn9ZtHoJC\nAWZHqbCflO0tzFikRqGYsc2euly51waoWAI40Vd5Uy325rwB/5q6KtU0vKRq\nCJ0eTilsSFH+XuKV4UnI8KLGVZSvpTWdeYwajLKP2RVIwiCC62QL0obBuCLb\ncLVMraM5X6ui+fPlTcJWdqVUEwQPPNaxpJnRHGuSN6xEFlXHbhDytOlal/69\nF9yeV+BCHUPegq0MyaTRncDKYDJIj6djssryO7QigES5bBwJdpVm0XJ29q4c\npsFsHJt+1N50z0Cn7T7dysFrT++XxAAkp6YhJl9j0moC5qLgsFaD+HCBGYAr\nNbwRrDnHcAFh1SJtmXsVTPWzx1anPYZwa+nKqYHPnQ8d8o6tEmtc9bQtnycs\nMLW3mNiphnbAZGMio7eEVh6NO7bD41fme8ZgLgi7JOHNzYS4tKtNllEF8xOq\nDSvU+jQX+3ef0ou82K8cbZ/5vj7/81gLbonT3VMUAVizFuhMXPOJ9hUaSSb9\neQMuypJdOSJRNY565PmbFlo2s8+cDiOengqcf6kMdOYdZooC2X6hfEMeZTM/\nZL2KQdR3NJ5SNjPmDTQUXfZQNQpJpKArrWdEZbiGuKMiN2uIqZsy/nZT1BFm\nEiRMBDyMBwKWCE6kiYdyNhoWxr8pxwf6vYF9U0PRaw25vchs63dIbA4Eb924\nP17x\r\n=wXCr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a59d9879d4f54b9ef8ecb63949e01cfb7f978c7e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.a8b75a13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a8b75a13_1539804674341_0.1011077879949307","host":"s3://npm-registry-packages"}},"0.2.0-alpha.93e11282":{"name":"primer-popover","version":"0.2.0-alpha.93e11282","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.93e11282","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cce31a33e730f24fcc7514a3974023842ef567d2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.93e11282.tgz","fileCount":10,"integrity":"sha512-rakU8cXaTG44OW4R7Vc5baZHzQYpC6PcRpgZaz3jTGk4EqE2UC997+i2YostUwkhOKkdLo08KMDZwn5B96IW6w==","signatures":[{"sig":"MEUCIQCu8tVmAE7rc4Qjsb8fEwA7QpokizLmitW4nmJENvpJRQIgQyKCk/Q5aaAEZdZ4IoNwqidJaN7/f9N5bBo6BEdEB7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx448CRA9TVsSAnZWagAAwuUP/2FMN439Jnwty+7aeeNM\nPMOZl5dH/dJDLEucSeQZu5HGJNpPa8uUX5/a30GKvGbf8XFqcqKDOQz3KvSd\nns2GSe9CI3maOJNSjgZZQlUd8CQgLBTq07mT54oelRZvrzlCTutivRUXQLk9\nMu6oW1/wt/5lu9uy5/kGKirTNHBQwQdYqgpWpXn4WK0EcjyxZFjl21qOU4Nt\n3ecORPInahJ1hMVBga0Iv/zk65Terp/nqrgFB1itDsE5uijbpCbW2BM6W7nz\nLnSl8Kk2M6bSosBzbWJmfnnXD1FCZXjWDgZa+NBwUTcnKthlw8aoI0balbrj\nv0Kl9uDU+f9RPDnVtU0qKCduTMYvxIEkHpZWJZeelST1JKvMBnCz8t/68un1\n5gIa0PNIXxo5CSilk9CeWeDK1JMvU+rufDwKcis5jJ0Ap3OZBo7cAV05pyOt\nC8wo2oME2bZLYFBxoyopZXuiTg0CZjGaemIszUr8eu/sIGHUT44W1UHA9r1F\nRhXWVZy9g0kKc67FFgLLGOZj+fM4sBQ/aq68dbhgXmq2xt2EAs5isi7F4/EG\nbFPH/AWDOO7n5pNkbIiLNRx15GOEa7U0o1sfye4jYDPlcrnP6TZ4sseRHGel\n/kkay7geoTBvzvbOgOetqPZGvBiuD9T/X6Xj/wdRE6umkVtA1W7bjJjR3FR2\nudOP\r\n=1wCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"cce31a33e730f24fcc7514a3974023842ef567d2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.93e11282"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.93e11282_1539804731653_0.8920202051776212","host":"s3://npm-registry-packages"}},"0.2.0-alpha.01812ee2":{"name":"primer-popover","version":"0.2.0-alpha.01812ee2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.01812ee2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dd038d5dd981274c83e9b04ba4d1d7533b4f2322","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.01812ee2.tgz","fileCount":10,"integrity":"sha512-bcDq1iYWjsq0VvRDuKml9+aYQpM4Yt8RIP/IRNAFDhONHkbLByDk7i1qn9KC8J9vlCi5W/L9D0ApDh/Zik/Rxw==","signatures":[{"sig":"MEQCIE15OPkm7VBdAliOKxV0iZzKJukGbzdVK4sgHYOtlqPNAiAKi69o+H5LVoLwGRcSWdQChoF0uOnMwfeW1DDdssy8rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx4+OCRA9TVsSAnZWagAAdxwQAKPUcY7C87dENvGbi/OJ\nLqeE+/8+6qUwL55pBMkHvcmHnMgzEboFK+v5sE9OaLtn48oAdF7jqvF/WOWV\nS9uyatWofvMMNfrl9K6VoT/fkdiA+fpgp9IniIP95d9UFmiqV6J8EP0OWS5M\nJuZOMbYXhErBVd8mQR0P5xQPArXPrVXd0yErnkdq9ycSZXvifVj96yku1Vks\n+zG0MrRNFGvYDZWKQbXivh4qE5kDnWmV6YQWyHkUSo69h1tZoVzil+yqZhd3\nHeL6OTqmuNZNjW5pzn9eAtP5wlGvaTbkb7BHIhafuyuf9ByOgYn8K/c0dSp/\nqbNjeUtcuHoh3U4HnbRVxhRm4F+wM2MjI6Koh5HahIDyhtP6RGcRGYchrqi7\n71rM/Ysp8OuU/tp7EV7XykvrSC6URnn40LSlZX1f8bSAnNKbYTnjjm9Hf9B8\n0+GkqCsrezkjmusv+xZA1xaz6TkLLWgklrk+zB5IIK+tQXMG199yxyLHSzbv\nTVsW0WVQEgTfjkVXXCR8wnJyiGVBtU+4zJLLFxfeUrBZJeEQw/I71YmohfWU\nBIzmFV7pkzD55clEvFssrvJHaHPczcvxpWBU1ElUkv2IoJzae313mvBIechS\nHF0SKmxfdTTXoHo1QVysd7m/ZSUTjEWTCXpnDswdXO5ZfeihDHydxibSUB9N\nFrMR\r\n=SgvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"dd038d5dd981274c83e9b04ba4d1d7533b4f2322","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.01812ee2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.01812ee2_1539805069374_0.8107974822415729","host":"s3://npm-registry-packages"}},"0.2.0-alpha.76e9bd5d":{"name":"primer-popover","version":"0.2.0-alpha.76e9bd5d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.76e9bd5d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"81ea86af45c8cd7b0ae35136809469f903316e70","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.76e9bd5d.tgz","fileCount":10,"integrity":"sha512-G1uzEFrFvTRajMAk5CY2E13kq0ji9PFhTp6/66sz6vsTAqaiIS36uinTjYTcg9w+nOOrcOkmlSl6ovn/QK14/A==","signatures":[{"sig":"MEYCIQCfYu+3J6MjVwnc3idQWlYV+Pfx2YvP+wUW5rmpgKN9hgIhANOmY8o0bbbnvRvgP9EWS6LvVZ2K6L685PiNTFP1m1RU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx5XACRA9TVsSAnZWagAAjFkP/A2cfr01rsln5OeiqCO3\n+h/9wO56DBNa2hHN/s2Csmj75q/RQo0p/6MbAOBUcJtypdbv/F6iV/ppPFpX\nc2vqBudu6SPBJQpXS0xlTv/x16jRJTJa+hLRtdvH/0YhRWkgAFG+0NTidOZ3\nbx6bsDO70VWG4NfjlxsibtimPk6bw+yZTiaxJ8ZBPV5x/Ccsd5FaekljrQlZ\nzwXfypnqatWqqv07ei1dKMg5iX9VZHpT5+gR5S7p3uzxg0abJi19FL+wOqSq\nksWofD7XnsNwMfv4NFoUFQ8/gXahlkSpInImbiwlFt4OkZocJAsdSdo7Nhlw\n4JPdVKbaEs//vqjdklv+FQPp2WgHE55fJnWg1DJ88VPnukgx+6H6o7v7bE/L\nU1bSOMiwnvoVPdlHbD5tTNp6k0gEtwcNAn7vEYjb+XrHtxHICu7Yk9QQEY9d\nBO2WrLX6Jrt6cHPU43PNernY4o7F1cwabbUs+gWUkj93ws9kmacc7iBKyN7+\n6pKN+gcR4UD51N5/YPdV+XzrHBQ8cHepvI9IB8JqYfQYpKMvZFek3uF2hQqd\nUCDadjJTpMpcv3Ch+83kKOCk+hUtKh9vBy7gdx1qjsLaz8F/JND58Hbfyj0h\nbmnbhM8WuB9PIHWBB9T7KEAJCKz2CYtNuipZsuVGBwKQQA5u6+YR4SWHzu90\nHlE1\r\n=w+bS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"81ea86af45c8cd7b0ae35136809469f903316e70","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.76e9bd5d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.76e9bd5d_1539806650619_0.68707179026406","host":"s3://npm-registry-packages"}},"0.2.0-alpha.56a6d9e8":{"name":"primer-popover","version":"0.2.0-alpha.56a6d9e8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.56a6d9e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9c77602a936a416dde12027a86b8074dad1c3d62","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.56a6d9e8.tgz","fileCount":10,"integrity":"sha512-wuw+sYSRvDT0aJgw0jcOklaHeD+xrJpM/0XLm/SRkq30Lgvljq+HMxLpv341BEFpZweuFq+fv5bgz7gdGLtBiA==","signatures":[{"sig":"MEMCHy3RX/nnh3/8dSvH6jCiwcnjh5Wnj+aLJsePPBUXosoCIHQ7wU6/fMPqk0DfXhDovfTq6o/r0dkCV/bexlbX9W4M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx5ckCRA9TVsSAnZWagAAsIYP/Rl3ZB8CBw8hRGjHSWdE\n/VI5IFLTiAA7mY8ESOoHDuYY4FSndjLbrkxQykl9ylOV/8nSbY6IsN5w6h4p\na7dmnLT4fGLvuMwTwMYZVNdEZ6N4dsV/pZRUeSBP6oxtSVarJAX2UqW0boOX\ncWx/T7IDDtopXfxnUOCJkSkP/HofWKaF7BhnCpxP1qHVwV1nCDdlX4BWJeNO\nMJ0hWEQHA6htU3I2cWe3KqHSCb4u8vPr+sSvGIvLf4xouVwzrvJV+zFFZ5xw\n/iV3RR2qM8hcmiPOGyr2NjOWS1xytPX8Hqvj7lD3Tw0dj3qWhNtK7u8KO/wa\nkrzeQUqDlzZRcXzbwNqmOHWRTufZ0uZ5b/ZkIA6QpsfzweEhkpGygBSjtXNo\nBK+lsngrloYfJvMlDEJzLomN3sQYkSjWir3hGtgnA/Y0EkvGQXqhyxZJluZh\n+Sfc8SFXVPNbwTJ/DiV3mJDXi6gmpZmySICmVoei0n6qsCNWRkncHyRslhwN\nY70h9DZDSUOCdOawlO89L4Ld2HJetRV7ITbF3ER6uuGYFO2icW9M83ReNvXY\nBtB4cHtzCgpEYXSuDSBZHaNy2GixegH+dpQLXEGnWMy1SquGnmLpcW5hGN+u\nWmz/FmKZc3rQv3Dnxu6v7UJPnzw42g1VFCajk+3lyDd20HoNsjEWTTFfr2+I\nINB5\r\n=qKho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"9c77602a936a416dde12027a86b8074dad1c3d62","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.56a6d9e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.56a6d9e8_1539807011589_0.8678916304036743","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d2876be1":{"name":"primer-popover","version":"0.2.0-alpha.d2876be1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d2876be1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1ed01f0a2813e7f80b68c8b875f4873329b0fca5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d2876be1.tgz","fileCount":10,"integrity":"sha512-l9HSiZ8KgsdpbyxJQ2kenV0HLyv+MEZDVvxK+8Wnt14mlZOBcsC7hchSiUFSNqYTLnzC0kl3Ivps1Rk44EMCEw==","signatures":[{"sig":"MEQCIFmNTTFoXt4vAMf/T1q0jSXItOYYzb1VYn5xy+tKaV2tAiAqFspc8D1gmA+skSX8OuUGNOhxyWVIh0u/nvWIlmGmqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx5x1CRA9TVsSAnZWagAA264P/0U+kC13d+lK4M7nWUJK\nlp1NNscykew1yGKrov4ZffMLKNOLyGf/lKQ8EENMZmdwBQm4PtQvAEEHubGl\nnFDHY9TEPZhZ0SrpYJEahH7sRijNBcGrJHwi7RQ6BxSi7qI91mBTFWwAv12X\nSzrdkun5SLxDtcbzflg/e4C1MVLiQ8CpAL6RoLIUgMSCvg0YFxEDE4P0umi6\nopjGtxZjBMoKWMqA2kJwjPm95iT2nDSwBkLtBG39pdGlNlXpMYvpKOeNltQ3\nYBV8CNIVWYgEU/wQ9owC5yDxixR3CPvE0A/obYvqVaUD6CjPe5e3vwo5HVj+\nu86vTdfI8vUxHoCnU63OyjSsegTexNyrIZTF3c4xGUQOTiIlGllzos0jXgt+\nB63ErrmJs8th5z2fyGt6DKZl//FcMYBJ++hCAjqknYPYFAMFFBcSJobH6OR1\nVQBPgz2mibg9Y5nci3GL9HSzh2PKbPf2P7HvPyZtWMyu+lTdMHrIlsxU/kdj\nDOb3BrD5AC5TNm8OKuMAX2kR63U/NTJvY7wKU9Qf/0No5OuqiNkDcP3nlgs3\nC85eFEv6qQ5A0Loo+jnIjGla5wGruO0q8OonTb4Y+VZ4G6YgeW6w0e2+RSZv\nH41IUOFkx6kToLExn+pHDCHAuwaYLAW6Gp+ULd0Q+vj5Tu5CxV+YzTqTxp1E\nQPsB\r\n=SPfH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1ed01f0a2813e7f80b68c8b875f4873329b0fca5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.d2876be1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d2876be1_1539808373062_0.7650785580135366","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8e9cccb4":{"name":"primer-popover","version":"0.2.0-alpha.8e9cccb4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8e9cccb4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"40a9ec203e32f5e1d9407d244f420586c785f440","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8e9cccb4.tgz","fileCount":10,"integrity":"sha512-l+u6DlZMtU5E3FOCV/912/1eme2mGAUU4PCbr52RzkG4xTaqfp6DtrBgeBVbPDi0PWAdni3ol062B6O6Mn6PMw==","signatures":[{"sig":"MEYCIQDGDokRBwqp0oVAHKW/9qqfnisnauWyXGoYaPpDzQkS0QIhAIqQ0+LHtEc9tHvsSsrgdoSln0nmeUwgTX2b4F0EVr9D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx57VCRA9TVsSAnZWagAArg0P/RzprdwuAFaLLc/kuVMa\nC/hs35yDOIlVyPU00mkh3Pw6CYsQiuRkyudWXIW6OUvM+09Oipmizlwibw25\n8b8o3nYoR2iUr5ARYzgDU58F1DgfT0OKwDkNT+OHOvxeqQXVvJ/ELMpkhP9S\nHgSWrt3GKlG9txaCGy18v2IHukMVQpP2L8C5YuIKdMOY1LholpRADTH42OpI\n2iXolE/7tCdCiZSrjnYAIN9eFQoYAm5/K3Bu8rouTAdwDsqEWXMGC91jHqSN\n1qEQhXVAlVMc9Gez6ZGdc4hWRu7VtbJ1G3LVlpJlhJ0O/6JFV4fTraGHPe83\nFrqiOn3nFWDzIfiF/K7pkXPkNpx1e4Fgm/RHYhM9UrvpP3RM1/UUsz+90qZE\nLJMl0oFv5rb0y3bhDJZnnYp0XepGm2y7TdGRwDdMt/ZDO2MFqutd8j0o7yuQ\n1MzM3bngipTYgEPOLSXB4AfO+77Fdr1roHZyccHDF+4CawlboKG+SAj59DIQ\nmog6w4yrp2IbuvTv6mptxIrTfMulQwtyVhSM59pqeo4YAaILjEUiNQkTgKei\nC8PU4xAyAgFc9QE/nFNXhEhEBlXhnzxItD1GnLUKuyiiAwCxGZ2JB+KGl2qh\nqWKRF7psh97v8iA7qhKz+sOgcB/CoNGOqn9yawiHq9VxvaK7wjwxSMbfA3Bm\nOtc/\r\n=IyPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"40a9ec203e32f5e1d9407d244f420586c785f440","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.8e9cccb4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8e9cccb4_1539808980320_0.8970895343304932","host":"s3://npm-registry-packages"}},"0.2.0-alpha.9cac3410":{"name":"primer-popover","version":"0.2.0-alpha.9cac3410","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.9cac3410","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ea6883f149def1c6733febe5b9d090e245b4d6b7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.9cac3410.tgz","fileCount":10,"integrity":"sha512-jiPS9UXfM1KIKJU4CxzNk7gugTw50pWICPRA/frJyOgwZBKpvWKBQfG4mtUI4ZH9qIbcm7Q9Ai4Fk8rOVDyVPg==","signatures":[{"sig":"MEUCIQDpxgSMDXg2HGJriqz8f2KdFD2VTusstJBstIKoCdnkpAIgbKgNO6yw6Vsjpht97yNdMTsAAnduDxMecZUyXd5O67k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6H4CRA9TVsSAnZWagAA1SAP/iUKsBmuwzPRC9jeISgY\nvOwDDWxwcWyWWhotF8NagLSHg1zyEFH3VdwWBcaxzystoZ4cV4/0RT0JS99o\ngpmPs9fdu7kYWkKwnDC9MFl+XuOhGlIbN9WOOTFQ8bBo8nuM+55blaV/AXXN\nZMh8rGZg8LPO1O0UxkSI4tBgpRJjj3CWdQhBKWw8swoFgOUgb4uyt1rA+CEf\ngo1jaNeN5HFdRk0/tB2WRvW2P4J8Eg42hip5B2d4M/8Pml7LH+lpOEemf49d\n+KFB5rqg1DY9BH7lE5Teu9LX0/jwm9kIdvXJp50mYDFvQM3lv6cW8CxFO+a7\n3TYW7RLsvvgpVI2Fg03RJDa31FRDIXYJIdTunGwf8IgBAkL9TzVXEUPxx703\njPvs4uIHnEf690aA2td713BIPI6K50DeWC1o0KnHmFNaK+ECeAXqFpMxqAp3\nWP7wPPb7YWYfisvKbsXr88o8O75ziM/kXwZg2hHACURACrrJrVpqa9jLHimJ\nvNMUx+U8UR3qugQBQvQpPgZKcaTmTS2BMi9lla5JvhQqS+zRWfv3pupIbZMt\nLFq2a7U+htiAiMYkse92zNYWhaiuRLutgmQPDDQtsBjbSL7BDMOaeaWGTx9h\n5Vz4phRhyzZA+ZStxoM2H9tlMXeJdiAHaWhz06BaSalGeC45f9EQ85ljEsQn\nlc7A\r\n=E6gL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ea6883f149def1c6733febe5b9d090e245b4d6b7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.9cac3410"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.9cac3410_1539809783160_0.9178134978480643","host":"s3://npm-registry-packages"}},"0.2.0-alpha.9b72bf6f":{"name":"primer-popover","version":"0.2.0-alpha.9b72bf6f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.9b72bf6f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"29ed52440a2f197ad01f315d40bb89e12b622641","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.9b72bf6f.tgz","fileCount":9,"integrity":"sha512-2Hvq0mPHV7GK4VA13ExGS/3dXCuGLPmTQ9CeVr2AR2RbF61fpfIVJ47yplT9il+cEWRshd7HRr5Hvb7nMnmgxg==","signatures":[{"sig":"MEUCIQCXQBMVCYEbQN1xs8FhJ9zrFexI2PLcYYo55/8j4+Qp3gIgZBvqKALOIrMZTseBouAW/366vBCDQ8ZFiMMH8u41CT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6J4CRA9TVsSAnZWagAAF18QAIxOQz0S9S471SxsF1hT\nNjN/72LCCIyVOhiay9srGdGTypB13oR4UU8iv9PahaL45c7Q6aeWnTgbHnb0\nOB4prE3qxofOGXyYCtxKB4oWjcdVV3w+ECNVp9XV0MhodhcVREIuUo0FeQMC\n7miCyhS9TXXsF2Qud2kjAIic+81UkMQ0vc9PZTtQ1mV19k2g6pKUhj0Bj25S\ny5PDRmQoLP9P5M1sPVC0HYkdbf39e45uSZEASHxudxE80cZ5Sn4Y5di+02Tc\npIvJo0lAu2X8oJjlTuA2upLWf2gV9YGSOt5d1xngqYfbKQb8aTJtmd6qvL45\nq73dDZQTFF974YayhLvxM7JkNUktROekc1IH+lpISHQS8X8icHHjC1XOh5du\nJdwpYr6N6mikVOAASeqWZHSu2qqsfDRb0j/Nxv4n3grGUKMZJsFfnhODzfGU\nlGQBAq4FXVfDhDv9StdFkER5vhYqkyk/Iyml/oHGXuUr6F/z5qSHKORcgx8g\nocW3msbXcN5uiSuvsc6WiGvDqqgFCJ0kND3dkv0bkuhyhW6SUCjNAyyp2ZEt\nrcuEOMTlyQbyscOrFkUB8Sn7FUmKc29ry7phpfVyULcQ9MWGFfYENZVv0gTB\n+7Y6z2I1wrWtT6dEkfhEfRA19QFDo7nrWCBe/KvoGxyIL2FBOBNJkJrHRdIN\niAyl\r\n=LfD7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.9b72bf6f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.9b72bf6f_1539809911722_0.20518911089749814","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3c406710":{"name":"primer-popover","version":"0.2.0-alpha.3c406710","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3c406710","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"13a8d7ba4f719a24983618005f2bcbbe4aba1f0b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3c406710.tgz","fileCount":9,"integrity":"sha512-wNaH4NsXXsLa7adqREzLDydWuq/KKCPQa6CuFtZcPxxen+Z6ztdVK1VqLBsViqnDGqIZOkg6RDAvveCkOroT/g==","signatures":[{"sig":"MEYCIQCWPnoWc9kuoA1NDpaNPGyTCCBzIUN+X8k9i0ycauK+YwIhAPM9RM2d0H8v+y7kkQAjKOV9pKNAlP3MAk6SK8byENuK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6PpCRA9TVsSAnZWagAA5tcQAJbDbpLoKc/HQeW7qMP5\nNZXt0XxxQP96n03vxSYhwwhDW0fn2MuA7NGjHVBNNOq1PkpL20oBz2iEZ0w/\n0Lkfk/dD7qnwMYmbEwfEovLgHAFx5wyB2cLEKQny83R0/r72AlqJns4WecZ+\ne0GgyLCGtqu0PHbJs0V8jNvFqgOaKAmEAQ5/i+v47qwOaVcPtpF4eTSj3YWr\nULjEXq+4ZQw/9AnKUmY6E8vTm9Asf//38a6onrJv3twhmtVktGOM1kpQ6loV\nM/2OXm1RK22ZTpV6TOt64Rw+MQu8VTbhMS//tmBULb5eEeXhYJrkeAxSs1ds\n4878RtP4lJLhmD37S6fA1nRvLTp9DkDpotg0lcLTFVuqBvs/iad8VWOt9hQX\nH51pJJFh3zjEsW7Xn3AsUuZmr6+HgbswKRmv78hMFFOBediD8MUFS2BrZWxg\nDwXCMbuORz7dfTftQT/UClbO8PPf83ihE1t2hs9L9IetDX3GbXApc3x0IbNQ\n9YcMouECASAPi5CpbVvJchQ2MYMsmQvZ9CKt4TzyV9FzTWyGfYHEM93U8Qdx\nzbmUDinn+P+jCJsyH9khZ6sNf7kijNSuw0FuMMBfUaFQkR+mO7e4Ca9OT4Gc\nhBjgZqHJBUqUEWEvVIPX8LeK86Kh9nHCcNgzZblAqgQMLezhW+1GyQ47pwn9\n4cSU\r\n=lvsY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3c406710"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3c406710_1539810280478_0.8048184271088274","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1938ff24":{"name":"primer-popover","version":"0.2.0-alpha.1938ff24","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1938ff24","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d68e8f779db4922e36f732684ef5fb96fb058dbd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1938ff24.tgz","fileCount":10,"integrity":"sha512-htsmmoKpC4UXjD9yJHo6NQe0BpzXjLthLZyIoHjT6FaS6+xx6prNEpTVe7icgcUA5yNnQTQUGRI6OkPDKk+q3w==","signatures":[{"sig":"MEUCIG+8QNLiLAFDg1EIVrP32COr6wsJ1NAi27na2fuOnP9MAiEA2tRNBe5t/ttjOw1mX2AipcoURpDxaFOF464wqBgdR0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6VwCRA9TVsSAnZWagAA6yYP/jsLJYMQ2r3sMw8Xbusw\n7eysRGzbWBsZCSsLeIzb5qyISBdWLD7xOv8eaDu5nhf0vPjc7+I7RcIiHuBC\nZTLNsE0MIwm1Hoj5HApsrtueiavXNLwuO0gigX0NAZ8NqZC+CynxmzQbxGuX\nQgS2VFLxmlMR3pOgcImcQQrkZJ6+u+XYeNSg9iYxBka2BY+enNMHIp5ZRR2u\nEmq9H09j7SeGKSz2D1nuw+VtBQSRW0we9i7thkI2DTzcX+vT2dDU/TAmgRrw\nGUetErMLzayzriWbg3h1D0ahAjey4brEKDM6eo8qZKC86xuOLJaAPQAZQwXY\n/itR1aXc2kRt+EAybZzAlUG/3mIPejlpUv1i3Xx0fFH/P5GOHRjSDqO7oJlO\nJ2/No5YXpmXCNa89kDn1eAurLnoQrKo/PIjPVDdK45vxAOn3WEEja3DzC/dx\n6oxQG6yVsDFhOnB8KZw8gVqKAeXR2ic3EbxbpUd31DuvbaLTlvI3oUox4S/h\nrUmLd7K7PaPafAXSNvHQQKVvjgc96kRWnsb12RMIGS1eSzJ83gwIidh2h0cY\nFYSUdzc0zf4OiUTwt5q9n2kiyE8Txc4JMvdyw8HUGK1reFHsPTbHEHlJUWXO\nPUp3S5ipQ2eh5hK3LCDulva+usApl5EKmGCKiO7Yczod4NUSC1N6VW7RdICL\nlz8O\r\n=CZxw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d68e8f779db4922e36f732684ef5fb96fb058dbd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.1938ff24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1938ff24_1539810671323_0.33764117141223937","host":"s3://npm-registry-packages"}},"0.2.0-alpha.53c93082":{"name":"primer-popover","version":"0.2.0-alpha.53c93082","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.53c93082","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8a332953978337cd776201331b1e4f0704cbda42","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.53c93082.tgz","fileCount":10,"integrity":"sha512-1MB3egUgtm0JJpMpVsOfOqorA+WodHJbrrdhMTVmAyIMz3fwPCCIMhNklKqfOMr6LA4SIrOVtxUIZB8EiOHHBQ==","signatures":[{"sig":"MEQCIEDCdAPNbSnarISbqWtNJttbeEX2SXj+uYfnNJGinhiWAiAISsjKWXdrHUv3cWu6OaiSPzDAhm9+fR0zmjfJpVTS/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6hBCRA9TVsSAnZWagAA63QP/1ojod8F5wsd3oKZyCjd\nkK9TLCcZrWNcYS6abZRWdYpqrpnAha4ZQlexf/SXUtmBa4A5FVlXUulExTUi\n8+tU1lUWZq36kUc72Y5XgezjZnKsQqvLaZ2dp64mscITa0jcO8z9A/zc5h16\nYjXcEZ2h5gT7XY4zizfWRvxF0pDyk/N0STyf6DQu7wyqY/qV4ujm/bnRYH4j\n8mtGy4SsbD8/27izNe3ho/wL1QrWPBjhaHZD3jx3tuSrbU9WyhIifQJERUvi\n5KtkwUKyUZx3Hghqmwpas1e7rY/sYx4Kvh14XBHzpnCfvwG2muIdyKvh8aXl\nJlOe0trC1ESg2aDRTD/pyo8G4LpPNP+GmJ442j23wkOx3jma7Ky9xO21IPwy\nl+LZQT/oJqsSLuNzxn9hA8a+tjbAdQVk9RVKmHNShk0PoRAyLfsLJ7Y9Z/jl\nMI2qB+UOdnBPHT98+Gtru7EFzsPPrlyJBNKRZHy/xu4tIdvDtQGasjfyIilt\n+GuqYOYL4mIQrDUCpe/a4Fv0T2fI85rJnist8Bo8zcCqjClMQPoedxTqgss3\nk+AZZUQj/AGCVzaNTCNa1mLUDe3Z3sfuH4g2E3myPgVMuyY+1yrnmMC42tE3\nME91h0xRQ1p8F6/DOdYahU2DUi9F1CqI/GaztasJeNCstITU7ppDFU0N2Inq\nUKe7\r\n=tEt8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8a332953978337cd776201331b1e4f0704cbda42","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.53c93082"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.53c93082_1539811393139_0.2213029410774776","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0f5bbeba":{"name":"primer-popover","version":"0.2.0-alpha.0f5bbeba","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0f5bbeba","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f9a06e5a6b5234a76c44a03585e3c870c3241984","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0f5bbeba.tgz","fileCount":10,"integrity":"sha512-ETU2VVMomjmpNzqCZIcbfNo1yHapFPOc82Ob112hVZ5+jWher/78HjUrWIZ3p8OgUYvExYBk8nTjnwGugCzxdA==","signatures":[{"sig":"MEQCICfeKu6oJplRMi2AgtiU1XUge+i4SfAIhGgbheoZCnFNAiAWofG87r7kukIpMFDeNiSlE/MS4PLr7hgHmGWnla3NHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6pCCRA9TVsSAnZWagAAM0cP/RQU3p6enx6GUo/GE+kf\nVcvnw9if+QcLB3QkLSsJveh3N0vVctO2rO3nmyUncaq3TSSxTVBluy3elX6r\n3UnkDR+LcO9V3IKeE1IjFoUO4KOyxwRVKll994hIxoPf3YHem+XH6gfHebAm\nqLYMKky0bMmzV5B26CpSHvPRBQf444/dzluOY80GWMHx7+lTs+uncG5GOS2n\nZz2H0PqGsotl4PzzZkXtprDEsT4Le8g4cUennV1aScMxRHBlO6RMsoCqFFDn\n7NygHohNvL1FVZYEcAbAkLN0LIqClYJMG7x0kcRcrvb+DzJjIrGtVi3LfHFC\nvS7oFozUqkpIOkY7xM1vNnEbPq9H38hYCaCPA1FkGaexz8CQdHoiKhFcSSu3\nj7H4KVxRQHEIlOqQ3Gzrr4XN3HO52vjHJ2liP1lTdeKW+Mr76OS1eY6r1O4q\npTnmrApZgc7zSAAdls03eUR/fxL+fA6iH5iAKOJj3gGfcfj2mAsJ784ES122\nFR4+UiF89BxWkQofxzHwI2zC1OsRByR+plMlzacldjGT/YwDmho0KB205lwc\noLqASYpsiszHZQE61jDSbT9JIbz0E/CIDL9HpbSaBuM/Dt5vHnJU9AIHWAUE\nDUapUZofxJ0PtTFXp5lu+dm4LdULCBPxxvE/G87sSPJqFa7W+VLTdmMTcRde\nLZGV\r\n=lrPH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"f9a06e5a6b5234a76c44a03585e3c870c3241984","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.0f5bbeba"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0f5bbeba_1539811906308_0.5057120264576032","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c29e3d87":{"name":"primer-popover","version":"0.2.0-alpha.c29e3d87","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c29e3d87","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"52400f9fc025ef09b8ceb1da810aacade1a6e5e5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c29e3d87.tgz","fileCount":9,"integrity":"sha512-4//TdJBMfl/OT/Ekv28/++wdQ9IMgSxN6RF/pROHav3Qit5QclB/e+xT6y/ik31d2SSrHuOufYnLeOufmyS9WQ==","signatures":[{"sig":"MEUCIQDX37k5ar6PPY1+kgwGJCe1kSY+cVto9a5LF3zDbZ4mowIgMN7X6vF5sxmWP9zKR3mUiP/alw73BOmT7rEThq7zbv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx7CVCRA9TVsSAnZWagAACTsP/ijs0sCzywJnbE7smCyF\nZE4kXmVv6aWApXlu5Tjmiddzjo9XQxmj3LAsqg/rCOTuHESnAx4ITFpsoUIJ\nyVu4XlPPolRKpntm8Y//JlypxHk2w4pHDelm+IREOXmuOZIsFnmBwu7xxRZ3\n6Z8esWpmHjzUMzQ3OfuINi9OBBRtBgNOJx4nnRNmzY87L5GmPALUUH5MY/JA\n0d421x1bBvEe+qQrBKzUTOPe382nIu8ptFmALfom99xYdrs/PnZM5vMIqIiw\nkF6IfJLykIj/YC+CVvijVLK1gGigscOxopa4PV9sgVvTgbfL/TGHoy+3G1nB\nZSCOXgZvT156asoQGo+g7SklLh970sHaarJHLDtAI90xLAeFVg+zmfszHLUK\n5crBk75uKapUPNxmn0ZpyoQTmxY2CYxzT6FLpdG3ABsJGSBw0q2BPBlr8aBe\nSi1Ji7aafZJ6kYvIO2Bh2cn0IQbl4WRGksEDPfHfEBokp1eJ6eql/cfGifVd\nZL1yJp+EyZh6x+Z6wrZ4ZRm/dk5yfDlS8O7ngvV23HdHF3PYZDAXr6muNXCo\nnMm0KmoXfd56zgw0RPvKahzcjfo/YiC1/OW2wYFvcAx8yyCs8tC7BtZylWAJ\nli9yQk8oqvI9bU02yce/c1RxsldG0Vl00VNNwd17ksj3i+S9lgNj4PXB6vdM\ngZp4\r\n=pUuM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c29e3d87"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c29e3d87_1539813524629_0.5179811659002667","host":"s3://npm-registry-packages"}},"0.2.0-alpha.17f5537f":{"name":"primer-popover","version":"0.2.0-alpha.17f5537f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.17f5537f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0f1492c50b5dd1411895056f4520287525d10c8b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.17f5537f.tgz","fileCount":10,"integrity":"sha512-WibDz8dprpRe5pHEVrOyo/qTlCMTf0oKOAr3cbc8L6nww6dJj5Otc2Ev+0WVjeFJNoR0DXrs87pfvd1Wq/Stdw==","signatures":[{"sig":"MEYCIQCQZohpNo3Z+GibvQCw/Utn6DojKTRH7plUrGjyNWTa+wIhAJ4Dr8q3Q08pm9BgIBEWC1rdEJQWu8k3kdoXDw2y4y0a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx7PECRA9TVsSAnZWagAAALEQAJ4SHfz4yI9yvnEL3Ry8\n7V2yEhA0lnCD8jcrMjAbH1TgCL3WshKaHXJ3+yGhqvMxJnAvoTrOrPB3dMI6\n8kWh7BvWyUh5xB1to1K0UbqmXUegJhqXRKw6We3CxIX2ltrDsWRhsyqW9mbx\nDKAw+L+BGQjUae5ChJ8O1aK698ZUni4+H49Zs6Cfk/g8tZ1PDrkPqH0JFJ3k\nLseZZXoXmIpWaiAwT+aJKcnryJhrUoBNBhdjnXau3huK8XjWsJSGFoHp3PN3\n0xSlWAXZY4j06CWp1UeTHKEKBSAES+wIM6K7TtIWUIAQPjZERMWhkcJplH3K\nlofAStYnqiCeVG3zrduLKnXJ1L++6YVBWVr5A/OSfVcNhdPqshaRnhIHmhPm\nXmjpPrG9zWf5/U137mSd6Wp2lrxnyLX8DsodDay3u9wVuX5LjR/U+epIxu8J\n+dVzOOO62Wk1EEASyHT+TlXvM6cwokmcNmzI9mXYPA3FRwuHnYzs3hsvDDPA\no+8Vwq7I6WGcW89/c7oAGICELfwJG4uC4vHwJuEkzPOZn6+DB2lftPUA3mSZ\nMLTkURVbcdA4cbzGdzolx4WPZKOhmoxAjtHQUpqmrdq30JYZZbgx9usSgSn8\n2/7pohxlpbz+sgdrqEzhQ7fnU2rrP4eLwhIHj/Ek2ryXtzhLm2x6s/wdSBMe\niWCH\r\n=kk7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0f1492c50b5dd1411895056f4520287525d10c8b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"4.2.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.17f5537f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.17f5537f_1539814339766_0.04019846971573382","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b67f7cc4":{"name":"primer-popover","version":"0.2.0-alpha.b67f7cc4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b67f7cc4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a200a1c844ad269a5d7bcfaf5ab1cd85e50b24af","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b67f7cc4.tgz","fileCount":9,"integrity":"sha512-jjCWbIvXKa8ItsQtYMy9AhMU6J9ahFEzNbm2LjtgZVEwOaKL1V276TJ7vMFCbCVsU12+8c0w59MJWUFGkYXpSw==","signatures":[{"sig":"MEYCIQDo9o7RGSYz6IofoTc/3fj3hWZlj2j2TE3SoATQRCIvHQIhAJCxpKJGH2o56ukcmalhUtkXEjDMqsIEXFSLJxsZhmp7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx7X8CRA9TVsSAnZWagAA3LkP/3sO5PEfwLMwRIJ0V7Xc\n2mRCW6g4pd4PfFzmA6cEhIjwbNETLsxl2rLCflFczO223H+wLHDkNZX5w9Ln\noj/Wgac6mHFU3rxxEHsZqA3UNfsQRLq/twtoWceRCuTlo2IWnrQ6eFIt+WnX\n0pwdcN/3JkMEEw0GE2RnTuhT12+S8sMdtJYzW93u4Z07RTZVFgGLPk/17bHi\nGoPrpS3tHsOnlOTgaRNsfQc5g5pVvoFvyoJ8v2tMesT6zTKO4PUowOMnOic0\nussu9Hlj1n/sjIGEYveJUqaNiJAq+td8XfMziBoceYqUZhfd44r6IOCJMr8R\niXiNisZqqqTs8K9ym54peSQ9IIT1C/9wjwpX1a62iPu9T11sBn+iAh/WM5u3\nojpDWiXsnQDC4CbuXFYC2oYfkoRgP/V9TqkZaZJracRlffLzXGyx7oCS6TQ4\nZY3tq4T5Ii0XQ7YUksQo4SJko5feBw1U8qCW6VovzI50o9yOdwZYmRUm9bYK\nJhl7Xpg55bjb1dpmmqsVcO4CY+llV2kq3HLKCTxUUPnxsypIkdHvFl2e20r3\nM6Ipv451NhJ7OhL6WR5yaIxwOlDiHHGNxFgwYRf/alBvunLSPviitiB9cSzJ\n387zbBXN/+GmKvZAOmb4bEiqGwscVEGROTjg2+Twhl8kKQv0anzY0qri2J56\nAVe6\r\n=ChsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b67f7cc4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b67f7cc4_1539814908271_0.996469241737324","host":"s3://npm-registry-packages"}},"0.2.0-alpha.09cd6cad":{"name":"primer-popover","version":"0.2.0-alpha.09cd6cad","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.09cd6cad","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a1851e08aebe537da88b1aea38662b3b74911ac2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.09cd6cad.tgz","fileCount":9,"integrity":"sha512-y0xauHtHFqH/iZKyVy+KKFSd0nlPyZmb7cFM3S2YMxEQ4pNRYyvX5CE1Oxi9mnkpgf/lisfVT0m4wpao8UtItQ==","signatures":[{"sig":"MEYCIQCXYPfIlZ+Vpl/LJsFdOTn5qAMag2eor0B1AEoeH70HtQIhAMaAbpBqfGuZlWpHg5axtLtfcf3dcmE4MmNmsyVmaKbH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyLxSCRA9TVsSAnZWagAAwbQP/A6vdcnyrNPgKGgI5fKI\nd8yu8BHLD/fugiatuI+pDTH08O3BM/jTTS6DOdjH6kzwhsluJKDOVD2s4AP/\nRLZuEgj2vsEES4HeiKZ1YllJnplqTupjJ9CuLCsy96NVD+qbHIgnSugyQcUR\nkMM3vkRVZ/jMNjvBVKXYirHCT7lJyPOVb6I09zYOyW0zwFt88c7xYaDNGwnl\nP+jwcRdFWWiE8nJDcf709iP7i+pagh8SB8JCM5UoM6a5JcuDTID0n7r3UxMN\ndAPjz04w1JzCg9csUsOSVNaoc2/7ps78sj7qRV4EvRX/7MUrp6c8+sw+QIhR\ni4yHPbHSopQuVrNPJfe9tbSIuiD2UyV7QEJYtP34r+kHpoDmxd/e79csngOZ\nD8yZ/HXwJgRW9JLnf4NWAL/fXx6wvPS8JpCEzYfBpS22k8wBsyyHAhzBmb0i\nvhokHxnuluid3a0nJ+6XCKbhbacKl8VzZdRiHudDp9JPMAuB8b0KT9vbAkz9\nskG+1pqY45s9WV7YHy4A3xlcYoAAIcNGjneVqBbm2fAFyzptvGO3zj7Y7FEY\nPRC0R9kW0t+1lHyTei2YF7EEKfmVcLaZ7+QSJBfuFFQ7QTBtw9Ynn03nlFFQ\nQ7ZZg8CoiYEuFK5k/4YU621M5AuR0y0cCGFP3mwLYJsnTWlU2tYl7uYY3Mn6\n+NdF\r\n=ze7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.09cd6cad"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.09cd6cad_1539882065725_0.11736917649209522","host":"s3://npm-registry-packages"}},"0.1.4-rc.3":{"name":"primer-popover","version":"0.1.4-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"33ad62da8fda80433d75341a6f54df2b32a3446e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.3.tgz","fileCount":9,"integrity":"sha512-uitphHdWOHEnDFVDIzBywvjHlmViGJPDZzCdiITuyrQkA4RaP4bcKWhE6eR2HKaVLy3wUg3r8q31+fWn4p7IYA==","signatures":[{"sig":"MEUCIQDbPqBqGKgTJrUUD0pMc7WZDQIHwt3hAAIuHYXCy4r9FgIgRxzqxPVC9JgTpkRifN088d6eCXWqklneaRUrxXMFRSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyMPTCRA9TVsSAnZWagAAj+MP/0703TSgb+HQaxqJcHoA\nkyCC7BcsC/4ifn/5lEWeHOqI2IXoQMebi+2fp4avXgIErRPBiPuw4GulFqF6\nJI2ftOHzXuhLDy6jNy/1jGQ9ldfEt+DJ/kJsIkLETiNgeQL+z2pt8W1LcNaS\nkIfw4ziowbidsYaEJ6VeFpwNjK/Cq9ErTu/hxW3v6oY8iBLsoFYFUPomNS3N\naKFlAPQ+OPDLiVlEwMagWxbA0DyQyqB5DqivfBpQ9V8AgJLHUmYwIdEU+nvN\nIp0TbPmrs1fUviHFHgovRw1t6dZPuikZJmZmKGmqmrxLvXJ0TeMdS0WV/uj3\nREKyzLDLaFBwM9rT9AF7uvjjkgzhwUl5QWRm9SXDIjVjxKDoce2ZKltmsPVZ\nf+z9BhpRF/rTpa8etflpEBS5JHuyiQ2CQqfsIV+AtT/sgdJ+bLj3qzLyENeB\nmDHE7bHk7CF9+iDPU+FjTf+6FmOaIhWRKupMZ/BmrW73RWd44PBZLx5OJHr4\n2JOW/7lW719tHYzA3N7As3fIOQTHdyz+fiQAf/3le9sS64V3IQV6RP7hEKWK\nGVwmLXstpfYnjy3fjOuR76ypP8OSu4HV4t+GnEQZrxthCPHpN9EuoqKTYNfr\nlrK6EQb/bc5KT8YrP2w62Tmv9JKW1B4XlduSqznmJlfgjkBNF29Y1SGUC51z\n4+3s\r\n=97Qz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.3_1539883986884_0.8745725810985694","host":"s3://npm-registry-packages"}},"0.2.0-alpha.cef53ac4":{"name":"primer-popover","version":"0.2.0-alpha.cef53ac4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.cef53ac4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cc74359b25302b711e2d2951fd5a8e2014ee47a4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.cef53ac4.tgz","fileCount":9,"integrity":"sha512-OYydDrdxf1HDimC/7mOzb6B7kgJj5mZRMxKsiCiyPPiZOqvWjIWxV8zkmX8qomfYmqRNwnSw8nnH1dWAKKH6/g==","signatures":[{"sig":"MEYCIQC/DHn6xvFquE5j9QD2q2U+GwTCqo/MIM4eTaWUXhaV0AIhAPVRkPpX8AdsBfw85HbR27+zblp2hucxq6A/KpV2A0Fm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyNGfCRA9TVsSAnZWagAAvAwP/RfRHy0Y26NldfvzudsB\nFbwJmFMRGZ4Gf1SEbnpzgS0PTJ6fmH+fVUVHMAURq1hafvFA+oOrw1Zr/kMr\nCDlAiIvPoQ+dyTyhHBMvn0ncNe9J58EMUUtDq0aY8928SlNnbeCxC0VYweXt\nqkrQODeWBYuoG9FFVcLNej9qsy+nmqUVK8kwyBgaQA2rCI+nzAHIXHEzi0v+\nBHLRjLRMJuRp/VXkBVt58P+ZV2pvIDEYtTCi70CdoGnBfhfbYWebms1rgNiT\nh4C9tPXuoAoutTyf08tZw+4LrnIXQ+2xasa4ZmOjEM4Mq8PQRdPEMIfetQ8q\nuQ6WP2z6aOxUtny9xik2NxbjP6GOmLriEcROFLpDxAcoR9EFpOyosQw7oH+2\n9E4wtZE0Vv1OPWZDNzK62xnVNkaZfdzJa7vUlLbQp9z9jz0I8MDqQG7qTHMZ\nJsbBzh4d01B5vlidaBbKAfFpM99kqUeKnsZfR9GHZ2HS9PBKjTcELgqdtPhz\nfXhjnBNX6R0tnk2lJTqOiZj0GoTbJa1TQOrAshZDqSLquFP9N/GFzzmOl89q\ngfZHo9TA1ulOJExszVn4gAMl8sqmX04d4JK36DTVDEHgL3+tV2+maN1ytK4L\nVQsgXY/s57+aj83Co91I2/8YD3kqycJ0Lm3qrhUrg6wnBoLjf1PzMdQylMyq\nXCLY\r\n=XaXY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.cef53ac4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.cef53ac4_1539887518844_0.1919596595852271","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b014d245":{"name":"primer-popover","version":"0.2.0-alpha.b014d245","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b014d245","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8344ec08446d186f3a36c317a68e542980a7f66a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b014d245.tgz","fileCount":9,"integrity":"sha512-m1k3F+EKtzxI2+5mi/OiIblc788jih1x025aPb/a/JTlaWf7a7kCAqskh2KeuD3S9Sfyz1VS6xJWJflDxGWtTA==","signatures":[{"sig":"MEQCIBgb31H+V2vpZHdDCe7sc9iWiBTf1ivP73NWppTmZh67AiB9U7uxghzMow3ZWDve3QmzFKfPx+m2NxKOOsqXjt1vIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyNQYCRA9TVsSAnZWagAAZ2QQAIy1Nghto4M/YH/yCigM\nZMgSzRj/JEJrBjpjIrehTmeidCZVml7YI5xv1ADRr9aH8Gw90s4ncnSY4Q4Q\nnpuaqjTlWmYd4L11EC+aUe1aN5SFBDt1NvVKGHIlHK9W24tyDXfLMd+0y+34\nT3ayZ7j7DK+qWbf6wEL64KzsxvuSIrt+xe1c3v3namNS/X0IS3TLsZcIbYJl\nS+S79asHLwiu7HENTZb+YCcBaRShahfeulOcji7TSB/robsiziefnt52k79g\n9TR2lVttzKGTKYHIwNwd0sHYhKRnCw67a+scuzWuTC8zen7AIOWAZ6iRC4UG\n1GyGVBvE/FLVYRGq5Td9DpEz+HUL8WramFwRO9CH5ur2FKgCKueQOB8LyZ9R\nzTU60EhXTCCB6eUXQ8sBniglK9hjR/6ZKhceA1ufx9t0mQkyDYz5LmwJbPml\nW07aeD1lp3EQfQbldyBQuxY3WO+eaNHnnlvEZZ0RwX5VWgaS4HdHwRdn1KSR\nEXNWTfyI9/FwXWYoh6NwtcgadntIKyOog8DitEvnc/42TJCcNJQ4WAh3pe89\nu5eUis9B+np3G/+O9nlsGCVbsEPgGlRzCalHLX0IiN4KMIPLwuHNx/xL0UaL\nepxaz7d7hXfcTs9Q+fIoWi8NsoCFUtj9NJz7VM/mVrV6UNvQdbr5GK5sv9dV\nZF6I\r\n=yILH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b014d245"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b014d245_1539888151497_0.7152023728433885","host":"s3://npm-registry-packages"}},"0.2.0-alpha.49d97c80":{"name":"primer-popover","version":"0.2.0-alpha.49d97c80","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.49d97c80","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3efae7116e900ebfa900f8d704995a01c0165f42","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.49d97c80.tgz","fileCount":9,"integrity":"sha512-3E8kP/V6bwN+NoLP7WHiS1y/BlOPqoBqxIE8bJ8LoLM3NO7RqRwoy3IThfslf5LSmVlsZs/QE14l85+HZ6uCjg==","signatures":[{"sig":"MEUCIApofYZ4F+asFm5X3ZxQIuj97A96Jqzfe+J9Tt4a9xn2AiEA49Ltc79JAyVBSAleM7bNPR39dPZvy840HeD6ovOYTqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyOaSCRA9TVsSAnZWagAACr8P/2+Fphl1Xc8/eo1k6mwp\n+nl5FFe11/tPORwcpJSS1NhAiiwL0LwRIHvcuYV07mM1Tt1uvybGQaQO7kae\nIUrm75emdu089ciXLQWlOpf3e+bS2Ph68day92DQweX+w5F93sg6c5yf5Eg/\nSCTqojdKsRKIJEzZ+04qEW+puihcqV8FqHGq2cozy3yFX69xwX6DJrCQNOzo\n9YE0rTePs2wRj6orgPgrKDbwcexEz/mmOV05OkG0ewnYd/37iJSgZYmoSwm0\nzcYyZO/NM7LqHQlXE63c6TaNEZhdibE9nN5h+Jm8b1WI1puRHEiKHwa5xyAn\nBXMvVediUr2JyiQcfMSSbGHGfaGcO95g2YuIoFKm6uDLDfGUDZHOnXUgLxTj\nG/BWEkXuvvRdPKSdicT00iggC4H3Apb8x8E3fDy4hHBIcRq+Xm2gZ+CWbMtm\n9+IhN5DrsvwFZbq0hUGTmOzLmAkQdQi2SQTA43Ywza3SMSN0wtAxKZktDP5R\nlgQ2xQ+XGoNykdN7iXKBGx0m2Yqgvo0Uk02Pn9noWIM1qIDMZO3f8xxi3I0E\n0/B6PbyV6fhepg4/ilzqy2J/TL8XxteZ+nezPUdfDofw3vNDXzdZ8HOXeKjy\nkWToxjSzeQf7nZlb+TRIWufUhvBgyK0IHXl8HjOdUp2o6Tpc5I07NcRERGiG\ncmi4\r\n=smVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.49d97c80"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.49d97c80_1539892881478_0.2299089994591692","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b5459caa":{"name":"primer-popover","version":"0.2.0-alpha.b5459caa","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b5459caa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"045d080672f4af5eda04bbf8edc3f36aabb48bc3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b5459caa.tgz","fileCount":9,"integrity":"sha512-C6fr2lBqq8ZDOD724Br3FBNpmV1Ds3SWATJnK5S0ti/mQI0f+L8Qw+AMKQ46eearO2gLWQNkgkkHjGmwemTBCg==","signatures":[{"sig":"MEUCIECv/+poRFgDn+Ob5QCZo0P8nzPYf3nYGv8fLAdAP0IIAiEAyAisXpoaKSYFDsWar8PGvP3nYmbiuJt1cTJtB4dlbE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyObjCRA9TVsSAnZWagAAEY4P/jmbFVMTXXB5++cSonx9\nPOc68+nNWIvPmnCBfvMYvZHd73Ubp6bSv4zHjECwsMAq7VMyUnGlKiatWGkK\nnDh3NY48kiPzxf4cqJmfsTOcCaSVvmT/sCJgIC1bn04zWamfKsqky/hkww7q\nOaELYeYHd5nq44GzEe5Uliyk/tFF/aTBn0PViiect5RfkAhkxuPfHpCPYgtl\nFL9euQOsCkds5/7dIFEqvTw0FpkhuVpViF8enz/MRUJjoD+mrKRzqlHV4SHR\n36yh2kQwv0Nkeu/INN6xH/QJr4PLraH1lMVjwssuSm0UYXpyBRwLNFybpXsc\n9/WGjq9UCuKbvdSHWRpS8bXfJwPcnLO9CwLIbuBrxKRmoAgGFWo0CJK9caK1\nvU6Za2WwbCQpkIKFAEuPJBWyvJlM1WuVVwYakXFCpcmEl09JU9X4osmzMW4c\npuMpKjqHjfrMx87ZstpIpeZsVeH6GY2XcZgNKblqb5sQ3bU4+2Qvht/TsuKw\n3g0yXNjf/vXHK5u0d0K8qUch5Xq9mHZ1A58MuFqsdNHuA32T0ZSQxwzXcnkI\nKHs0g8WcpdQZwLbyyKZl712GYaplYyMUagBhzldko/D5wi2SeDbGxeFxyKGR\n3fTYE2D/08tfXLeSZzV7wgonEUV2z45vjA5RfvXonDIN7RmOZUPLRdgeGGOa\nemCN\r\n=wTOr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b5459caa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b5459caa_1539892962778_0.4297182019639829","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7c8d0e34":{"name":"primer-popover","version":"0.2.0-alpha.7c8d0e34","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7c8d0e34","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8984bbaafe8a3c77ffd402452ed2408b7a728e1c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7c8d0e34.tgz","fileCount":9,"integrity":"sha512-4OTcA+JNfK91fvzoLI3py+kwWL/QVPlSb1ElLj3477+whKQMss5tGhDGqoRxJI/bZhJhlvxWE+F4geDOFNKAUQ==","signatures":[{"sig":"MEUCIQClvy5byw56xzN6+QQzZgbQ76uBosgKC+ISv2ZYmVjaAwIgPOrSTuBn4dRZmmHzepcbyVCaiFJkthvQZ0Fe/nlc1Fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPknCRA9TVsSAnZWagAAojwP/AzKpib+dXAZz6IqKhzv\nthNYw8REf+OtFKmhqqvVg9SnFAJpLs5Njya9oFWqf22WpAQyr9Z1n9+zcwq6\nsWNLPyB7g55z1HONymPF2DLtEuRndVl1YmUXiZun0SRdZDDbzi0x4qNReWPi\natzWHmVyTdrmDVuyBmq+aBIUi77ZsNUCsOzt5s5NKmTQyEIvaA+VvpGX5nWj\nnk3PW/IciKODsoEgtspNOiV1OGW4TvCs9w6ElpSf757DBZ0/y4JSSG8IvqNz\nFfH1tXz0+NeE2geRhWsiqRohUaq9RBVLsNpMmrNUNLg3V+PAhqB+71m2IXBK\nxnVBsLzLLi8g399SfLLeTRYRqfbszM0Y0FKefVXyglCQUIsjAfPbBH8co3s0\nW7H0vOO2nGtiRwYw7SJ7iEGX4IvRFXnwLrvLjEAB9ebF2jeWZq2n/HtskTxP\npYgemx5nBeLnI/k1caETf0Pw8nYgDUyurjwPZEqqcSNcNOzXgAMBRSd/8Ias\nFOMXY7ZB3fjLyyJV/V0OkTuF9Ps1NSoe892lLArNMZE66zseyP81hdQs01h4\nYYuabvEXZftRtxfelwGeBRUwUkEfvGTnFuBVLMpsPUM5n8cFC9wMpAGReV/c\nw5PnbyFbHwPzc9IHAUxcaPvc9pDqFq9uS1zqaXSpcCEQ772eIFERILVCzquc\nOXHl\r\n=xSvS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.7c8d0e34"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7c8d0e34_1539897638704_0.7280945950986171","host":"s3://npm-registry-packages"}},"0.1.4-rc.4":{"name":"primer-popover","version":"0.1.4-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bc84fa3b90d2ba22359c18fe99db760e10bc7e0f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.4.tgz","fileCount":9,"integrity":"sha512-f6LOebaAnx8VTfJ2YUV0K8iBxEEMeOVbkP/n2/SgUwVX6j+DO6oKb6sv2isEPsUbqu3gt5u1plSJkgfQKbJHVQ==","signatures":[{"sig":"MEYCIQDIPYOET9l8vlbR+AridVN9MwchfnddRTTp6GkoXxGdHgIhANMUUBVVIz4+qEIjEqsuxU4MEkcBYZhCPta2GTm8dQKd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPveCRA9TVsSAnZWagAAL24P/jWXSb9HJ08dteX3kzYY\n/4g1BBRe4M9IWyXG3kuJESLusZaqtDHZPdcSL6aAIhIrf3hlshZMNrAyhTXH\nou/59LZLzrjB2vQsZ7kFga5Jn6cWlDuyfM+eJMWwmKpFkOlD2yhjMHlpDIHa\ndrLnbLg5mN47fBOtJuEdcJO5+qi1PybVfvyyVPIiPexZQqEhlmHtzgKyxdRW\nixWgFqC0LsJmf16Ve84i4QuYwx9QVF4C34VSLbeIClS+Tl8Q+5zteZ5wY9KU\n2svTJVRj4EWM+TgYa2iBEyTlxYmxZM2Yd3NdsCL00X+2aWbuXlTxm17ON3Py\n5/E2yWJKxi9JiukNzcS8hNd3odudwabUwbvwMGJn3HVFlQxAsQ12xDDYnXGi\ndbTlZLX0GezesH8dlpmlANZAJPhMHfBNLIHxOkuUxGnvoUUji5pCsqyn9Zxm\nvFsXtReYZ/UoFeVLdW9slYHJEAcGydwZnFZaL9kG65zV8JyV1Z3wDj9zmhUB\n+16ONOo5TdReJGyX2PO+iGNUTLfKI7jS2uKO5izS80kIIWvh9z1LSS/z/xJA\nHbjMeFVZJyz1jzqEE0uvoBQkG7AEheemXOu8Eh4QK/+hA0QNYpSAPFB0ya7I\nECEcVICVPTUrIaXGE3kedzua+1NjDYY7FmPfIFRjnhbNFLsx3vxZP6OFOXOP\nQDRx\r\n=9O1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.4_1539898333557_0.8549220112960969","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c396b082":{"name":"primer-popover","version":"0.2.0-alpha.c396b082","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c396b082","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4014bf2104f51a65d5588c06de854e891d78dda3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c396b082.tgz","fileCount":9,"integrity":"sha512-Ours0Dxoi2HctgJElGQXw97yU02RDTvpy9kqhFlu825MRbQ2DQDkSrKbkRbDZL5s9QIDnOnaFpS+3QZMtQkQuA==","signatures":[{"sig":"MEQCICc+Bci/HPe5s2002UfBwQf/4fjHYLozZSfL5P6UmpuDAiBet1op7zS6tRaFbhnzpz0qisM3zT9ERfFGnD/IZUOhZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPywCRA9TVsSAnZWagAAIvYP/jj/rYYzGnc6OJG4wUdY\nGISli7WfkFlSd6Xgan1ncxVDTZivZYsgSBxQgqFb6QaC7wfLs4zl0Bxh1Y2g\nvIzaO4+Gm2V9b/CHGfidIrJtnOear05zuuvfNYupuwtxBQGYIspz3T47KDb7\nBdHUDljy6a7SWGQ9idOtcFGJXtxkrjXl53EreCZUDlDF3ac/B2t21UMsAFl3\nO44ynDfw8hh8GGI7ZkZM6CbLu4WFVl+1YKeyomFoMRIcs84qIx/kawGItrpM\nuPtTzP4Kfn5+yEbOt8t0ROAPB91Trh7CScTqRZqEBykJe/Un5CxCA39bqiIe\nmy3wMnKd8vLpLiT28/AmcHLuYbkxhs9Vfr0x2hPS7Ur0a6zzS4C+DHEBxEqb\n9rwVopVfePHTK6pDh1gobW2MxrZT69qAZCn3Cx639EKc0CpsHqmI3/kwnW7q\n7EoqSR6G24I14J8gtdwb5diJpZLc9SVA31OlPM9Wa5wLd8Oqapb/df7+dYDl\nKGFQuPyW0n64yOI1xCM1aMYN9yIzj7EfBYNY4r7tM+9lDOlDOwtRzG8qGuPq\nhx1RqTMLUcxWfU9WidjrNPqCPadRkeIzKj5rZKTzwBqdnn58+NKlW20ugF7v\n3Ll7n/I0gwDCEruQ6qAVI1BrPJCHw17T2cTwq2EmJAI/2OyHBgw4r1O1x79Q\nSP7A\r\n=GMxV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c396b082"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c396b082_1539898543991_0.7183741721312686","host":"s3://npm-registry-packages"}},"0.2.0-alpha.47902cf5":{"name":"primer-popover","version":"0.2.0-alpha.47902cf5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.47902cf5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6190087bf636d2b11ab1b7ba23c8b4e3264ab1a4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.47902cf5.tgz","fileCount":9,"integrity":"sha512-Si38jJifn/2Mq+pDgFARrsiAcYgZkZ4bNVJ+Uaeeq3ogdcGzIA++0qhZqFnxfsKwJCMBEHTfVrDsoVJcGxiqkg==","signatures":[{"sig":"MEYCIQDFFH8ojYSj3VkU4OB3IdD1tAlpPw3RvPmVYMSGagIeogIhAIx61oJ9NC7otubnt2C+zVdPVIin3RD7c6FLFfddFkx3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyP2SCRA9TVsSAnZWagAAa1kQAJ8qhFobPZQDbMixXJQj\nol+5Rci50O0ofWHEblcdBWt2hF23cVguFRxFu/3KnHm4tLZ35sCo7e02NP/r\npULcNBuIDkrZ3stVi47zN8kU29A3OxeXaxG1Kz+2CwBiKqNVR9BxeUzdtW/U\nWLOzGuLAaK10S68ZUUBlS9qhkkHWJ6EMR1cmmdVogUN2wxxtYAllBAEF2gjt\nTCc6tZ973fWoPL72xu1hWlJYtBCVK20P1JLXr0AQhu+WKS3nmnY67a4JetzB\nrJZX5LHbBMxFIBRRklR7LRNA42/BrHFadW2EOSvoA+cMWAcCmIRF+kE+AcaW\n+U3gUpOAXLy9JTMPvOgewNGQHplDaiXo+EbOO7lP58q6LSCBd8ScvM3QoR3n\nm+hXbmByJhGLGDbcy1sdqkj8HtRTqj78S/By9d9Q7AZXrdlDuO4AsH4LfsdS\naEQcKZB6uPlcfl4a8t+S5MqZQ6cUK/u0AhuQN8a9QKAL/OPcNhyU0e24sPxs\nCTlmd/yRyJQAb2J9cJ0MFuexyuZB56VhTjQ5stU27j7Im/3z2XXnmEm3mO7y\npeRU2aYNB9dBt89R6Liyq2SdOHN6tIFwzLmHeLv75aT1N2ej/7Tg7EwThKxw\nT63HKmmfTTWreg9DGvUCD4umtZgCb4CrLXc13EZbb3yfPN5MHa+2a88QSrm6\noEeK\r\n=9OW+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.47902cf5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.47902cf5_1539898770204_0.1497867744226702","host":"s3://npm-registry-packages"}},"0.1.4-rc.5":{"name":"primer-popover","version":"0.1.4-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e5fd1d358f28b110751c85444125f97e78e028c4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.5.tgz","fileCount":9,"integrity":"sha512-/Ha/YlWVzstT6uY7UNgmViTiuC6aLlPXaJFJGBu6suIarSb8Ns63/cghMZyENPOusFrl05Z982+jOituxisftQ==","signatures":[{"sig":"MEQCIBuzeVwmQBco9VYxtkETaEGVs43pc9Twgm6ys7pfVIOCAiBIYB8qjLNNQXI+KlAWgKmJOLSk1ur9g/1hP593Tu1UGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyP6ICRA9TVsSAnZWagAAXKoP/iZI0rfbGVy0OzQ7U8es\nanA5AT8v75tA1O67DogDBktPHnuRKOsKzCAgoPkAF6ojHx3d0YCUdI3MFmTA\nYysqTGvT22JkOsrx/fL2Ykiq2U8Jbnjlyzz1bpcyavn0o44FSy1RnmMElFGv\n4t+zrUqcS/fs1Hx8vmwGaS4X25E/Nj4J5F43x2EOA0UShDjJBxxw9eQQdMw8\nG5dQb8pYQBV/VdK6LzMs8a0GrMKH7RyWFsROVKJ6d6pP99T6vlsPVtMm8NEH\nG3V39u9s9UuLM5fUpitFF1FMx9fIDiAsFsg/7GCLHh4vhqiEr6TDxZgpBba5\ntDHdUeYl0pPY1pJvP7i0FMtXqFeCxGfgr+VLLRIHCkt3w+CmpvLo7LoIfGG7\n/2s5uXSvPCIejz7RtbDB0nHaUTsQ+dl3x12ofDqq2GQt4XK0Kj4ldLkiDdLU\nHha0aaMuoFVbJFmMdvzUNHIoa4PS3jsQdhdRci3QFnFAjtyvKXphVyfwbrGT\nFQx3iqfnUtsn9qgZVcPpOZF5dpGgc5lAU+3COhpKTUa2pF0uUOSPt6l3sbqj\n+eu+YDqmsEzIaACmJ9upmewka59/ZINNt0tgNZEKDEFqF3tASdnLxRGO6lKy\nank0ZzyTwEsxxqa2WUsGDFtxywh4lrtmP8y4p3AEO3qqrc6oJuEZ+vlHHgX0\nIafP\r\n=ptBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.5_1539899006577_0.9548402284419448","host":"s3://npm-registry-packages"}},"0.1.4-rc.6":{"name":"primer-popover","version":"0.1.4-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"55c5b044fbeb1469d7129adb1a71c1666db46828","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.6.tgz","fileCount":9,"integrity":"sha512-tk8Kj064hNluXTKi0iH2zDdohnjdZtoOi5HM9yalto5oZZ6TAZjVHYKVOg47CLDwQ4BsakKATC/Wom5tI/jNKQ==","signatures":[{"sig":"MEYCIQCx4clRYl8vfj6KCMzXAlAsArrYfv7s9IKt4Q3QGY8QeQIhAMAiS+P6bKzgaz5HWtE/KfJlyukYmtQ/vZ9CYWenpH7T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyQA2CRA9TVsSAnZWagAAcNoQAKDCNWWAGHnUeRiHR0Ct\nZdrNr+U7RDOtjx+OrpVCPrdgE9FkPax5jT07AquBxcZOfA74MGwpSUYKkHL9\nw6xqn0ZWyioiYqwHL3UjuX/MWZSSbhSdrJy//ZaQtyOUC0X3DUI80oKs6ZNg\nW3XV3LMQxbx7qaMES+ZdUGRGP9T4jgt/XRoQoW3RT6Xtu0P7k2m+bj7XrTuU\nGICfIBA0i+pe7KqhSqG3lGes5jmf27blwyilkv+syIU8XQD0ZzhJUIZvdFj/\nRE+LWfYkc4rvtavEGYh4NJ3cbOI+aANPWIkPlAs11VGxEF8OQXIpG2I7LQ3b\nS1yXivoM8ozOne0wBKMeJk+0AeC4yWWq+Gxfvcx65Sv0vfTSqwkYq5Oq/6rD\nL/d+30NPBOu+sL74+hMjRYAmAT46rebTmTFaJ2DK/PXKDppUPwLtLOqAtAb0\naPDsIBwOm4nrZWBsMupIe81BllBoGxb2pc8Q/llxZS/Mx8kfEjYLtyNTvQco\nwSPOTUTUv9HyjT7kJmcIWwnFATa+FRXg/m0GleGiAFgbwz7ZIErm13d68dg5\nXosYFDWJzddplpZFiumb0Azs+MIZ2XdydmtpS0Ev965A56Yxo4vs20judx1M\nkPwtRcipadK35Mk0tOBKSu9T/4LjwavEbOYjsKXRsHL7r8PkPtqVRpBWeB58\n8U/B\r\n=40fT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.6_1539899435800_0.09918315080212103","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e61e3868":{"name":"primer-popover","version":"0.2.0-alpha.e61e3868","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e61e3868","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c481e1f42ceb2e4e30ec7281a1e57ff68b108ccc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e61e3868.tgz","fileCount":9,"integrity":"sha512-HG5Njlt3u2R9ERn6K+vle8OheYz9khqGSjL2DlaaAsGzvk9GtYYy3Xj15MwYHhRk8Da5jTgfhj/8zJrLKFQA0Q==","signatures":[{"sig":"MEUCIQDEv0X0VW60ymElF0wxCMIaym1p6yWyfdguT+qm9EcOLQIgA7WN9D0Fk7EpGv/HhDcUfuAqC+JQfRIFllSZutAos0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyQU5CRA9TVsSAnZWagAAV9UP/269AAHQ7j95os4NQs73\nDrMxk5smut+JgufYE0pIF90JDHh767lxG+m9d3Iz9uVoWlJL2n8M2NcXQ8ZH\nBcFLY8Q3EjNhk//Rllgp89NwAdz3wiP3ED6ZND3YdFeZpztpBFQQTUN+vr0T\nY5hlEnLf5ZDj9x3FL1iDw/jcL60zURcaB8jdQAEoeTX2EptzxcNihwHvdcHj\nXjqKeQrihHrfgs1PViMKovpH57aKgE+rGGO1WhhhA4Xsfq14sgsAzhM11q3A\n7ytZ26hWd5YXW8wmNr//YDbdFhQsi2KmoX5sEeH/KbBjQMuvNogsbPR1ZAy0\nWow5+YRvbRHT/zckBvOHfk5bOVkRD9yLWkvDP40rKR4WN7MXNLy/KV03Sk56\n5JDfLK0kM8m+uHbp6vaglf/qn9/+7GnVK9S6ck2pRTq/YaXd/8LGn1Egct49\nxWgNsseaQg5NhHxuk1WReX89nLlYCekBA6SN4hYQTp7vDnjlRuQQTXZ7zzj2\n1FUVJ1rscPv9TIj7IWeZJ+qoFUgxd++M3bRcUb5IoDJE6Gb9Wn6HqyrF809b\nj0527RLejKlyeNCNyXFkdUt3Can3eo71GhPulKmOGGhCULrRA/xw+uMujINt\nhQJl4gBN8RguKqpMaske1rGZfO9twC0PIA8o1ErS9i4afUMRD4RvlVGyZ8cy\nqW48\r\n=q/L8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.e61e3868"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e61e3868_1539900728834_0.4369286430807242","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c8f9d606":{"name":"primer-popover","version":"0.2.0-alpha.c8f9d606","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c8f9d606","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1b746a8222877abf4fb7a5b81c9c08d870a5dae7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c8f9d606.tgz","fileCount":9,"integrity":"sha512-o3GJITg9iqJrzOjx/BNpmnd7cqCFfU49I2J+5h2kwnS0pZVxtN3knoI9kZkmq37DufAR2U+/ZDE96yppmxwhFA==","signatures":[{"sig":"MEUCIC8g2qg2j/bqllqUljVrgCubDaklRtTWE+GYQVlZEENDAiEApxVVO+y2M7AqN5CP4+wlqUF7bR+RuztjqoktUdREgvQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyQhACRA9TVsSAnZWagAA3sgP/AvpfscS7egcP8evKDnA\nyyoQCwnln0VFM3sXQMxdNC/AuQbcfUoQrZHRJESI2seIJzk4eXQq/K/r4uO4\nzXCKs73kSYH5/P5KqPyniMErpCD+j84y0YLeFJV2o1kt5wUMptCl7EG5OFwh\njoZb0HwIdCgMPlcJS+MUGmcXh0DZGvC/dtZw+6DIzcbnrhBk7ouKP68XBlj7\n3yX73+SVDYCvCef0n3bi4LTAsKzyfnZ0veaBhvgV/kd9HFCA74i7IS1rI1bM\njRdErIAtZHl+uBGicIde9GWKVcQ5dn4XS6S13ZLT1EcoJG9rawh1RPGTK5Tq\nLldeJt7fyJFB+pcCTh1YJEDKWDux6/2x/cP34/Iz+hhs7njtrj8gtA2jGVyl\nsLJQL8UmFmnbNZ3L4G1ln48LIFv3Ru0cVpq89ySywBJp+btgzLHv7jcW9xl2\nrUzf6jREOi9zvZEqBsLftLv9uRz+dBCF69MQgQBJIgfK5ZLI8W+6Bo9eFgvu\nvAR3+sOImYfjA86oJpVwDtRDxkw598Vriub1uHo5Bes3hAHttvg8suKa9qFN\nNu17jnrAmLQiO1MdTcTqnO9bV88EsmrHBId4dDdjA65ENT0Uetkme6LPQWBr\nTbZr92uASafN0XT8z3+fAT4dUDLL57QkCUWnK/hKrmGV1IegmQDFqv8GF09k\nUow7\r\n=jbif\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c8f9d606"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c8f9d606_1539901503458_0.9913360752199514","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8ae934a9":{"name":"primer-popover","version":"0.2.0-alpha.8ae934a9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8ae934a9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9c9d50c38a4a3468c9d115832734da426d029d41","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8ae934a9.tgz","fileCount":9,"integrity":"sha512-eC9ZNjIsCcpsTLgnJuQDtcglExAYvA3G6Wj0em2XF4gj6v/W6Ff/xw9ARJSIy5EX4lqQeK+PfvLYIEmequiiag==","signatures":[{"sig":"MEUCIQDCvwrbO7X7eYsVc80NP1gTXsQXFsCe7AlHy2NVKaM1ogIgMAgc24eMBxkWBgFHbxKkBhWqszsmu9NDkDjdpbhvc1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyR01CRA9TVsSAnZWagAASiEP+gLSEsnodKM9TDwSCkXP\nYBAHhjzPe5nUi70we2qAjwctt90J0594DnpFvwE3NPM69JkRUII6QYerBMuY\n8iWoidfMCjPzjMRqmlzCUNDALeuuhKNCV5raDrxlT9H6IWBp0sh+1yeHxm73\nBel3vFQwrIFpsDpAQYzRonwIcyiV28Znmp8r6lVUdgF/VX3q77ngLM4GqPzd\n3HgSK8QxoCBOni6Nx/BiOmryRdV2XFblgJAXAjpsUc9oZzYxBV7Ofpzy11fK\nkApaIUaB8bys4r33zpUMsUyEN8ByEDQ/k92gxNDcYHyD23R9V+1u9EprVQpz\nLREuCol3k+9MSzTPwcAxnS2ZaPrs4SQzmbbPRpLgKSallBxns2EA0JLuuYwP\npImkveIu3i7UU642TlqAIx5kM/vCBw+Y0Iw8mYfVMKMzb4ENMRQOnaNGu5lN\nTLJ0Y/EUfxMG07EdRU/vmPv+UUh0V3DftPTLxJoafY6wHmgKT3xdoEGPZZLa\nCGq48x1SsOpAxlXXd3JHrZxvgwyxZr2FqEXhTlVsBspgdR1hwKbxGrnRxl0v\n+yB5igl30YE1Eqmj+HF2x4pN6nNw/HUAYm0t/aNqPQsNQUU30nvNyDfKCTVC\noVL8FOMtDYJb06EQM7ocFpUZio7roVGOCNAli1JBMbethR3jk26lpUzODlV5\nEuzX\r\n=5lW+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.8ae934a9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8ae934a9_1539906868968_0.40540470308538756","host":"s3://npm-registry-packages"}},"0.2.0-alpha.fc68e650":{"name":"primer-popover","version":"0.2.0-alpha.fc68e650","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.fc68e650","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5ca6df7621c8017d6147fbc06da0e706bbe5f2de","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.fc68e650.tgz","fileCount":9,"integrity":"sha512-o/SeZ3kDyHHn4LoVpKI4v4kodApE/IgLeZu376sksuIfWQgJl+v7whxrAia6524gVSlFYF9NxTdAYkq5oGMgqg==","signatures":[{"sig":"MEUCIQDBqUd6fFVGlt2mUrQ5KiLVp4mzPpZiYhNLWIVeR/NrQgIgZetSGccPbGKaOVzlXCn5Vir5vqFYrIhdgJFhfND4E3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyR6YCRA9TVsSAnZWagAAsVoQAIgokgSB25PTc334ym/z\npP+brnlDopD1fhZNMD286w543rBnx5LHyxUxxdn1lyybY6F5E3J0o+r2sOoS\nCfw803/KE/iZdnzKC5Fc3vPlkIVOfBtFyB/ClL8re1z1NsY/grDllLpQK6v5\n6gvqsOnKp8cJjbQboNUvqhXcLMhdqGnUCFYNqKqdc+QVvYFOavkD3lfw4EXx\niYtwr7yK0qCRV0U30bdgA2+F/ginc4EPz5m9unkW8RN0tsEhMzjW0W5ZRp4z\nW1/+QtkU8V5nlao96dT/01aN/eLHpois5KDEnscZjiFYQGfpjGVeBR5LCViw\n46jWMMk6qZYoy1WN4pLOxpF5RCs3OKGZeurjPQ8a0rzJR7ICFDERwyNHr0ET\n5fL8Rfvbg0U7hezlMZkd0S+JR9erBkUrM2BE5NLk6TUPxFG0JTvJBtOTAXmd\njeCMYlYJK5d8ksBdqRZ9msZgfw10Tm5KPNPwy2npnTWROOLYeIxNrBS5ZwE8\n4F0ow3y+573kc07SdFHn1pj9uC528MOevL0/JxWR21ZKvJoP5rI85Lps3PZC\nBGEHD+6Enx/+5SmZSnCJ05fTPiWcSpGfxc3Cnhz2DMSX8bzzrsfunoIKebX4\nwFP89Oqnzz7FRzSRUbQRp7UMh8YS1t4Cp2Fuq8EchxVa3VzA7lu+esxBZNsk\nrct3\r\n=RlD6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.fc68e650"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.fc68e650_1539907223931_0.6397245848276576","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3080c2dc":{"name":"primer-popover","version":"0.2.0-alpha.3080c2dc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3080c2dc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ecd653302cd3797b44132a3ec90d4ba0147a19a6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3080c2dc.tgz","fileCount":9,"integrity":"sha512-iCLurGj37dyN4UOrH/opp6OYT8f1auFcGDy5akOhUQW2T1CRMPyBhUU1EaWoEX+jhLJJoqAmepu/PQN874xX6g==","signatures":[{"sig":"MEUCIQDSt8mNT7P55zSRkfgCriEhsoCeKuFWwgElydD6vRadJAIgZwRZzxMMApv/4he5joZeIZq0JFqLw0xqpad0fdtAu9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyVmgCRA9TVsSAnZWagAA6AMP/AkAhhCdjcBkW6ZKeTXE\nfFYGsTBWNNVxZPOmu0MuVdKppEK3RScJhGhuW4xVVRUVNDps9/i++7Oa1/xl\nGZF5b44esA2+Lnxv2rbTRI28Cp1adn0SLrLiv1MJU+8B1F3otX4xKGxSaFYj\nt9/oEUtqdvkEFPZr2u8MIiwZPtvVWsHjYkUzcTUHuI0XAbJEQLcs2fciPsHC\ngJLFG9KYw3H8cF7isrMHJkpc1b1QA4IxaBbU1YcKBNtlHYKfMulDMZg/JKqH\n4j3tGtAt7G3Xl+KmxBd9u+M5w7ngj40FnBWlH9IfiOWqQ/MgUYio61FWO+Ld\n1r4mnDPizf+dT1/aG+lR8rCu2Bg1NDdUvh2LaaV3CGETks3d6xx2ZozBaGN/\n8G5Ctr+Zih3RpwqHBk1q1Xh4OAWKBZWrrV1oc5r/eLofWmXt/Je1GTuKimI0\n5xBEliUib40OtRd4iArTJNpsF9DXDrZfHTMKXKeIZPu1fvKo07peLR2xMZ47\nBy9gDuucHUNLWfuXfEPHunLp4Lshfs/tq1xzNMdr0VE2z3Bl9WJBbTsYNxJs\n+7CnOIZqHQ75zj0NHy8cN8pE6nrWMyn4EHFa7UMrJL6slgyRgU5dAkgYa50V\n+JSwl1lVlf0OoGTTxWFhawZVKO9x1IS4l0/UVGIvEuH9S9ynlkbHoZYE4t9b\nPxep\r\n=t+QE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3080c2dc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3080c2dc_1539922335952_0.2599300905945727","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2f50e954":{"name":"primer-popover","version":"0.2.0-alpha.2f50e954","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2f50e954","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3165df2c91df843315d5dc79280ba4aae7342de3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2f50e954.tgz","fileCount":9,"integrity":"sha512-NLNY7WME3g+Hzk85rsghfDs0Dd86rekYDmazeaWhFlWYJI4755Hc5fzJztdbHCnIlJJx30OwO9M+RUnbqLik6g==","signatures":[{"sig":"MEUCIE80axUoBmXVnCvtNt/ngBZxcp1TdDeUCvJeJiZS8s4eAiEAvFqVcUIO9ddO0SotmFznjn1btd6M+CDMZvhkJlzAIS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyiANCRA9TVsSAnZWagAA04wP/1e+4pEDGbIoCrE1KylP\niczB41Sfy4i5B/8AQ3v/4vJ6uOYDWL4hYQ4ip5eh+KAE4LIaNT5RawOOTN1w\nsA+H+MQWCEhgccRGRsyplMYeo5jIf3SY2T82cMubGCt+RLzYnpAnEPoysOJ8\n23rrdw1Zs9AYQlm0Xpk1GetWyGcn2f6j8XJQcdB/3Nt7W/nAXSTkMi21toJA\n9Bks0ybJXXp0PymXSPt6ERHjhjYJSFkya/tDum55YbKLSiybM3kfdPVumocH\nILFF0byO3Hl/CRwbzpoL63umkbdxM3VDfwNhLvQlENUWKBTVQNf28SpmgQnN\nEV9c3Dg2e+m+W7Sa7xFVdixWhGeGKmZLXOYVFTN6Ry6IQH14mDab8Z2eugYa\nUtoW6cL58sWkFcx1YujcQoAf662iF5Sv0RGSEoh35uAoXoYyHTdbajKDj+6P\nhMeu1RWmZiHfS3BGryuLjfwPcmH3z0E46/4BZZ2tCAL9dumow14xQeGHeKOR\nIrfsSPwjQtE+EQfsn8R1E8sRvG3Z3gcCkkznbz4qE+NXABPVd4OqqI97ljWS\nh/QULMB+U73d4TXAlrsOu7IaCJ/bKcHMPzEkHVBoKz5jSFkr0bpoGaettEj9\n/X7rrbM+qnN1uHsSOhUwwcTdrOCDaXHavUOvTB7VBha+YC7GLm30+6Tku78y\nn20a\r\n=Of2P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.2f50e954"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2f50e954_1539973132475_0.8207796636696356","host":"s3://npm-registry-packages"}},"0.1.4-rc.7":{"name":"primer-popover","version":"0.1.4-rc.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9f1e501e1dde7b8ebda3a4035215e9dd653c1297","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.7.tgz","fileCount":9,"integrity":"sha512-uz2kxunr/eAk6cwCcGvVINFOTSELZGLTMgbZ1o7dY3tLV3PbR9nqgRSIn+DBHvFqxUNp6z818ryf5cJpM0fGlg==","signatures":[{"sig":"MEUCIQDRNa71dlfkC4kG1XMTIFgrCqitrcO9SbexOmUThC+IYQIgPM0SaVSDlcuChiJa6H02Hb+ymMdwI1Ge2IzWeDdFfdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbykhnCRA9TVsSAnZWagAAss4QAKBC178xDvM1h5+SzEoG\nQXJpqJwTHCfw9DnzB4cKi07suDKi9WhaoNBWIK5Itf7VCBLVMoJavAmSjmYl\nFs2bb05WCXIJSGV6A82ZwNZfrggssOqjz3HsM3y7eoaaq5ASy0JaX/dWLjch\nnvNbypAvZ2tRkbIHO7Jb5a+GRsK5s4gaCXM9a4e6H09MXl/VfXIdp+68gLll\nTuXRRwTt+5uVEEWtys0fRtEQ2+NBZyuSYzirKyNglBKpsUFjKtnFpiF3TKHV\nUbZAqsaqNq7eJhmMdME8LcDVKG9mA4VhsSvz2GDkjft+d2i2Z2ayEY5VuXk/\nkkpNsBUaZXPPsX9e2vQukqAP4qSktBZKtrtEn1i+YE5Qx2Kgk3zBMJt9yfMi\nzRa38HEjJ7IahD4lDiQTF6rmX+XW+C13r29BAw4mhXDMF7QS17LyWw5l6Tt5\nukYxN/VqMxoCy0Lf6sNphvMYo/lrKeaOaDHVmbFj6NHHbYbmc1j3Aliq969H\nMs3b26TFwgw4S/OKQTzb41DWWFn0XU7qyQNvDsLJuFRP9CfRG+88qkAZAEtf\nW3Eo1Ip8nTD99dq6pcfnGrdL720xc+nksoSXqyf8LzU8rYMsOlW4iYZe3yXl\nuNi6SAh6kf2FSYPxpy/3MV/YgndQnTs7a9hIwAsqhEUAi1lFMJNaKGMm7Hxq\nrbFI\r\n=WNPq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.7_1539983445750_0.0928529359103425","host":"s3://npm-registry-packages"}},"0.1.4-rc.8":{"name":"primer-popover","version":"0.1.4-rc.8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"16fe718fa64ed581f516b66c9e60f6fa914851a5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.8.tgz","fileCount":9,"integrity":"sha512-aiBCCP1N27wuYcfwQfCknQ0ZmJC50b1exb2q8PJGLcgFJlVw62/cj0RSVDj5ktwSToACQpQKGqURVI1ah3eboQ==","signatures":[{"sig":"MEQCIF0TJFrBGvySWKlSObq6gHwxgvteoCJF8r49s+Khn4X1AiB/ZDPNBAcKez89ROzuF6a7ifx4ZyOHOZ5E+gG02xKnbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzgywCRA9TVsSAnZWagAAcMQQAJwB69a2V8r/NCT2EsDT\nQu04QtWqKFtusVVIp5wSLXBoXa/22L50Bkx36yxNl3l4OrF296MwYBqgk5ry\nqkm9ksvB087kmR1cEDOFwU4cUaALjGqbq4WTY/NijZhcrqDxg06JXqeM+KCE\nAaiyTNL3cBdwFvHyXIXM5BG1Pc0xk41dMSTvK+Um6VSKxAcLy3ACQvLqRlG8\n9CQqaCQvBjXtBg/Y1SB3B1LlRvzUqxVlZUk8+IIPgN1JL/gCAvpv7Zazx/xj\niDQQezsbrTM+Kf05td5DSG9/ur0FcceWD6VAYYulj3lIbO6vhwlVgt8BDaAy\nPxF1cuZQSj1Ajva5aLYy1NEOSFHKh3TydG7BhDZ+JvzmynW1NMLEhfupAGwz\nkV9YUVSFuAMmNPXCRUxl7V7VHZrwqlEZFwSJuRPji3WBYC9QkAKDfjl0i5Ec\nIoTd2smkqlHjBnZ/EbUaMZzQmhM8xtxvpImjFfEHrJsUtwHlGRUdFkRo2wO+\nzR9jkptomc7rbR/mCa8B7FpNxVZ6Opg3JA2/n/TRzZ0xctIsmsuabK0dtoLj\niIh1ZKlliKB/M/3kxT/SkxoASloa/gbHugPBMH+9wwEw2sS43wXa/UIQQWq7\niVn8N506h03q2hwue0m8hNnwYijFmpNeegGJcFvME7L5ZwwdZgZ9mdVgqye+\nQj2a\r\n=43fk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.11"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.8_1540230302250_0.49488152789924467","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3f5d8a65":{"name":"primer-popover","version":"0.2.0-alpha.3f5d8a65","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3f5d8a65","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b80eac7c0c7bdb855acc0b4a0c6d74bcc7f2c2d3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3f5d8a65.tgz","fileCount":9,"integrity":"sha512-vtH4WI+zni+nos25CPr3WDpl1KL3e9ibR+HAjdyheFKNuVVz//mwlSw24mfE3CopQpa6/eBq3/PfJL0atzcXBg==","signatures":[{"sig":"MEUCIDx7EutGqjyJDArduCEu7Yx7FWci5Eu9h6l7RhSUpqbbAiEAzRG9iYyJKQX6x42isivyqabERhn7iDaxXFzbImKqlIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzjFuCRA9TVsSAnZWagAAJdEP+wTmxvVF6cfITBGUcqVd\noiMnQvZhIH51PwspajjjCFuIHdFfus6SKXa5GMd8NmnDxLxCOBOgo8ceZXVc\ndvpZRazSP+rYfGufUCbYpArPY/iJuo3KzNawomwklDOejyWJSYu9FRteeTr4\nvsw2s0rGAboWDEDWwpoNhjvcccpTpJVkjP8ZVwVPmVuYMtJA1TgiCJWFH/K+\n7LnuJFo6qTeBBs+7T8diCVrqYStJT0d98wk6oxGI92lqE0PT7NSGQ/6ccA4C\nu4ISrGxHtxTTKfjo/t9oD2x6160L23QCPpWEThgDrJj64Sgju4GSNI2phRMp\naSFTos9AdHB/Lh8cH//ympq0W3SZ6k3HbyPrIfj9uEvPQFDwRO2muUOuIBhR\nuYrfmbWt7YPwZcgRHkOB1jJCg5j2+rvuNvff1JHhBhTtZ0M749yFASV9mlNn\nHJ9XaWLl1x1ga5BbLBkRqXlei0GeLjUGnpDjacDctDsj5bq7JpLnZsmHtuCf\nKEbhl+tcXUhfdCuPFEZj357AoxJoahsix1QS5elNAFTVvc9aHh6qd/+XRkAZ\nJDyqhbmtokhdSyTf+NaRllw0z76YJXc9t8KgmbMmD8E/qneRXbGw2wPZUVR5\nUl2OWotflPM7LOD8MMuYDmziozUzdBQ42NxN4Gq40Lw+2OLcLRuil1r2PefW\nSSx1\r\n=Uieh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3f5d8a65"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3f5d8a65_1540239725969_0.6200889043399913","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ae5b46b8":{"name":"primer-popover","version":"0.2.0-alpha.ae5b46b8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ae5b46b8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7ee81f3f22a264bc4c9289c48df48bac47734010","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ae5b46b8.tgz","fileCount":9,"integrity":"sha512-1r9Tuzk4WfJsEn856/tSfKRVMZWLXcQVIR3TV+PhbGEKg+IBpRfVN0i3/BBX/lnYplUuyQUfhO1L0uwsy+/GRg==","signatures":[{"sig":"MEUCIQDJ6SHVi+/IkHq00qUwH+qp9C02Gkri/jQComR3H4u/fgIgIJuEtKhKv1xSxGgc2kY4DOBDMtFMhLw0IZqz02ByPL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzkrxCRA9TVsSAnZWagAANcEP/AodElxjtJGnl0+nnHyB\nTStq9S45U89FFvtE/RWobG28JRB6RPBYyfsmAubVXpahUTC1HsICSCKuVGCe\naF4NQU0mJB97YN3SHu6JTP8r+I2qQKZhvydineH5+wqeN/iKDrZJsBcPvmYC\ntuRUse8yQpmwSY242sld7CJzAn/f0j+sVGC/5vX8MhoGSVsDzyLMznKLB6wf\nmQ9wObcD2lq7rOMdciFwYFcYbw0gU5SI2Hf5jMwrTzT7nJqPbxTxDkjpJCVJ\nZ/6tWdW7NV6rvgfcH74D2MZRB8njgHIJqN/hTNV9mRDHlpRvsdQybJaETMxW\noBlEVNYJWK8soQUi/akZriFUqNKHnBznSJxbDqbS3fpM3pv42+I8fMQDH7C1\ntH2+yrafUK1/fxEFMK4iNVAS9BrMSnbCV87Q2PpUkPAoefev+C5On5/lqCwd\nTD3zrOA5WkDoYE5K3VxatUJi06Y/11NonjDUYghjdRQeNAg3jyAsc+2QD4Fg\nH4kTb/Wv55jKs3G3X+aEJUqMTdRLm+T675dDWiu2xcyyf70VrjZKcq/1SriB\n+lK+P6KipCjktg9WGi4RFYTqXF7CeY5hur6mUzFztUOUv3ieKykEo+3r24k+\ncEXzBdaXNxx5JfqEVpCJuHA+ZBZcuZr0AkB7mlxSiFJ3MVWxlhkQ4dy7Fmok\n8ti0\r\n=zFlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ae5b46b8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ae5b46b8_1540246256556_0.6135952154556703","host":"s3://npm-registry-packages"}},"0.1.4-rc.9":{"name":"primer-popover","version":"0.1.4-rc.9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.4-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6f94f4f1af53c62ac41c7eaa5b490550ce69a54a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.4-rc.9.tgz","fileCount":9,"integrity":"sha512-o4q13UGwgrNtG5i6okD9xqwN4WwSB1obDtJwjbMc+mMTHrk/n95pD2pWtLyhlDVf1sEaC2ntY0nQ5Lww5CKUIw==","signatures":[{"sig":"MEYCIQD8NGfXrglXUTQqjj8E5J7l636J62zqHBQz8XDSVnMHzgIhAMCC7vAWf80kc04IXawmPxv0njvB9e4mv7k4c9p48QhL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzkwJCRA9TVsSAnZWagAAWLIP/0uIF5qLdM4prT5N9N0V\nu51VVEv1YP5KRNp7WtwtvJgoogxmA6uF9qNgiULex21Po08wRQOaU3t6YjQT\nEJjOcrtZajotdMmJdIFzawEW7dTkLcmGRxvpGnrmetVTYgODS2u6SUS0PWRl\nhDz63ZRmVHZrZtbCHyDcWq9zdhrBowJqoA07pGFwhqk9ouLl12O1mKQu7h4l\nDCDe0WJx3TGzwnVu0xLmBVcSDbE9J+i2zaEHChqh8yPfLSIuw/Q5y75SI93z\n5wvydRthe4e42j9KGQZ3uvuV9aGIHcwJf8ZwFNUCliDlxNPz8ASEeM17bT/7\nZjOCnOu2nvDbwefTJtQQZ+nrAIPcIsSXrayMfbMHCJsBuUcCURL3e3TDgr1G\nz+4FDGt+/nRY2rAVOe6lfKwrVcmZ1Z7IcJgQpWKKq++DopcwRcEGBj7q8IWi\njSpj6GBDyXC2slnVC368XJ/e2XSr2htmZZ9MPgY/brBOT5tWySKr7uQuGE5Y\nUzlVv3YCzSQBySQGffcc3jZRUAuQ9ZodN8yqNW35Ad/+IsTZpXVq6GliMEbH\nRpg0LCaxwh4ViBVL+i2N3taxrGIgPQaftbgxK/FHw4zaP7bv3U4/adHg9eN2\n7LFQ09on3bzY1iOTJjWQNq8ZWRx7BTFM9Z1qsS1o/fh4JSDwqg0r7yV2dyzT\nYQQF\r\n=24Fs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.9-rc.12"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.4-rc.9_1540246536889_0.004465378455314584","host":"s3://npm-registry-packages"}},"0.1.5-rc.0":{"name":"primer-popover","version":"0.1.5-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f12f1d36a39bf7a79795e963a484971f4dab8a8e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5-rc.0.tgz","fileCount":9,"integrity":"sha512-u71lyMn52wgB4q4u9z7DDJKRicegP0/cUFqhXSP99IJYzFscyHJW8Xvh0wGKfWM8+ZSEffJ3rcZCaLt9+vVUPQ==","signatures":[{"sig":"MEYCIQDLVFYmmEjcL1nbo44i/z1pWRQMOt9iAnlVWV/njkrSOQIhAM4wHRaD43KbgJR7f8tOaUrvK/ZizDwQFp9SvhJdnKdl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzl7MCRA9TVsSAnZWagAAeVcP/3KHLMtX/NMXz4E0yCtm\n8a1LqHkwtqquA4YqbFFCflu52Y2Az/KLJ3jjT099eUwyHgf6MudnGLgQex1+\np3MDlTIvAi7naT6OM3SDJ+ONrshprFMAGe/PlJOQDzKjXedEzIzNleZQi4Hc\ndlvOM6wSaXou6nucbN3hk4GtNMkykEJp+V38eBZGo/jTDzdNUcupYryhoHno\nvdZI7a9BI0b5Z5wj3Op1MvSlmF6vk+IpwNfmf1Ga+E0HJLcA5DiZYnfcX+Vw\nxoZMuPxLwk17n2w4BESPE/3w9x+LuZsbG8d6xluO56KjvUQVoG3d04/gMWO4\nwseLO1hA6kqHXKL+bzFNv5kiMoqzf8BgKF3cwDZNuLn8+xtA2ysP9KedCOeo\nP9A3Wim4hbmNHFpAOd2afA0Udiwyf97vPjzkakvWkfkqYIr++L0AgLm2hLjo\nM+27qQKdRDHYFx0iDLQrGYkfLT8IPogJOMnpkWV1f4PspuTvlweldf/bpQDg\np8EfN/wKpQkRHX8FB9XqK4NnLjHtLwUHIQ+ErlCdVU+c5TpGJwc8x1Oavage\nU4hvx+zHZamEvYs6Xl9u93tj88fW6sDtEgKqWTrje+RzDpU/1JkfijJh2UiY\nxKzP7Tdhi22l/YxGbBxlxmS4xO0kkdhLzbHFPvfo4DG4CDEAeOMoETd00thG\ng1Yy\r\n=Yk9L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5-rc.0_1540251331166_0.2039422569095315","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d1ea413c":{"name":"primer-popover","version":"0.2.0-alpha.d1ea413c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d1ea413c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"72bf99c573d40d1c86b33b5d3e08b8948ff1dae0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d1ea413c.tgz","fileCount":9,"integrity":"sha512-2tPtbBE0Pj0qmfYtRPgnpDY6/Axuru6yGOqjcHEbYJftyAgZVMzj/pI//wPdr9W+bezVpPcwqy3SVYslI4nW2A==","signatures":[{"sig":"MEQCIFc+WvsCQ0dLWelIeq5mbnZUA+k8I2aJAF0DabQUHGjFAiAB8aZ8hz1E28oQx0+0dpOEB9d2A1UDFQNTw72OREffAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz1zNCRA9TVsSAnZWagAAMrsP/0INNpFTyVi1/1MmXi1S\nQZMycOAeNJIWzTwA1iym/oDmw9a/6ikckPsvpZQaz0A5HpdDZ7quxMvqU0Mk\nhKmJvxy6vdTf8R9FAueuMTM+nEQT98Y83nksOFZE/msTP/8/lYYHtZu2QNNF\n+PPhbV7h1QeiosXZ1vKaVsJ5ymibxoa86oHhIPuQgAkkhA66UUfOfCbkJ4sv\nt4GT5kWEv6et38e0tpUpOUtU6qxUx6Z1Q5GZuB3N6a16q40OuHGvh2o9jGBA\nhk+U3jPXHkOmayPORDRuZLdPXSMCJiwebcSLZ2X3API2kPnx3XvhEOeaeJHv\nH5PW0+oePaI0nNDvTd2mUzmXUMvdGEJMqR8ozuETQfHp4h9GJOt3w67YRco+\n2MAnT+FL9bsvIIz+1aPntSkFv/CqEnjyUqbyOkbGJWrY/IRo0ib+UlqGxus9\nKZ7xubdXevzCJ972gWti7G0/pUa3SVXu7ceX1oyReqUYKZ5x+fDEgUkOJRVB\nClVdFaOJtqa3B9GDYuOE4q4Ok8rbjnzI7+2HfCKfRkR051Q6hfba7jBNjprz\nm69etogv6rtb6Nuu0921sSC5pABdN1gn+UPvvFN5i9eLPA6F00IofGcrel0O\nZHCqaINTbj201ZA4UpebEeuyUx+4TT9mTIg6rNDFGrrET6lbyL+lzB7/z5X+\nYJI5\r\n=uDKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d1ea413c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d1ea413c_1540316364789_0.42534649292423876","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a9f6a8c2":{"name":"primer-popover","version":"0.2.0-alpha.a9f6a8c2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a9f6a8c2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"135e37b42845e9d89df0555ee7cf8d0a5947fa99","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a9f6a8c2.tgz","fileCount":9,"integrity":"sha512-AaBb1LvoBrAgmIeCzfmiLeeka/mNAGOJW1VepsPBJtx20Vrit7oa9YXGcE3xAww9GC1LYicff+OnPZ5mgHMw5w==","signatures":[{"sig":"MEUCIQC0NmpToE30D0doKSjRCAU0u+KDlhypQJdzqZd8f+uYQwIgAzYpIg8PMn68rrnOIjFzBlphoeHblLKdPIO+Y8s4E6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz2LACRA9TVsSAnZWagAAZvgP/2S/M11T87utCyPYsQNC\nJDgn4M7nmoM/byyUyDiYMik06NwqqkKNFqpKthag+DIJZSwd9pxU4r3GrsP+\nYIhlFsQoZsiFjYQ2lcIxKafIvFGBFL0D2rBYFmYAYZbMRtN8LU0R7ltq4Ijl\nBMVNXSK6hYp6OrKKhByKFrj2YeQ9edZP5R58FuB/DlOjHoW+J/M7v0sSIrbH\nwT/qS94az4soO4H2DMSc6/YgqIH7o7xLsD1BtAEKB62iveyxqK1+jEhOT8c1\nPKw6CosG8IchgxaocFboJRBFQumv7gL+xAKfmHVLXrfnm0IqMa/Y9LLY0o7A\nMeu+mQNCn+1wrfc/NSUozALO0Dpt7zc0bUCxaJCF7qtlHY/JTqwxu5XV/kxZ\nk3xzzC0mJzFBGH/u4icb9nb+Z3SWd22g77hK+nba5WoruPTzuXh2WNnam0+6\nm5ZNscXf02dBZMcHREb9kNQvJht3l/I+F0nVDY5rogKtzlswDBZfAgbYaldM\nKkyLk42WP9UdblY6+LunJryfgTam7lONDSY7aOnqn3I5VmRYA9BCvG1SHRSP\nCR+vkaZjnAomOz7TWU7VrPaZ3JBr6QgI9VhpcIhARa4PQjhWqln0tptx+6dB\nbrPQ99lEHT5JBuUaj5USE1Jaa32VFI7hjpU9MYx/+i897tr6GyxS+wtAEfT6\nQe8u\r\n=ctQV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.a9f6a8c2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a9f6a8c2_1540317887009_0.9925846546797632","host":"s3://npm-registry-packages"}},"0.1.5":{"name":"primer-popover","version":"0.1.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"400475d11d7222acadf5aa354189d73fd82e7eab","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5.tgz","fileCount":9,"integrity":"sha512-1tZ/memsFthEHrgp+Cipk7PlzMDBwShp4Wip/H7pASJiZOdOZdUOGdaDZgu0ZfEJ1138++mkeUuEwprzhc1/fg==","signatures":[{"sig":"MEUCIGYH4GrLOrXnQUlaGDZliE7pLGipGKpTt4Fwcr4aqty1AiEA1NBO0kHhpHGRyabuoRq/Vi76nNqNboVPrh3YtUFFwPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz38YCRA9TVsSAnZWagAApBIP/0sE+S04vyY4+decaxUx\nzC+4EXjhg7r7gwTDoD35dLD+C831lSrXbMg3989E1wwxZWb3s8EusrXI2ErT\nbWuL4MPdfYVxbtVN7sfSahB7vRZ0ZUwImq5BfF6YSoFKCcZTOtNNwzqjcars\nyAtR05qbeJBlV6lplov6VHVKKgZKS93k6zMaK/1gAl0UjD+K+G3QK/CtWFcH\nkblZN64lcCWFqJ4gpVUxVurc/r9KGfwHeWKsaTBMAOR1lfunbAQDKrL9wJcS\nxa6dnYJAGjlewrOPRBFMrXN5rwA5VeDRFkkTaeu+FvgaUFlDmFfu3XcpHSeY\nl0E3N66cY2Xwn5BrAZ5hPiu4U/GkgriJ496r5r8DeNqG3yNkfl8al60r9gjr\n262OQnsXcFpKgw28TlFnyOuZq5NgYFWFiIgCgDt0vTMvmumyAxfKIgVHPPHE\nqt6undhRKKTsd76ppX8FXFSg7qC+Kf4KCFChw141wgaT/P6SjWi03XT3ryCV\nJLrvLeBz3czH6YB+Nf/QQk0XilPNWyQnkhmMQkTuk8wS+cQqgJtV8BYuXm3m\nuTAtzD9tlYl4R3Sl4A1d22TTZoGdDbUfavtEVJQVr5CR/PWKzwDFcGZLiE+O\n5bNpS5ciXzuencfaOMaIWeuWZy4KY+Lgx5MYEup9FSAmasyVEl25WTFLaE+Q\net8B\r\n=flBS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1"},"_hasShrinkwrap":false,"peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5_1540325143428_0.4817137130073903","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7dd7d142":{"name":"primer-popover","version":"0.2.0-alpha.7dd7d142","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7dd7d142","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6c212b59eae056f7810fbffc92fbff0d935652f3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7dd7d142.tgz","fileCount":9,"integrity":"sha512-biErzcvCl+kWZv2JPh9I+7JAR4/XkPGsmJB7VXVtktxB3ZQVSRWQgBOUMOCicBhktxpVqO3kIEjJWmOXW9BzQg==","signatures":[{"sig":"MEQCIAGMwZI8SkjWnGT8SSnraXd5o6wFmAUOqy1KjK1/cTeJAiBYT79zsrkGAck3jQ3/PGgz313i43Zbh5Xjd0obubnYUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz4NdCRA9TVsSAnZWagAA0dQQAKRzNkkHM/iU+UCIghei\n3vY8YNRZGW27QZhV9d/xDWxHewejuKQukP7EpdnF0DOWALtRICiR1sKN22pi\nrAxzEDkJllJ75j1HSD2hYjvmz8ZzYAPfAEfx4TtqF9Yth0C6KPMiZefhQKsq\ncVBP7scliXXk2OHvonHgZ1Z2G8rdwfZioKB1Fd/Vo50NTUMsZv+Y7Qc73w0p\nkBZd0NSUkafEdZstxe/IocuAHP0Ot36z17fWJ8gLQt2dnBoDAuOe3axVNeLY\ncNRaVUgGl6wDrkTLcCyAL7VuOQbqd5uHWBy/u6fhDJJsiCFwQmJktc6KxaVr\nKNzysuaochyT8SgMfaiv6mqA7BD68S9wA+wDD/DoT+0Untu/XLY/T5RQf1ES\nbiARwiULb1GfQFDbvSrvCY/C8cCBdu115HKivGPps1pX+5THpNkcsDKVan5M\na9HpXO7+0g1Os1QKHkoHLnblQO1HtM9JPfWIpAg46K8CxBSaVVMj2TKpUPwC\nQMeUHSoN6p5T4yQ3n62pBJM2bBEtPNDG0F1iI8Tk+wVeGDYZnIVvhnsZ7GFo\nlKTS5a7W7Q6JtAEDnnliTnXLQqucV4XE3edSLZ7Hv8bMdBNwmc7gt3LCLXuq\nfV8xXRxypotadM1KVSEB9osWtJxF/p8SYB1lX18ZYlwxNFJsigH1W93n/jJ+\nkvcX\r\n=TBbO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.7dd7d142"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7dd7d142_1540326236515_0.48498072082781274","host":"s3://npm-registry-packages"}},"0.2.0-alpha.77a05b96":{"name":"primer-popover","version":"0.2.0-alpha.77a05b96","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.77a05b96","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa8ec94412ac488d8ee0cd5276f776b3001c990f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.77a05b96.tgz","fileCount":9,"integrity":"sha512-op5wn66gGl/Y/5dAMLJ1yItKWNlbotklYczWpg2oPHicbNpirPVfgQwvKbJkbNtwJa3B19R8IddD5IxU66pn6w==","signatures":[{"sig":"MEUCIGXGuqAla36LvBZ3GrmXPCnvoqGEB82wNPFEEC0DPvgHAiEAlyZXx6fn8DaIT2ktpmLJEZvrFNT45kLSTzLvQVM23aM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz5A8CRA9TVsSAnZWagAA6AQQAIGAhoD6M0IQBfi8vAD8\nBkrj2Y529dLRtWFWC4rcFpRJHT6pAS+qTAPrjglzJW1ctBJWFykkaWy3VZMV\n6N8ZEL2vzF+m+n546i2/0lqtcBIaPYm/sUQvAAhEKOZG39h+Q/78cP/6AysR\ni2XWn1h4KDJCv3HXyDSbToY0O5r6zazhSPnmGnTNSkbN4Zplbb0NV8o1lBfD\n9bqA/GEzmhf6ej674rs7joOznByrPNAGgeU2cxv1GOZLIlgKyqF7tZV/a1kc\nr9c+4kEnWf/iDNa7Mk3zT29pHWi9cAJoHTj6p8aYM6CBnD629i33HURb6CNb\nE6x95ThYbFNixxxoP2OFQ3s4U3hRSGTiuJDsPaY4ktf6K1Dy3YDlE1aP7hMF\nn1fAeBwkdYqCtUVqixF9o5V/p7pRbMQK4+hj7qEEk+QUU/XwgGL/qy21jXqO\nipL6yFdxi6G+5/w9Tvxl5PYQu1hXyvs1CUodN7ZR71MXB9ZACcG8OKTTyIvP\n0dVpEj7ma13RmdBHFKyX2BINtnhIQE9SYR6ZDgeLpuS9+WdPfLIr2pXIy1gR\nof6n2JXXmAckKrjPDB7TTXDz6tTzkX+M7/biE5BW5AhF89t4x4FMi5thZK+/\nx9Fy2Z9I5gS9dG8d5MndOTPb8+i6BkCU7IWeoeZewFrNKfv8D3LQx9Ya+msX\n6Wyz\r\n=JYvT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.77a05b96"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.77a05b96_1540329531672_0.06986550519356127","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1871e8e5":{"name":"primer-popover","version":"0.2.0-alpha.1871e8e5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1871e8e5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5061c9d320f113074aa8f385548f380c3e3a9990","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1871e8e5.tgz","fileCount":9,"integrity":"sha512-t1BjfIAU9IgCMUbapwYVH1NLCaZkXArHXXothip3XDLHCQcAf/VcEazLUABoX6H2qicWLLc1+g/hCxPkpQGpfQ==","signatures":[{"sig":"MEUCIFA/L0Ya7tVM6xVSIfAXQxTn1DKIxGO6gvcrI/JovSTsAiEApuyb+xYLH68T9GvOV5Hv7+qaEtTVhE9KHgrMumau1mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz5P7CRA9TVsSAnZWagAAkqYP+gKaEMyrRuvNgH9E5vHX\nHUNZx6cuUWeEAiNnLbtry7tiXmSOH/dcKybf95o5oDKwUk0x/o18MrR9kwbr\npAKmXll64qsMwpS4RpvfphFVPTiAbZr9V8+OK5HeypRs7OwtdAUgEhACYIbQ\naIH0/l8t7uhRLOmizTONisHVc/oorBRVqYL2JNoBInHW7ixF4VaqE8YHbw2Q\nW6MX1rsJ5srLk0L1hp6poLkuBRMhYAnA2zNxGPJkKro98xvew38lhWrO9pUy\nedWXZoQjaCQUOzzc0+ZNly0aUcw3wCCJCLblsb22/W31X/oL47I8DO8Eg1cD\n7Aha82RgVBtBpS+ZVy5CV8anXlQGMZU9qXI3j73IKVK5FkMJAdUc6Vzg6vZV\nJ9hk/m2j2aft9DgByeRgDw2NWV/w0EohV/M/kPD00bHxWNd3dueShX8yw2FG\nfjbo5/DU6aaQm1w3VjV+nZP0A/1VjaZYSbjzNa5zUiZ77JiOPAPTDcYYhakq\nfm/ITgqEHjbHNZ6YumDMJlBNDw+hUnCSiKplwZzan/8apTDowcGuV0BJswgW\nPcADgBEM+Jv5j/WRFCRbiAACg7ptaswlhUcMFhe9sv58w3ZExGiLUkmw4Dkv\naUzqObU/kKP2Zlk1RV8IlcO4xI9b+m390Zoe6ZXXX7B0tkTmulQvbzkNbDDu\nrG/d\r\n=DNCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.1871e8e5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1871e8e5_1540330490898_0.9674230236420143","host":"s3://npm-registry-packages"}},"0.2.0-alpha.44b1636e":{"name":"primer-popover","version":"0.2.0-alpha.44b1636e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.44b1636e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1fd92e4d40c3319bf0b55163ad3c3fd92a674b47","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.44b1636e.tgz","fileCount":9,"integrity":"sha512-jRGvbk+a5Rts6WvL+fwbnax45v7O6i/7tCJqgKhJJFqL2sfYIsZ5tgNhuMQt8IcF1gFtVJeNWWrlcOhhEgMaUA==","signatures":[{"sig":"MEUCIEsS0G4tygDsBlTm8RvoMEhJXWYTZJHLTpkc3DBvuW3hAiEA9Y7XQzAAGltOvDv2CBFwIhMR7FAN5cBA+BepY2vQ6TU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0dyaCRA9TVsSAnZWagAALAcP/0WA0zq4kAvH97I9p4Z0\nsx5WZIJMimh5Ix79FH+zAuXXEUII2NFu9O+03tjqZAPPX67ap/otXbDjX0tV\ngDOTETT4UoeAYVEUJSQtlb6aMPcC1SHlqdMCJaNhzxPz8M1Ap5YrPnMrT+yK\n1D3QGMSPkZHK4vf4qpqCbUoLz+jxuahGwhSM9Xl5QKvgRBlL/8Eg/DiVPjQT\na9Sj2GSVz69bFnITwbD1dnCL3H5RBpzrbCh4Ede0lp+P8NIPkStpGPeN9CuM\n+67WtAbUnRfWXhgQQgWjIVv2KnzkbjOpFNzkGTF3dxnpYAvVnXEcK+TuQyUT\nrPtypVYzsNUIUZpkry8FC6MxFZ+3Vve23CWRaUSEvUbOGU+4nRpV+x0crUtb\n0f8wEpe1oe234mJvIHibTjwmx1NlcsBIEfv5/zIGdaeLgcf317VppWRTO/L2\n1BW6c3vyC8Bd+NBzMmmqvPQLwfsWIsOL/Bxfusw0xzc7jHOCTGwwnxF+ncKP\njxjJZv+IzlpMs8CJqZyuNp/S+cI1bIX3JHDaknPNmBg0O797R2FaIuoPyjwn\nTKaohWANJmwcUJY8uqgJrDZQc0LQ2X3qmZtZjiYLUro40MTThqAdLGAtD2mq\n8wSL5bPxCc9qfEGVvFjIMp6qkOe12XKNiffco+YDgmXFAsMvdCywXv6dewAA\notrT\r\n=iC/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.44b1636e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.44b1636e_1540480153264_0.8690187948653654","host":"s3://npm-registry-packages"}},"0.2.0-alpha.260b88e3":{"name":"primer-popover","version":"0.2.0-alpha.260b88e3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.260b88e3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fb21dc186f2e6a6f09a9fe36c53946dc64829ef5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.260b88e3.tgz","fileCount":9,"integrity":"sha512-x1qXGvgry1QoiynIP7ArVRbSIMZxB+xtMAgq1zhAgX4An2jOoeoMn5wj/+Zz77pWVfmbpTkbtN9MVRIZoPWx2A==","signatures":[{"sig":"MEUCIQCwg0whkPG7pYiNNQZHQZrI57z1yr4svhkBkSngE+biKQIgBcuagoAbhFIY4LA/cR8/4sfOUf4pJgbvziHVphV6Xj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0hz4CRA9TVsSAnZWagAAw+sP/3AhH8+WnpHF70fZA00z\nT3LzqtyItdN7fiAk5PM9Cv+XIJzaaOnJFa5dkr30p4YLwkvyl5b3bNaFOxTf\nB/QnFYXbbLVg/hg62lOFyFGwa2pUIgL1QRDNv6ISpEq5wpHadAXRMesg0uP/\nLkvLopX51k6H8lFnJb2uFFUxzYeIMmwWxh1J8Ez5EbXTBBB2MIQoPqDFSL80\nSj4KPZLdQCWK++mk7VMiDdL2HDdue6WHJsntzQe9otdWGnspnb6vfvImMTS6\nzCMkSd472n0g+CbD7EQAlmj/pA9C/qrTqjc+V2/l2i9EHklZ+r6s8RgzYFR7\nnVCcEE4usnCZbRnAtS9CHRJ+Hs0/GDOfumo/xaMyCw6VKVLcBAageHg5pnST\noWpSJzSjIYaw6lLYBYyUXtEid3nNqLjcq6KrpXv/z6INbNxQt63HUJAkONRN\nm2m9/aeqwDMBwgGB6m5afOIkWWCevrc99vqwGpvWGvLDwnPeWO9cG4F10IUo\n8al8OxZldKYhdUz5y58KPYWHOgY4e++BvJGuu0zLLVlTgs7IkOLSTfiSYJGn\nhNd9ozLm95jysNy+O/cJ0yd7xGgWXTEOmp/P4yGg0OjY/lTca56xhqPQJw0Q\nlyfQQB/C8yJKv0sKN3bYQ1OmgNoW/xQRZtEIjjwQ6KFmmBbVB7/ju8YAxHn+\nsFrQ\r\n=jg15\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.260b88e3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.260b88e3_1540496631962_0.49173481729027","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d94059f1":{"name":"primer-popover","version":"0.2.0-alpha.d94059f1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d94059f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4769cb167a40513fda6ecd142304f2a5af1a6f4f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d94059f1.tgz","fileCount":9,"integrity":"sha512-D1uets/H0tLGT7RljhHmy6YwzspN/I2C5b/xNbyDsLoXdqetEo2omG4gXPyjr/fk5Pu4J3ij7x30CWUm7EBHUA==","signatures":[{"sig":"MEUCIFzliWElT0iR+mYFS8QRpMpcYrewG3teXfcltCiWf60nAiEA6P6gu8rXNMQVeISf7ipeMs4jWH5Abp8gCaGEzRcxudA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0icVCRA9TVsSAnZWagAA440P/iDM+3uTgoRqW9Htt63t\nhD8Pbd983xBJSt2J/KHRmkCloptyGPwp+HfOuusqkGFUE81Hbx4iBChiuMmR\nR/i+62vB2y7+A8rSazykXGpJRoLsUHvn9zd62ktkssP0fKWBqUGjVswIApEb\nPsVDfNvytfLDAEgIMBUVjl7F5uo+netHXNmNrJBWeEyvtx0q97JVjBWev+iT\nrmW/pJblaPBGAi++Pode0Plfe7ecesFBXWo3fBu0+MpuvperQQPMjv37alYt\n8YYR4oCIXpRh8Js+vJOPcJBlLUHPyHk8lzk89r+PylraC51Z0jquWucOBeuN\nBxHWl+TdOp1M2WxFxzvaMSfP3aEiSm0eRIMOT7alYdEzLec2m/du6P/k59xo\nckt+E+5DnVALvhC6v8GjrcxFFkbKiHpi0wnvc5+D9n+qukLSPkRU83lwVjyP\nBcaYnhjYKScRytbRZQAJnvIic9PTSdSPMGKyx59YSslRrZYbVOXLye808yZE\nq1yQ+7T2ybiJmaAOfvW169w+0sKqK94LkeQ8YoNTjFhWLVI9NcdagS2GMEVT\nqgpGMC8hqbUrOYte6SycT5a4PEPY3oGDpv1X4y9RRehM/IvGhGXYLqIOTqJJ\nRvCXFaoiIfd8LC3fLq5/m7EJ3JlacYw53r6jXDLnxF0PRps/Lri5HtJRldbf\ndhKB\r\n=KeCZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d94059f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"file:../primer-box"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d94059f1_1540499220976_0.45454765963870347","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1d86b11a":{"name":"primer-popover","version":"0.2.0-alpha.1d86b11a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1d86b11a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ee54595c84ef5dffec3030ebe5a5c1d6d72b89d6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1d86b11a.tgz","fileCount":9,"integrity":"sha512-sk+AnyUfVMkLmuJZ9LnhpIm/bcwk/YI+Beq95tIDnz+Mw+buzGB2vtWyWjgwraAJ3fjECL20hFu0cnENrCjePA==","signatures":[{"sig":"MEQCIFvf/z7aOM3SnanYTGxm4y0fkwD3GJ2db1v9cWg35PkGAiAhV02sD8Fvy2GXZa7ZForKhcW4io8axGy5lDOkHEs+tA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0iscCRA9TVsSAnZWagAA3gEP/1KfFkbRG2y9Osyczeab\n5QX06Q7AUgfqju/2iOozYaq4q2LbHDUQNF0WiQkTjKYX9whRE4kGGe/ppsGF\nf7FOryraMRjWNxNo4kxCq+puPA6mAZIBhKQodNLIqtwCJIzWpLIHnGo+0+RD\n5f+u9zLeSEy0FwWrsiBDSNGGCXPxDDvvYrTkHDl7vIzsJ30w12K9LPYPEWY5\nu4I7Lc+BVVvBY9Sjvldrj7BaHIdby2+n+W7Vz6YH/fru6nqcXHhG3ZqLo5Z9\nrLHeBmFGhlsJJx3FjsrctL+IrOJZk1aFewt5FDYg/FdcWNi5lcmBwUiH8dn3\n1PAH2KCDxjFAwInmhbJfAMR0Sju+v1nv39xfPgFfBkMtcDMXH5Cbwd1/4DcC\n3u3Ps5zC4M4IfPohGTm/zaGu0FU2YyQd19HnJjBrwGnnfQaaLHEPf+WVGI6H\nbafBsngMAZ3UFA2ZjoKSubO/6IkpmdPM7zh/ay+Dtp5r+BZGX1PUl2y5UTbZ\nd2USQxawceBsUHsKPt+WxjocWagHi2cAeYwL4OjeHnNMhOtNFM8URTq8n+Dw\ntKljYWF9EaDgwWMt7pX9yuD5DX+dxU2XWaeU6CD14Flgi1LLJM8WmYCUNAmx\nOrr3OrpeJSV01AKscvep4o7Sh+k2b9YhUCsCSla2kTOsWjAemZxfpnz7CctM\nIVni\r\n=X6aT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.1d86b11a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1d86b11a_1540500251411_0.10067457980892858","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6e8eee0b":{"name":"primer-popover","version":"0.2.0-alpha.6e8eee0b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6e8eee0b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"eeec0c6cfc9adeea35e9e78f9172549dbff62afc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6e8eee0b.tgz","fileCount":9,"integrity":"sha512-MLX95RaDvOpuKGrHtBfePj1RGEEC+BDsPLNbpt9vo/EXiiq7bbo9xeF2QWYdLxxdGoBH7hJJjYX86X1EWvLrRg==","signatures":[{"sig":"MEYCIQDCTXXJVA8rY5rJjQJ0z1VrpeHUYKzfVdi8dwcUuW1xlwIhAIB1Jmp5dBVQkKyW78fdBUuxhFVqDJ+AxygOYc7LNo7v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0i/lCRA9TVsSAnZWagAAj6UP/1AZG+Kzf9Y5ko5fkwaK\nuAvqaOk0OpbLnx7XJFp87oivky1b88yvf7Kgy2JWUzutiTlGqciEsv4HAVFx\nXP560NLjW1uBHxqyHSF/UF/f1xg/5JUmHn0++emFD2FATxUaDP0TR0URWhX9\nFNkncAGYsObwjiVJjz6IlRi8bPk/iZ36cEhIydGkzrG9rzcaMEqXm65N68g3\nX0EPy4LUnc0bQEFYi7YB3pMCWV1/hy6aPa1mtKm1W3wEy+1mdJFX8Nx+5Twq\ndCWv6Fsi0+FhsX9U1dYtm+pWp9FoDZR5KW992SMJ450pnvdtAE2VMKhMgaei\ntwSqpFrDPyk7MYWCXL5w+8uYMHksURGg2Yc97XADVFZufTIqEsh5HUsvXvEb\ngrzkjiL+Dq+nOBWiSuNm66dzuq3SF05jJqk5l4OLZKEmXWghYWx3C6quWMIf\nj+mFWzBdmoNB3R2Upm9/TfR5HJ8B8ULcq4ds8Umhb+64T+HPjeGr27NFJxc+\nrNHVpJaOIGgyHnIbNsXuy58vvk8+sqxHVaWAsaWCV0zQ+oqvOipig/1fUZeS\nac4/vfmAeN95mzDEWKDGUas3tM8Nxp7L/1jQ68bEN//R/AsjI9C+TIhzf2Lp\nw9g+AOV1fbCdjuRWQgWqcDTXqwR/Y/eV/o4Bqu9DsSB75CZ3jgNWcVElf0z0\nCATc\r\n=eNaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.6e8eee0b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6e8eee0b_1540501476917_0.26357006247672543","host":"s3://npm-registry-packages"}},"0.2.0-alpha.f5159d01":{"name":"primer-popover","version":"0.2.0-alpha.f5159d01","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.f5159d01","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"66a0711d29c2b707edebe23b5e25930491cb638e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.f5159d01.tgz","fileCount":9,"integrity":"sha512-720hFga/U3zeyR9bjeJTx/FpCW4IMWM2RpDxmrS6E7edyjw+QlA5kYsRTT2PvirzmgK+rW8TzVo5mZnB8UNJtA==","signatures":[{"sig":"MEUCICCVW4ujFHEcpCmIWmwqtmM3epvne1XEGPlLrkVHL3BCAiEA1Uu5fWdmisFCzMNaoFlMe0Bp32oNP1zPnqDUlzZzEj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0lZmCRA9TVsSAnZWagAAAo0P/020FV9ox5iSxTB4s5to\nkV+4xxdXUUxqhf2iDg3yQ6aCwFv7E5fffHDT7KtwZvAGZNNO0wfYuX+0JXP0\njIMix79qTSl5I8IvgJQ4+rJxepE8ayAZNgKgD5wmoySnRLU4NhBKFN7gNGGd\nfINKT/16ZMUHhBuoGEvg/XmckSxWQC5w0w5EBjxSfU0yxPL73Io6u9g27leW\nGOksAWaUcMcF4HNCcvi2W9s9Hui5u7ToxQcRDHQUjNZgvGCMV1V85G5ivAxF\n+A2jV3V8V84Sv71py3hixlevxJjuuqlI7b9WXCC9vg1jzPej6FlAgM/YKyTA\nOJVZdS7j3QFoTrRZcmXjnnOwHLFTr8Or/sDpfUrfSfGd13VMwEt+BA/YdE3w\nbGCyR6l5WYhIVew5B7gp2BoihOOZV/KQe4wLRiKabSVFO4HV1IbrtNtXYBPT\nQqRZFbz0zS9BHz/+e3qCiQDue9QSgl8dC1g9yW6kQBwXEU8JQfo2cEDLuc78\n7b1En0+gT7zhI3F+dBd4N34sBbf2WkKHEau4/Ry/hTrj6ycnNDAgmIx4vAFO\nv2PYanBZ8GJQJePGRoKenaz0vEkMhVkbV7Rl5yrndngHEidM34Hber/Z1r4r\nXV78QM2r3l/AMKTPljApwrzLoppSwQTtpdsz4wF6m/UuAfoMOPeCTw0YxRQ7\nKP46\r\n=PInl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.f5159d01"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.f5159d01_1540511333320_0.4803716039504471","host":"s3://npm-registry-packages"}},"0.2.0-alpha.71d3dd4d":{"name":"primer-popover","version":"0.2.0-alpha.71d3dd4d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.71d3dd4d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"13ac99df595f32f6519fa565e49b6d742816077b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.71d3dd4d.tgz","fileCount":9,"integrity":"sha512-/3/D2rOE6EGlJp0ymxA2vrEAmYBCrXANgZ3J6Xsmog1VcokigVgSBXWacKsQN9hqIdKMHU3H0BoZjjbYu3eRaQ==","signatures":[{"sig":"MEYCIQC2O6EmrejUlAWqIG2DuGSPod4Ln5ZfymaV1jf6bzVmZwIhAIKD1CSp2+FcHX0unfJvXAqKq4i2jNj3T/NPIL7d+nnQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0n7xCRA9TVsSAnZWagAAONAP/iz0BSF1sTmIs1cidcWp\n7wsbSrbGpgQXPRlULvXqO8MKxyyhXVgnGfVQHFDnOJzh3lmpg7ulvU0oyBM4\nDbL6SHMybYgu8bogd6W+bPb6t/q6KE4u1e7AmmQqHB1hTac+FZlXsVjUuSDN\nzTnZUyP9+TN95QOehYVmrGU6nAHSc1s4qADhTXq6wMjbelU4xBffrWvxrGLM\nkgWb0UFSd4iie8gTCI6JyaB9jI3/pe1M2W2oX8QtNri8AFSrp10klUVpc3eK\n19bFvV0Qfc07akpvEIja1RTnazZRQ7uruNXk4FfehtR390w6owl4sDc7GOrE\nLc0+K/bKDB8VK607kxYUIwW+p+xvjT/fFHh4Qk8aJr9G+pGT5VsW4OPCJiJv\nKBmJYySGDF/cWgfhQryxUnUaMIbniNQrrSeqM+PtXladeVrJDkDTJPwwTWs0\n7BK2XqFBkyMmUpyFL074J3i4/NSC03TrOCcG8A+PnADNl+TH0B9YUFmFD80e\niCJ3HFDJmNXimH2vbya/q8J/2cJYr44r+nWHazDk5W9t4NePt3GsTPxtjKKp\nyt7aSs9unQNJsochjxJ/OctnlLeLPlvq5Ry5GE0glNjT4rGhltWVjVQyYUkZ\nxg9vccqwoOJfOlgZRWQI1eyHOuKrb4bCld5RroP14MJGF8Zx2tND6PAtn0R4\nSedQ\r\n=x/Hq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.71d3dd4d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.71d3dd4d_1540521713068_0.721263273160131","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8147bf9e":{"name":"primer-popover","version":"0.2.0-alpha.8147bf9e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8147bf9e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2d841d7668737fcb28299ec6d3987bb56a09d758","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8147bf9e.tgz","fileCount":9,"integrity":"sha512-7ztJSetY5vR+4vHUltWEanyBs67mnh0grIH97XDtgB4uoiOCrDhaBob9nv2mvxMPr/RSRFX+aNrCYz9kAdKfKw==","signatures":[{"sig":"MEUCICStrZ4i8QFMHUXm37JdMJ8/6pQUQXv0GvCFjTy2yG1+AiEAg5pS81HU3hjdXk0y859gR3emgIjsNeqB3ugrye2ZZlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0oEvCRA9TVsSAnZWagAACn0P/1/Ii7XACETw+ktGwlRJ\ndihbzz9QsbTB8bPszuG5OxhgoqsBVD0WV4/21MVeY9CfJ26AC1W4B4El7DCj\nggn1j0XsovTzhb24ZeHoPZg5znNugPvcFSu1Z3ipBjnrOQlOMBqre3oisca+\nlMVW4IIzNpoOB5M4ddADwlquLzBu/VcrcOW0rWW8wk2RMYwiYDTv6BvzrUew\nHlGejEI83WyMakJafAcd6SDTj2yin1O2yqChvbvCmBv3oV7NhH5pduzgsw2C\n9vvYvrH2VZBzh6V42nN04aHP0ND6j3zdFq9h/9k5L0DNTqbY9aaZwzi2iJw8\nXL5B/4IiHBKtFkW04m8YP01pa9a4D/ceU24064dSoD0oMEla3+tRYct4I3ax\nZtHMJqMT3WVeIJ4QyXxaLrLrKgwH5ZOt1ffA4MWu5qUehrdH3cTmSBNoUGid\nX7JonjWk6zvXUBpo6Hrvs81th+ngBVpZ4Z5jaoWy5UwVOesoHfoHbvadKd6S\neVPBXQEWgS/8i+oWn1yijqhKDIztRwEsICZPEdIqiKSXI01bF9P715MGYQJC\nl6IvSYZFEE1w5iwWnholQCL47COFCJBUCtFGH0wK340RDMKnQNgyhIZs0J9r\nYWkh6M2+6Uh97HybSs88cDv7zg+VN7ajQIePnVm9OIGD4GuVgjfIN7+Hucks\nAa05\r\n=TO9u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.8147bf9e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8147bf9e_1540522286506_0.978896034836179","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ade07006":{"name":"primer-popover","version":"0.2.0-alpha.ade07006","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ade07006","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"abd0e3b228a723ec4913ca97b0a53e931c4b7c2d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ade07006.tgz","fileCount":9,"integrity":"sha512-qkiYTDb67GXr7zMV3RbrVIaSe25oGZXRNWC2Ze51xtYBCvH28WpmcZQq1I7Rmsdmwxlu0aDK1mKQsIA4NMwbZQ==","signatures":[{"sig":"MEYCIQD+9add0PAldcskQn+LMyWUf/XD9LPVZ9YSNsjTsg019wIhAJGbMM7DiJ+OoxL7yXnn0e4uQA4MJGywzAeh18gqKwlj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12PgCRA9TVsSAnZWagAAu+YP/04OpSNeKtEMZ10OO54a\nir4XsnBiD5S22lgOmCvZy7X2k3TlZZE4IwFeUsYHPsrNR0qokkgIJ+ysNsj/\nexPgG3V2qmNVTYrZ9SZ4Daqj+rH/vnD5s0HAYInKyhZwOtjpiHqFqepdHvUG\nKL69GHF3mbj0PkOcOBm8v14TFHG31FE/t1ZwipnG0LKpPSkcNntUMpR/W4hL\nhkip5DOcdunnVxwMqU85xKXrUsfB9/YlOvYtbV5Qq/04HA8MLlSc9C0DQMzi\nSazfWns2W/51XVQF0blt7NtQCrBPH24wtfONdIMzT7s53O38FfXSfo312EL1\nFjbxqO79q95Wmp11TG/NBa1C4Wxey/8738PA2JRSpslugI2kqi1iUkxl0G3E\nYMT0J56NaFr4Seyq7i0lZoOHrBONKPEXD1nSgoBab/5IUo61KHX4d7AJYQ9f\n5hbG4QmLeLS3RsbUfHc7a9DRSNYSa9LHpJKP+v8J3xO+DF2XLYSmZ3TxPdP7\nPaA+G1/br2ay2e97eVsOZoM4hd6Tjv56Kv16sVlk4086iqs/C2di21JGACU7\n3K07ZbHF30tLyvIkQd9XtFMja8SfQyokkNaixIIj9SotZwFKZAJ/op5DsMZT\nLzTctqvDMjngnDdE6ln5PZBjERdW8N1CNtJKVXp/CaFRdQ9q8Cuw1thZDqQE\nmPpQ\r\n=he3F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ade07006"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ade07006_1540842463913_0.3098217235123619","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6e00d1f1":{"name":"primer-popover","version":"0.2.0-alpha.6e00d1f1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6e00d1f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b76fc69d3912235127081441746b10639b814ec1","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6e00d1f1.tgz","fileCount":9,"integrity":"sha512-1/M5cjf1RvaPbcqpNyQ5JB3lhKXsJh6PUuOJzU3NNhHv2/rXn2nXwoFeHzpKmVPlZEWv+s/EmbQZ58qLpZHB3Q==","signatures":[{"sig":"MEQCIFWkyKm1i2UtGRoRlNinNzvHiIN36GQOtPSDPBDB7gLFAiBKuAMGgAEQw655u8lMNaC8vDrjVzSJSDvGGHGy28Kp9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4SOECRA9TVsSAnZWagAAfwAP/0jBGA5Yul/q5B8A+YnF\nfBoDojEP1CUCKesIqZ30bQM/HhxPXQuBG9otLtP6yVGTFFVGbCsV8qpT3Jx8\n4UFwONVEocZV7QRS2ZxTiaz+Eg6vrGHIH/77sq5AzEwObe3B2ktWIyp880Ky\ncdHKpADQPs5CAeVEZPZc3D5lFHtCfSfSRt3puH42N+8zfDDAzusAX+zNZrhh\nmWpA8cU7bFTk77Dq8qvprSBYMasAEwQel6rS7VhttrrG1cNcCbJZVxVxzFva\nZuGfuicrcD2sETYwR0jxUr37YmEXE3C3BEbEH0RGHv2ApTm6ooiB/Uz3sl6t\n0PgJrwH/MJ5JxJnvLmN3syqMqhPYgCBqODuEaPejPwkhIhgZ/ljFGtWlWoHG\nSpCMjsrKBNgfCjPge/5vBe87WWOoG9E+CzHM+D1rlTCSKKvtWHKDRFz1xmwr\nbSrdr+W3SYeSIqBAehaZcGJMCUAJbrKs4cHpMZa9G0pBc9d5gu7e7cFPCW+6\nbbZxFxfv01H0nVMJv1J7+yNVwNTXHQIAlVxXXfAoXaK0Jkl/fdSD+RC0oo9n\nW4YRHfChI5hHaSsQUXJR0Zl6m6fpqhB3cStNqRTBZqcuxGzTYh1tDdVBN4VL\n7HIvR5M7A5PlPOk1IEwEi0KBL45fev5+E39ubOLNY1TAMEBTUEFjXk+FVQjz\nDDi6\r\n=g7nv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.6e00d1f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6e00d1f1_1541481347710_0.3924472928140743","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a81416ae":{"name":"primer-popover","version":"0.2.0-alpha.a81416ae","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a81416ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e3cc9a5d9c5e8f87c7a5e8d2f94eedd73f870b06","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a81416ae.tgz","fileCount":9,"integrity":"sha512-/128wyxoz2QdLB/rbBzMGpv34U8hqrCf5YUcm1CYrwf9+GssEfA1ZASKPJbJXyPmr4x8VnPxK2/8MQbEfhZFvA==","signatures":[{"sig":"MEUCIA1dDhzz+wbblJ2cgbPNdGd3GMzjYMIUPgBp788ZohsIAiEA+2THaNQVMFhcH8XDKxg3HeOs4yman6djWoxK7TUnaN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4SXxCRA9TVsSAnZWagAAY2sQAICtW/jKh/8aqZVq+OyN\nRq+ibyKeEj0CKOiZehwgBfe26FNivVmID67ogwZO5AnrHxGIXdLCkMEJWC6F\nzJurpIYatvbP5OeweVZlMgV5p4Aw4snpZoc0eDAhAeeCzKWkEwA+eFRwlyOz\n254NIPrSOg9JeOXWyA55VlJjEzoFQrucMD4G4ZNktE9fS3o9UuViu8VtVuAU\nQ0Di3LmPFzNbrTN6Ur52h3IxaZ5NR+9vODiT3dye7h/cVhR8+DLlGgJMooAE\n7XRqRTxcIGs97U7YMUHmzYnmCqYhJ/DKmW0QlM1Ah5GI/EOXWR6Ugecek8V9\ngJ+ADpLVvb5vvG1zx/rqOt1OYv44Ygma56KHJzrE5risl0Kz/Ryvdlu30d7Z\n7+zMf1R48hvLfSrrJl6kex1aV03vwZ4i2LBsZdkF0ef3Nl4Yzbc3c22V097G\nX7uU7EjQMkQ0Uvcq4OutIheCSUjrWc03bCOOHehD4jJvXGDdjjigkC/1qNZ3\nAez92TvUplQUwHa9FdQFT5NpmF2Bjbr/HAhOw0uHXNSQjAw2LnWxooLhvHQv\nd5YA7FxvuxsIqj6BopYXQqq2PG1u7BMQEJ35tv1gFaQZo+4vx6QAYCqyJ9GX\nDDiU7VJOdECcP16B1dK1ys8VhaWabQJ0Dw8FArp8l0J4BNgpqLN4lY9R1TdI\nADUW\r\n=qiC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.a81416ae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a81416ae_1541481968909_0.6567295423842718","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3487d68e":{"name":"primer-popover","version":"0.2.0-alpha.3487d68e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3487d68e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2abc59e3758b2f3ac811ce8121069c84e2ff36ce","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3487d68e.tgz","fileCount":9,"integrity":"sha512-9INQfyEGWd0rgNm0unudsv9XeglH6VEsD8Yrvq5v9O0DyGTAuVv2DpDYU3uLKXGY/mBWmyy5bdIP4kEIlEz1Gw==","signatures":[{"sig":"MEQCIG0ftpelo0FuC7Br5wOwqI2yoDTK6zJcf6O+rMaE1PJuAiAPOogrcyMSnWz7UQW5etjLhlY/e3ZUWhT/gXdim69mfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4TvsCRA9TVsSAnZWagAAOUYP/05ImDVtT50sTvhPbJv4\nLrdn+mBX5OTHVojGFQLkUJiwj8w7cGZx8yy6wc+H69HwwiikXg38Idvyevbu\n88eaQ3/S6v9uU6ul5gRkgqxxzp5NXErpiy/QIJvGz51fGkHRJHdPRzQY1BJ2\nCgDr4VFfyJCQlp53EttahhkR0ER/n8JRosvKxZnbwAhPiAFdsbfIJIX4QQoy\nXUh92i3odP8/0BYN8Bf6Fo80QG2AC8k/uEnqgPZvtjPrMS9i2lSBZqG1sCfP\nDoLWz3vNVefYnb/PI3BSPguEn+KC5+rVVcHvkTckKW2e7gZrTHWcRkvxF9dp\nZSACJf1Ar/JQIF/vEV+jTAanjPLy9cyMBRLkfwHNb/NaxXxkzOhmiI0gwP0m\n08UjIx0ieR9RBHG8EwdV6bQohgOC2xCOjhoanj+3RG8jI6S4AkTiaYw9R6Lq\nZCFxbh6hLtUJjR1gQ++5vd4gv4GZUCwW8DoRMwLoR2pChe3V6ZRxi1wgWdnW\npvGv0lh+PBfAHddamtjaxCyvdd4XUJ2NDGBUWI96sx7anPCf6QsTmT2Yk9Xw\nk5R9dUjjY7zK4PPS+m0pFmpg7DUwmiM6+VYgmzxuZuSirw7SGLJTdbbvIBUw\neo/vkB1he0u9AiMcDcRLc2SZttvRHzI6uKsVF9UcSw9UobBVjH5y+bUaVaY8\nZNMD\r\n=XKHO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3487d68e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3487d68e_1541487595720_0.6288507040057205","host":"s3://npm-registry-packages"}},"0.2.0-alpha.deb27cb4":{"name":"primer-popover","version":"0.2.0-alpha.deb27cb4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.deb27cb4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"423357cbf0812bce665ba5579aeb521803e6d9a9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.deb27cb4.tgz","fileCount":9,"integrity":"sha512-cJtEUddn6KkSlEla1kkj1Rgp5E9vDC0U7peMT4hQR5vCdggPDiktSI6SNY3iscbeuccrTlClyvXD9gkW4Ze1Zg==","signatures":[{"sig":"MEUCIQCsIEyN3k7GaF9LVsRj9ZhqhKj0w+zJc/UX3h6BhTTC5wIgFUsKbaH7qY/GD675Mwjxs/JizY1VkLVU3e6IGm3fmjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4T4gCRA9TVsSAnZWagAAfjIP/0l7TWOmxbdYcPd5dceG\nULs8MPTXu33VIVuCvflRLTeFUVBvy6eB/zTowa2/83Z5YADY0j+/kN+9nTfT\nF+0wlPl2uJpydhVBh2DOyOdj9uqZLdlw9KQxW6JzMwr9OUYZ22sGBbx7ai4c\nfD4WEdkVKi64SdSKK6xYvEAEEIxBPsecTZSWZfNk/ve8AYREEW7JDmIStt46\nDP5diljlmKm4x4btewvkBhI4PIll9sgFSRvITNs8AnyYRiPKrtCAdZUgGuXt\nK59yUJVU740HexrkcxhOhKY/mOyr/fDqNNaNsJq4Xjc/k5GSFtkX5wlLRgst\nZGkOiqn9dJysHIs+lo3UoG/trRbb+7Y9XpHv23vKK0mKirkvGyKHniJorBZl\nAMmKKsFBo7pq5xbM2ZqIOJtE3zyOrBV/xy90m971iqaO2PzdD/1SJtB/dvoL\nT3A6WN4hhkeTRm4EwQteUmb8ND1sEvy89qOdSj8K1La9VQvQ0KgGYOUbs59G\nM83Qk9TVNifOqpID4e4fQ2tGNJtoLnOiePV9q59V6jmcgrX9/MQttjTVWJQ3\nb9lAgh9jEfkr6mInFGPtuKfxXwWt/tX1WBqG5OiGX9k/sgvPn/Of59uReC+l\nCeCqboLiUknprIIh0SUsXkLsSxMVmfXdTFzFF1OkL3dwYLybJ/mMyLNiIheX\n+0jY\r\n=Sabf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.deb27cb4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.deb27cb4_1541488160183_0.04049689528745515","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c3a1ee2b":{"name":"primer-popover","version":"0.2.0-alpha.c3a1ee2b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c3a1ee2b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"455647ceb755c89484a0f48396ea4a98cbdf36af","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c3a1ee2b.tgz","fileCount":9,"integrity":"sha512-06+IJnmyuc8M4AOAzgXahcjDR3ofww9cyWBTR4ORZOOZ8PJvJEU+UBgcocRPPLID4vxc+YTrBtt4U7pPgebnTQ==","signatures":[{"sig":"MEYCIQDpKdxz5mku6B/5DYJgGnZZnwiGU9V5BSAezDZBmSe21AIhANGk1vF+SNTfMS+6CWExBHdCqcN5Lv0mR1a0AEaI1mEv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4T5yCRA9TVsSAnZWagAAkLgP/0VB/f4T6EoKwDpSuuuG\n/AkPJg/FSayfHeWxGY5O2/cEepEsIpWbqwILyGiMSis5RuLA2tOtNDCYTWyR\nxN0mDORQLJicze+wRmnW62bxfL6SUBBMk+BMw4QtQvnqPhNJ+/IYiX1NFXJ3\nxLBnj1OBokdbTosSXuFI4kb06Fr8fsMB4i55jOlHY3g5xVddM5XLiVaZ+HY/\n0o3AU1n8yL60oMJPh42vn+cZi/vESMp7AEKRCOETA9szCfCdzAYxKoe+e/IR\nY/qdnbTaBHhlLNmP9jJcVFnDIo/u6QMgAO7ga9ldAXZvMeZ+99NMYxSHbAsn\nKB8PKjXxGcjx1x4xURwuB1y1ZHLrFsAt+u5djlLy7FSnXGt+ppHORr58yjQH\nQ+Oah/okAlHmrgyANamp3rzuchz+5mr1mHiWrJbyKi5Cyg9Fg7BDRqyTeYeL\nLnY+dmqOiFX7SyUBDBValmZRBYie5GxN80wNfazRlPXy6l+wt1ZQ1Vy4Ll7l\nUyOq7Q1nvIxuEa8H4pVsQxe75CSGomAwmY+xz8eTrAssnXumxSQDdB9SZxfb\nyCbpi83zTNPb80PqCkqq6z4nOu+U7i1dEUgkF3HN1OKca3oyaKfPi5AcGkSH\n60aKq3zhK/1yNKdzAc7tmSGt4ggacSzdCq5eDsbtVjdnMh3g4v+UrXrQvZZu\nEAVe\r\n=nxLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c3a1ee2b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c3a1ee2b_1541488241532_0.25737252112548425","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6ac5deb8":{"name":"primer-popover","version":"0.2.0-alpha.6ac5deb8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6ac5deb8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2dd25dec19e6bd319965deb44d744daaa291932f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6ac5deb8.tgz","fileCount":9,"integrity":"sha512-StxpKK4tjP9Gf/sK9Q3n+n+gDz3Yo0tk3WxEHUSu5KnOO1mED2eo3hagOF/YN7LL3ThvNYPtLeBFvxSUtKc9bQ==","signatures":[{"sig":"MEUCIBb7M2eENgzwT+OwPwW78Vk9LsZ7mi2jDJpsFsHKlL0+AiEA+UXWhdm703Y2mZlgiSIeT6059ikuZ2NstS3kMOIM5d0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4U4XCRA9TVsSAnZWagAARA8QAJjiPsr2BndDXLfoZ7+0\nH2nXhAPHvgEupeOzrDPnfPMLUaWODNEBu3eze7yh5Ht/F6lHVDnhuLxh9MmX\ngNrwb4JYA6wHsJVkkA+IhwpWOLIOst+c1zE90We5V43NqqXluACUE/fykCsJ\nPSqpAsO/W9ylc0kmCLtkBWtn+AnqqY1+yu5r0fHi2mvCGeQ8eBufay5Db5tI\njiF7T+HBNKkWmtO83Iz1wcV5iO6eH+6g+S/9jAXsTapUwltT3aX2ymY0obgl\n6l/rgnEYIhnQx3WzKWenPFwBdIbvjoulTQgFkrVh1a+rp2qBDu2+ANWmoGfP\nux35OF2FAzLrC64VzS3PuP2BQnULDJ05v7SXcmZCPNtr2YbMzS8RgYWvt2Yz\nsBPgyY3eK1UsVnYV2llQk07uL+LVWnjM9eF/e9Aw+fSkz0i7UWWmD4Oms/F5\nKNMntyFEEfdvBTLf/Z0DEzjy8twRIgQstxFR/AZZa0miguEMqrgsBbgD+5tC\nLRbNOZRdDa5s0P7wTO00yWlCt+ANghfPal8hjaAtCfG4aurezCr5o9XxMpdi\nXNrX86uDXHvj4VLgKMzx0MhzyD/xSoPJrsgZ+915hco8cYk2BhSBmrI5wPd7\nAnSrymlvMQ4Mt9u3nrPvTA7qfLMLNkGf8hQkG2nVOJB7sU1+9LwKYV3QPmDQ\ndavl\r\n=pEcs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.6ac5deb8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6ac5deb8_1541492246376_0.5387953324711472","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c12761d7":{"name":"primer-popover","version":"0.2.0-alpha.c12761d7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c12761d7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f61ad505b7ba25946a395f6771da7c251680702e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c12761d7.tgz","fileCount":9,"integrity":"sha512-NPfo1hjggF5CkGpjo0Luar5Jdc/Nkpfk1yugoGKt+UMg98GvzaS4zvC9SQpH+23dlvIQh1AkajzN1T0a+6/pDA==","signatures":[{"sig":"MEQCIH1me0v48UJA1mUlzKmy3lEhnBB+zZUTROwIvavAoojdAiBfsOHwwU28RpEgbqI/m291DF1UP68P5sOrmtpjCd9E3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb42bGCRA9TVsSAnZWagAAQ9EQAI7vu3cLrFCpSBAh92hr\nCLq6Ow2u6pRWO5VTcBZJgnKkopcdepobSc/2q6YEuC6lRS+1WQOgBEJdwC1m\ne9dNYK4qwk3xXT8slqcp6F0k35SwaXBl+DK3maBg+/NIBynAS9IUGXvRtAPe\nP6OehcvqXVbRseBHGyR0xUNMh470e5rmV3p8JDL+hLKk/9AEvhh1ZH6bBHYb\ngvSX2njVYf4h2W/DelJj5oMPOM6mjrzz/wdRNVU3PpfunwfHtAquU2ejzs10\nuzXOzWAda4B/7dLGTCmuj/JMumR9+WKBRF0tkzcLL7Uz1BA9Az/waXlFjlDe\nlxjZs3blkU62Go5WK9v+pkaX63IsinjotuzXgolOGE4w0RqVBCykeIRdlikB\n5m6RqPf4haAPNNbHHN5JhNDpc+3MLBsU8RArSOhqc5CdbEywe/1pHTcHhzHU\nm4e/PN8vWeyqueDrjYQ5WHnkQhUMmjVqUg/Iie+MltGJMdONQ0s4gjKVvHJn\niwmRu/mGd2b++tqjtMHGMlT98Zc8aR4e4bauH1lHX5mlElyJesVzBnlAtwpI\njF/vIuP9oZXyDvhfhYex14amoGl2nl+Vt+aHCnE0RL3MiJTtKWWLeJpAC4x2\n/Frzk2wEXUKY9tIPsSFvTAQRI1Y87W5jZbXBBzJXXAAlnbWaIn4pGafPW1w2\ntXI1\r\n=i9Wl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c12761d7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c12761d7_1541629637917_0.7025998179108719","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4a75e7bd":{"name":"primer-popover","version":"0.2.0-alpha.4a75e7bd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4a75e7bd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"73edf70c66f5a34c3face2e6da729c7c743fbbf4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4a75e7bd.tgz","fileCount":9,"integrity":"sha512-em9id3LRAIx8lcVy0lCXtxl9BquXgZn5kycFo/pydRP29L93s6/1VDWqWeH2smyo/Zud32whN+gK/WAx8XF0ZQ==","signatures":[{"sig":"MEUCICYNJoBVJHxvq8QzVZqbm+5FiCcWSlZ5NJG/eL3Abv8uAiEAy3N8YFySlQULibK16J3jtjM+VmSoLWnmSzm7iVMQcYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5ISrCRA9TVsSAnZWagAAzH0P/RAAM+yQklhv5hGdGX0A\nEDybrkHVBHKsjywS9oAk1yxg45d8KCuLf1X4DjwiutF5AC740HdyCusxdArH\n+XE1D5WjQd9j0m0znfH34bfKxUvUXcVjWK+/7Lll3YzqbotQd0w3LwXXps7w\nctEaPM/hL/9XRc4Ef/MfoyFx/NvbIHwOoQpinu5FLZsbnq+w4etoCeHM9woG\nBXMlyZX1wXsj0A1Z5Srpb1+Bh9ymPADIUj/R45lMrqizdSYI7z9godaE6f32\nyAncUXW6W3XT5Nk0tgJhvp5IbNuBhDtQSmWYIIEJUBh2wXAaMJniVZBNFqeO\nlgzmkaZ3PpXyK03Zv9/vlUVN73kVuXBJleezI1g0r+5ktBlbWx8H1F//BioB\nAK3G9IUDPPQ41yxRCFl047IjtJuKJxtQ1Bg2NxMbCSYgeIWe3oiAwS6wyBcE\nR/xk8NwY9HMimE+YObCkZNMvFDmzfpd4nVK/rjlV+yC5U1Y2NuwsyeWUduxr\nALYso4AMh4sYKOW7+gYjPXdIguIvPGQ06RDNkw452Hk0e2GfUJGEnrG/ccLO\nLi8SagOOZZifCIFo80bYbZonXlqHZILIMYvmyG4ZB5qoUZ6rP652dNaGc983\ngJZVZf+Aec6+aSPcSFtZ/ntAhGTfRWQg0UWuC9ng8A7WKXWgHUBtwLCj/jhg\ncs3C\r\n=us21\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.4a75e7bd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4a75e7bd_1541702826494_0.8979756491885871","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d76fd883":{"name":"primer-popover","version":"0.2.0-alpha.d76fd883","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d76fd883","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aabf8783cf925e188317cfdf6d798dcc8dc0d671","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d76fd883.tgz","fileCount":9,"integrity":"sha512-TgtWrOZ71Ma3zMujvvcXdt0MjB5D8KqmlcTVbB6jNT6bUdur5MIcjWpbdjolI0wyDbXQK1dvbQvVDeprGbjHxg==","signatures":[{"sig":"MEQCIGL28hKQX9a/QtLqW4+fh3cvbQ8x6ikGQfvUMak2VB8iAiBXET4GNXY+sujs8wz8DQyL7dQt1VPrmiQMQ07h+ts4yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5Im2CRA9TVsSAnZWagAAgzUP/iEKwPWOZY1IsNagChny\nXpOHU4V2f7WcqcvMUXez2rfZmyyglCRjaQeT/nlF2oa/zSc7exG3GsuwQ1KH\nJtYqMb8NQnD9gGF2lUdX7lrshnkuJRDfh/LrzoK9z8PKDVJjpy83AQBWGwZA\nWfbEocX8dN7Zex8WvqQOqDnGxcMUgvnC+dTVJ5Q8sRCHlGh4SUHMk9nFiLSK\n1n2pO+0KrkvVn2OeQmEVIBWbflwU36ueHnO2t/xh2Tss+cTdtqRgeI8ii2nq\nPQnceHadaJq4g9zA6fkmYG5Bt+ZBZergzD6ERnxeUxcy8OAVCCR86zOQdy9d\nHB0hHL7TKxeYraHitQAqAAJQASN5o0Ah+YQZK2tdlOMC9YQDFCHOBnIQeTUg\nMEnff54ebWa7Mgk5qSsGVBoB8tPqA4VRXjoSFTIROWudSLuaK+vO7iH+Tmht\nEhmOEJWzES7ETr/MdkiWViKpwGHco32iRaPP2IojZL8d8MM/y2baX4bTecbu\nnYS8/IcajZTk7Zg79QsC78mLZ0gIxlhCevtAfA0WwLsmCzLw00HUhl+RjKvo\njiEpGn1qs0kpPiidfz28SdMjVbABjnBeATjN/4numMw/EbNMNMZooWRSoxk8\n3fm0Qfx9qwRjMlWc0GztMNdPthri/fb1MdZ6x3V/vU8pNuG2tqFz/x22pJTw\n4cv/\r\n=WaxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d76fd883"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d76fd883_1541704117836_0.5964425489161107","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c2903f93":{"name":"primer-popover","version":"0.2.0-alpha.c2903f93","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c2903f93","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ce43a9cc8e598c1c93f42f2336e4432852e9f72f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c2903f93.tgz","fileCount":9,"integrity":"sha512-6ZAt7nT+TeJzMpBpKYskungDldBsfQfaLJUAccnnYnlGZcdclBa6MzZP4GZdO94aqsTnECRSS4ddBTIJXS55mA==","signatures":[{"sig":"MEYCIQCH94kialc4puVH5ODsxXdJS2ny4SNpObrOhcAUIgtb5QIhAKIPXLnHxaZfHICAuEBBu+daAy2RBLN5tSXN4r/mxyvn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5M6wCRA9TVsSAnZWagAAnS0P/ikAY7riGb15EAg+esVK\nswD2lbv7R2znRQa8UrRpc4AOFVF+TksKHLfVzuiGrl5Sztso6/xN2TghVcbp\n0Rfw4+c5TRGCFqj/yB8iDOVz/M4HcVRjUTmofTQU6IrCXe9VQWVG82DBmcBu\njacT9RU52SDMKLex3KTx3l/oqUhZSF77L4G30AJaQ5FfflifbzlwezE2+ak2\nOj1JwrbOVlULvmZMpSl3TkiRZ3funFLUK3WjSSb+l+IAwUg9CVNUK1UuD3/f\nRLDUZTeZlYmSCrzj2l8cNnAEkJk6Xwrkw0vwJvH5QxZ4rLZ+Udi87291o59w\nrpMvhtIQ+ebA8k9GTkWIBCSQEBoPRkuhDGDFgcYVbvALSagSB+xe21Tt8yNe\nKmLgSVN0ZL4ihmkDtakqPQFb0ESDVOtMWNhb/TSyisGlYXBtBMwqkMX+tvqI\n6Mk/ugz3j7ZAZMRGFMcjF0B7YHiBP9Iz+bhw39ioBYewBnSBlU11Lx/0GrZZ\nknege75vpoXOwz1UX7VUB2LWafx9AIJ/cj+CWmmB1jNepPyco4Y6FkFzr+vA\nYO4IFaBrjLJhIGqVPgWWLWUjB6osGl5eFNXMnoqO/Ebe3+dy8weFQ3hhLCRR\nlPqfQJRsdfboxJkWKWug4ws7rnSc1koOqzA+FtER1xAwFHIZhwLaQ+4rsAQz\nyRXK\r\n=DgtB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c2903f93"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c2903f93_1541721775293_0.4849314600896568","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0fa93277":{"name":"primer-popover","version":"0.2.0-alpha.0fa93277","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0fa93277","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7acdb3d73c12cc2461e0aad3ade81f118ce10e29","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0fa93277.tgz","fileCount":9,"integrity":"sha512-A01iGB7KJ49W4MOKzAlkjTvjgEborGlCCJoB8I4moVZ20o1TVCofu/Kuzk+bWq2RV+iHdwAttOInHsfmcjPrwg==","signatures":[{"sig":"MEQCIAbM1OwLT8DTPYTAn8PpU/8Vlcxb9ntrUksX8fSarNhnAiBGByyuxo+8NqHVl2NQ2TfLRmAmvtovBoJjXyIMdqbmTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5c0cCRA9TVsSAnZWagAAqrkQAIVv5FpEStYt1L9fXm+X\njhSfaO5B4glGSjuNW4/HNFJLKTXxm517Qf9xWz2GprJEMJf5J5vf1WssMAtN\nnRnOOuWceiyFcpYN1WADsXeVPhlsjG3Bi40AHvQp2fP4x7lcx69r05WtThfn\nv/VtuU9lD00+RF/QWVKtL3r3qL25R25dKtxzqKPnbHX69Mp4j7MTVEjk6qWN\nArvHSmjd0XVE6uWREoWnYwLFBSBT11G5TvLHgkaFUg7cK00OV/yQwWikHhhB\nhqyP4/LlMOIPT29HkZ6h+QNumiOHIC6KnPHmppYR8t23c5Zwb8WFoJoFbZXs\nvqRagk08Iw51Ur9aoFUmiTZp2EUXLym8mxx13qtXZmJrT5zBymvoUF0yJmXu\njpEcUcqAUWtwYcq8ty/oz6GhvqkeIJFTaccFK1ETdSw9LUYdV2WJd0olZX0e\nAj6aXndu7q/fgOQOgncO9XFOmJCdXkHTAdN8C02TVwLr5P3rK0x7L23OJ3LV\n6RBqbTJ1ixiEKvs2IAfrPZo/eUIJhUtgV75vcCTRv8gwkQNvsnJ6F4rRFyhx\nPHdDkEXm7T4eqkw7QJOeTzVeyhoFPtMrMGBP2OQl2TwUPhLnGzcWxH18V63i\n49t/K5epdatqtcUbcFkpP+nRqriMonj0G8oaNv9dNjoxPIMZ+oJOpwNO/oXq\nqTDB\r\n=94XE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.0fa93277"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0fa93277_1541786907727_0.1717811547456627","host":"s3://npm-registry-packages"}},"0.2.0-alpha.92274564":{"name":"primer-popover","version":"0.2.0-alpha.92274564","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.92274564","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1a9e26335f6a7d8c331575731e5b8dda9527a62d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.92274564.tgz","fileCount":9,"integrity":"sha512-3OtJDswRIBxAsV4wCKqNGXUcfghtxd8SpAOTDKYyBE+H3nYrbPj2Po5M+4tX5+yHu9ClDbJ2GHD86ryPkObM7g==","signatures":[{"sig":"MEYCIQCLQ86yX16qSfJzI2KhY0Ff35vVPr1rc8DUfFGk6TkNNAIhAN5iyzWmpJkrX/doQVIZLOyhNBJ9YOEx4XImKH5x06HC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5f/0CRA9TVsSAnZWagAAExUP/1y8aVPKY81kuJhYZdWt\nhp37G3ojWQkq2rR0anOfcsD7wRi1HVmXbCUZ4qsjdvJg+LVctFkWuJ7Zn6Li\nNbgqDeUg54g5RzQCAC27GdyX4uUfL3NmRrB3oxXruBqILtHDDtFwHP0J/76o\nQTE3sPuL30t9M/iFGjg7Zzu70LKJrKGVBnagnFWy5nyW9+r+4GcLAqnMu17X\neLeDYFic1++EvOC/ccb9aeT8JkyA+KoAYOMRDnNqnyXzJR8EESiF76Qm08M4\nA6tt3DvGnu9FcgrPgf9iorS19enbM+g4GoZGnyQuEnD08eF7daJ4fwsdrdvy\ngxV4Cd85K7fY+fjC5UWAM4RwEiGv0tWgl7lMS36LLh2NZdRbtMwcr+SU7zDB\n5XnOAhbNzDzFAi8jEWIJ+9FMM0JtcC7P9uKXifVvMMMMXMjU2AKQSJJZ49Ge\n7lxsyMKz6yrCkHCZhpOojjhA3qb5say4YGJ4WHkpg8NK9HOhnqnYm7WVjJdM\nQ3/l3nTWHOzNbRH4lNYBDV/0/Sdk4RGQ0hbvITwGxRvpVtzPYoL2QRnjY9yO\nNpYa1poHUH4lC33cHZ64vQYV32dQm1NUorE0MGclfoaLoZFSGDher4yDr1QA\nvaK7Q7Uqwv7cAgywa+RP9PHDxpAlZeiFnmmKoGegL8nkiBTITBeestVBA7lr\n5Y7S\r\n=o5Wq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.92274564"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"primer-box":"2.5.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.92274564_1541799923729_0.7790534352655063","host":"s3://npm-registry-packages"}},"0.2.0-alpha.19834d12":{"name":"primer-popover","version":"0.2.0-alpha.19834d12","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.19834d12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"76e1409158457c6816c0244827a3b6fa9d1c29b6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.19834d12.tgz","fileCount":9,"integrity":"sha512-M+4W88kkjV6G4QZ7ABiybyMj6SMDzW/u70VNakaw7xyyNST5UCoLDa4CHGFxAIpCVATB9Ylgb25fc0vYus557g==","signatures":[{"sig":"MEQCIBQXBP2Yod8SKN/X36J1hbgyG5YAj6WoAyODn/k5HuCGAiAWDPIp0dA4Divy4Ztog7QYoI2C7SU3rjrU1d8lubXE3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5ggDCRA9TVsSAnZWagAAtncP/j5sgDx++NWgEftL3dvv\n0A5Ahl4Ok892l2IdC+aV748T/4JZ1CSOeB1h7tnZ0XtZxXeHWTW6Y9BWNQmL\n9RWcxAmBnT5Z16WJ1xsEU7Cl/EfFJiuxVIEctdXxGsudymmLlWxnW1fT1iV8\nP6O/95aPEVv8yDp9uD0p0YcphpnsQaoDVxv+Y4vFLdL52LiGwaRJhFqoiniM\nQ66cu1odRIsSvtsBiajlYr7vSQgMH48qT8azVa/rAO3j9FrwEm4+o1ViFbiI\nI+UmAjvkzl2P90jxKHtIMlht8+RyGlm6jY9mea8/B57FvSHINRXMXa/fJkrB\nK5VjHJ4mjipANSt24az84C8a6bC35NLrps1qtdhzaPg4olBCzkbVyIuZHul8\nmtG0SdqAQB5leX2oDMdMlAEdojUUTJPOS0SYT+LidygaBv2ECJfKFvlO7ki2\nwi8xr1er4TPOu6ltlZNXZCrp2Ij+kZHL3BeVNq60Zrj8v1AD8/AZ0sZKBOWK\nYb8i2WxxcGS1PljogWenpEqIrDklVBJuy15NNrg+qb8Gae1gylAyPJpsXg0W\nUtewO44HFsofs0uWdDFUZD+3FZcVpo9UyUd8xJAz3zXUDCONOzY6pS5WBhyj\nNkCEKXV2rIBKdYddA6kRPGzQUN717DUG8ZbbEAZtBDKcaAxmoS2+cIJ27o0a\nWIPp\r\n=cTop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.19834d12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.19834d12_1541801987006_0.27215976005899867","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1c6820e3":{"name":"primer-popover","version":"0.2.0-alpha.1c6820e3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1c6820e3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fd5c5b54e126d2d60adfee6220386588c845cd1a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1c6820e3.tgz","fileCount":9,"integrity":"sha512-Lkix9xThTPYkZx3jvCduxOCucecD+aVqrHQpKaDs1bbsQGaiHSiVI0YNbS63J7QlE3yUFCTt1Kgn5nqsQp5qtA==","signatures":[{"sig":"MEUCIQCCXsfYNLs/E6f27Afa2kXuYoIKtR1XwYc1Mwm+0quS3gIgPMhkMBGh74bE6IgZOJCbexUb6+jTqHNZpSIRE1jmwL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb60v0CRA9TVsSAnZWagAAtpUP/j0uWe+FIDIoV9Eqku6C\nPW2gnqPSq3RYNXCUBf7QJvSywluu2rvCHDdBkJrne3I9CfEt/ByIXZyxj7yL\n5a2vibIvg2GZmBS2DHZaVktAAKVIV8gFS4Vpecit7JiB1mmBPE3A/HlAeuog\n59+T3xpabMb/hy+GaNNDg9RjiZi9bCVCPI2oSUEq6iXFGJwokvgcJDqEYYcA\npO7I9D5m5MKaCbUoZhr7VL+B33/Q5UmrEhXaLg8/w1T9CbIUQY1JGnhyRDmq\na5h5cYLmjtsE12daafL6XBRyZ3kqhXelkY5mxJmocgqAyVk5LEmApnaH8H0z\n4pdmZO9vX5T0caSrq4owaUaYYf48HlIOUR4N8Lkx166uq+QoA1vGs6BaP+wL\nTtX6aHfqVfLguukkJ6s88Oo6Wz5gqkws5Fm8p3hq4aXdaFOIlqyFmm/JS1kK\nbPZRWPpgRHsOZ1jcA/+N9Ov0nPWtqneJEqmTPQQN3lo2B7UCclmRoikmJVHZ\nbTnIhyCnKj7guHYkQ+60qtR3qMbVXhUlZtd/7jj7QusDUvqYDe5jSzaKTP8m\n3HXn4glfCNvMGk555fHj53rqRi6Ebl6d37mTpJiv2aLnhrV/XDTwqzPykX+k\nM5yrZOQDf1mbTMcwcySqsmifD61WZTI29+hsx3io63sFoUR4EuuyjmkgbvKY\nNsAT\r\n=7WHq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.1c6820e3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1c6820e3_1542147059730_0.023819239702160155","host":"s3://npm-registry-packages"}},"0.2.0-alpha.26a2ae18":{"name":"primer-popover","version":"0.2.0-alpha.26a2ae18","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.26a2ae18","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"83218d079060433301df17aef9e38ea3210e822f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.26a2ae18.tgz","fileCount":9,"integrity":"sha512-yp/kXJX2kE4MUYvurlhLPQvQqOqqKaRdZG41Nwtt2/HhuBcErZ/1UiG0dznSPkGY+s0dS75VbF4XDTvgIax90g==","signatures":[{"sig":"MEYCIQCTglas+E+P8qzKDvmzC14VFRReM/4NUyKUt8c7gFvqIQIhAKB4TC6clLxUjmRkKjGmyQW6uzBSR8LmEE1ejlhV4Vno","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb614wCRA9TVsSAnZWagAADP4P/14Vr2/69ePds2C4XQEi\n6D1Zx1TfVwp+R0+xK2XyV8ZOVXLCWyNdsbQBCLhtKmvuvsvqDJlGjTrqej7e\npKYzcb9kzsaTdwUHZzMRSvyD0lrBywtSQxME/16UMjrbvkuyc9sPK/DJVEGn\nxJ0nsobLS7vN/RK6uwPc5HyOE6g8FDtHLsVpvTn/Zc+cxJmKEUtivLQT+Q9z\nOldNSKQhRxljgj16OcBevlaRp0hoWaKftw5KAwn0UW/bsYU4JAeLqviUkHZ6\nOPPqeoxZg8VK1h3AJLiq377Ohh824aSAxxriu1virKFPwYLb+Tk/7+VLszWf\n5yQCgqcBvf6Xwiz8vTZvM1wOYk+e8yTBL+MzEg9lYoFFvdEVhfABqSTGP34Q\nh1KnFTilhgylZAY4FLCOfDvRqZTlg0YOFQJsVinAhirK4md0sKgvPPYOUiIS\nmzFWdEoTtgKJ7K9OdAtzgIDRM9iTyboW2jt3tMat+vyOqiV7n9n3ESZp5arp\nwPZduDX2UAgHCSII9oHeE6Hvo28+8qAYOPyKDmfJa3iICVL3cBdpCTzSMw2N\n7tmYjkPXE0mjGFcIIpmB6BHGRWmfPiCkv9SQAl+BImeq8I5qxaEl3xVWH6IQ\n7wC8UOLtsWHNwrDoFFLqAt2PoPwuF8D551tMkSHfWvks1g/tuj91T0UKCdxZ\nbU9A\r\n=ca84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.26a2ae18"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.26a2ae18_1542151728051_0.7173096842507158","host":"s3://npm-registry-packages"}},"0.1.5-rc.1":{"name":"primer-popover","version":"0.1.5-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"61c0f69fb2c6133108a705125245dc31062ee595","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5-rc.1.tgz","fileCount":9,"integrity":"sha512-+PtjX30I/qITaTddslvq089vGNNjFb3qKV/Rd3ItV0YVQxvx6wmXBLx+3EBnkYrqr7+fWAALOEQ1q9kdr9Vw4g==","signatures":[{"sig":"MEUCIQDIWuQjrVOucN/GE45Hg7WNODUYL6cUYi1BDZI+zhPZpQIgM78JFCGTggF821b1MtPcxamLPiAzKIE8iXE6nLR/If8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb62mYCRA9TVsSAnZWagAALuUP/iQJ3eRhACQSBZTYJf+l\nVYJ9V7cAaviOtyyFkfmBiNG6AgT8FFioTZQiEvRGeRYOHAFktzA+vfVOoCro\nQnXsrvVQbF9RNpxzIYSjJcoWbQcdvBKgepJeIsmrCNY0s/QNraaqcOsO8Y+G\nL6/0FhyPNzj8hRPrS+rW7s1WqyqoYf7TYuDEIfqeQWNjLv7mrDD6fHWBiyw2\n26ikbuZqCHqEZLhrJP0ewPnxL1ghaGaQBmy9fThr4BzBwPuG6dgBSbXRCiDz\nrmNU6/NA+O5oCBEu8VjLVui9k9NmTQfOVDiuQP5RVHfMH+5j8ei/hpdAxkvV\nAs6WF0Z6QoIAZUyyj7CmjTpg62DvTURhzRGb4lmLt3X/wGxaFeY11i3RHawm\nUY52fXMTYKqsfb6kGCa5ZBkx6w36HLjAd1OSJcREOkg0s5e7AvGrHDJQIpKm\nz83Szd71RmRYcwOVlrHfFEeV4g4FvhS6Up71UxbMk7GyohgxVB9vbhEZQoeu\nN30LWl+hcfYQDa2HLC7agJPJKyHaODCxZwZbsGzry5BWvjQdI/kxadNionFT\n/8ATn7St6popVvLVFqtFXb9OeVgB1eJY87eml/LYVu0JJwdyG0gNCuD0FrKl\n+5QqPMeMIes9LksPNf1+b4NM4U6pnWZ17EMc8k47XnUm54u+k9w8oFgN17kv\nSdoa\r\n=KyJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5-rc.1_1542154641182_0.2170037153589821","host":"s3://npm-registry-packages"}},"0.1.5-rc.2":{"name":"primer-popover","version":"0.1.5-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ddc5b5ae63e84be19a58b34d6a5bac0928d560f9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5-rc.2.tgz","fileCount":9,"integrity":"sha512-luHztaKZ3QFiqfCUq1C9UMej2o/8Bl5/4OXAvXP+YMYsOPeiEfg7WjcXKWfNxxBk+4LT12DbcqhJnaTdOcJJJg==","signatures":[{"sig":"MEUCIQCizR3zNNKvMHj447IX/UmYWyTaW9Augf2m6UjAK6kS4wIgJuQ0C17ZmpRqly4wP0q4qdEqWJJA/bjgp+8EKajfFj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7eckCRA9TVsSAnZWagAAbpYP/jnM7H67m4AbJOVVbtwd\ng0TbzYQyfVFECA99hfyqX/aofyUivtAwproaWGUT+CMuUQQGzd/yoOvDkff5\nO3b0JDjHQVKC2AP3IDB8AXL+0vmpjlPAUUthUz6+41VeAWVB5hVUsoJd36Q7\nK6od5WCrV5cgSLtARDQzFMu6sHZLzzP5fo5wAVAtVtn7IK4LFYyudpgfE8NF\nDYOE2XNFOVHkwgR9gBIZq17R8cByDJ1elhaGdpjOyieIvcZLBqktOyuU1PRl\nc+ODBMdjIk9PpEs2cJ9ZbkhgI2v+ezQUCPwY8cdaKSIubTvQzo5s27e3/04N\n2e2zCnG//DAXwhUm/6Nrq8uHgOmA/C2UF39NyNCijgOC7a4PEqX18goBVbvc\nYVM7IgaZhLgyQMDwW8tYYhagg66hHgzsrg4XItNGve06YSrGe9iXQEtoxbu7\nmy4Guz/Dq+ZaAVBbFsr6iL19E2h102Rjh24rHX3Scs8SXQqjNh9Qw9ECPUHq\nl1RPVnqIzuBaTgrT2efM6TtHUHeMU1unL8E7eUnfqsWrE/ULdUtqCHfyPm5J\npbJ5zQZt7v1+ZSlsY5KRjg1+hjZfI57AElFWOwq7K+F0oYmjwpw8fLVfvxlJ\nCYPDiNpKHvCv+2yZSeGTS8f12QWy7rEZsd5ya0ndmL/YOSOotJH9Y86jIQci\nR8f+\r\n=lQPh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5-rc.2_1542317859590_0.2031133434498935","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d651913a":{"name":"primer-popover","version":"0.2.0-alpha.d651913a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d651913a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e276f816f5f715569bdddcd8870bf4938cee53bd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d651913a.tgz","fileCount":9,"integrity":"sha512-cRnUp+uiGmU45ytUwFvUd9MIbaeFr9EKoUQo+WKBxbJfKnyu4wluvWMGIGTQMisnP8VnqlhjLNGlTdribBJxcA==","signatures":[{"sig":"MEUCIQDPtcz4+Xy+45DWg6jWB8qa/32G4pdy35jMJTrYA1r0KAIgFyzm/upvRGD1u9Lm5+QmsOZ2lx8vcaWNlcGIOJste2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7e7eCRA9TVsSAnZWagAAGX4P/1FTg1On4l91+wURGWDO\nP2XM2snMKNbmImmXED4eA+goUCvkOzW8dog+BYPWNWfC/4dMd3xrujA6I3kv\nvJxXpPhPiqw+kXtwby2amoeJFJCOTXtbpdxSj58v7l51ESA+xEnLiMAZDfcH\nYt/6LJ31UHFi0Jua6DRRX3n1FwmuBZvdTKqb8qDz0ukREWKjC3q9yv/Yzb0Y\nfZI7FuhiardARZszbRB28fWS8W4Mt2VfS4yJOdhO0eJ2UupXkiyHBcgCZknz\nqi1vDpNZK6dibQl2vfH9yOmszoTanLJk0tI0Ew2DA9adN0ClATv36nO9IyJD\nr7yLzcxJ9YeOrHD0aBwygD+ks7cauHjCc6Oh9pdeY1UX9gJ+yC6029H5OT80\nroYAdqfJIeVWdsMHI7jJdXOb6CTwunXZfk0nEenEQrPyP0PcCdNnf83k2ywT\nUCrh2Wq0GSL4VlCiGypGimb+mE952JzIZ6CcAD+suI3z5VYqF//qTFu9/pTA\nQSeiwk5yEnt0s2XD1dG+inDjit2WFCcNKZnA459T/uwJA0hGrVVK3A3SQGH5\nt2JuOONzb5gjh7dPK9CD/OdD+VHOS7mhWZmUAm3FcEzpStvyziadN2HtGdWS\nnA0gpstdm85u876UzmERUvxhm/S4hWrcsWPEbwiH4MQfwvdQEYhJzr0lguGg\nGRpk\r\n=R8vp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d651913a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d651913a_1542319837502_0.9044260485617397","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ea8762da":{"name":"primer-popover","version":"0.2.0-alpha.ea8762da","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ea8762da","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4c5e306577b9ec2f46924ae89d23c84418d44f97","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ea8762da.tgz","fileCount":9,"integrity":"sha512-HXXQIgNQ6W/WUeSsFM7i0Y0Y1qiFsYKyeONXH4Xv2lKEhkZpKhuzdmCa1uLf7dNYTtC6V9cLvGvmydzs+SpSsA==","signatures":[{"sig":"MEYCIQCrfv0g96Pn3Co6rcS7Wnay8r5ybfnUU38xUgiXiNelCQIhAKdgNze1IUV6gMv7dZ5zeY6lv+CDMX/k7G5la85TJ8/Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7fOxCRA9TVsSAnZWagAAmlYP/27kt/nbiUHPuazSPm5N\n3u+9fNKkxC8QmmrxTDCqLH+xLag8bKRgJu1fHBxc4KXD52JQYq62GZ7bchU7\nKe/pz4GQj9eg/Zyk5phOo4BjyGEkA32vJVumWu++y62Y8S380G4fTtWKtUqV\nZov5TLwPocJ/zPod5U8oYQXuats+LI2x+8vjETOKy0CwRTZRQlfs73nJhvsA\nN4/w6KZ/ANxPKEQCPPMcHJYZ8ea59YW0Ba3bJ+yU+997bSuxuhQJXnuzsV/Y\n07JEm5Q/wESZv5V9zuplVdzNzjjUPBSk3xEMx+MtaGTwn5+MoRIBGfYYXlPE\nxnuFhX+fK6SviX7bpgSkMvXQC2eD+Fol+wPtCa4gAKSH6H6yGyPZnAZHiBpY\ndUn/yDkDOgwiJd+4GWdrywjihZPiXcdsz4GpPeT1m/KJHkfwUIAlkfIOYrN1\n9g6da+/cVid+ZyxifRYGOhwujcLR/gqed+q+ZDhwL6d8b7jjUBr3wvf+UMyE\n7wuFn6pjJ1b8WB3YwCoxE5izTpEKJ1EZSVXuLtn0L5xqJqMaMSH30EwqaQtS\npalS/VnmcNytYUAvgQeKXYA/FiZSPZBXP4VU/XBqQ/Zh0FFIdccveUt3xMT/\nFxa0R9a/ji+D+2dk6RR8K59ltWj5Xjod7xCJW5aZq4HtIn315JvD/fnAuDd3\n4nWB\r\n=ncTI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ea8762da"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ea8762da_1542321072485_0.40766518139551344","host":"s3://npm-registry-packages"}},"0.1.5-rc.3":{"name":"primer-popover","version":"0.1.5-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"66fa4f5503aadf616f54eac01e9d6fd28a16bea0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5-rc.3.tgz","fileCount":9,"integrity":"sha512-lOzE9iu5I7AyOxSSJJ6rjhIfhCFhEfZ9w+ILTDX8hY1k5YjYYPSMlcZVUnVaV62+tS5/9434aLp0P6YtYmKKLA==","signatures":[{"sig":"MEYCIQDbragH6nGrHTGoNPigRmxDMCdOGnQIr4D9N2rHUZDHDAIhAPPvcmZd2hNdfKghUuuIagTrPgiWpEcSfR7g3Bg3C12V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7fpOCRA9TVsSAnZWagAAFWoP+wQ8/fbhq/rQ7mBMfj7Q\nSB0rXo8SY2KktMFkrxMDkGQElcTi3UQ5jGV7KM+LuMN5qUyEHMwPtBsNC84P\nLlyz1MviXqbOMsmt7NKSKncqc62FqXN4OrAksuhGN86lSN+DwCsll95Vhyoy\nyels/jT2/fUOn1zyBc8AlFPoS5Os6IDRc+leEnnwnqtCIfzBMMpi9bqdU9tN\nvoRO0JyzBWAAfnlOaKJCyN4oL0YWcJHxA+FIo32YhM5T6t61CQJ7R9pQk53q\nkrjMowB1BXS51s6Tf3kRM3yLJo5Jz5606wQ9ER1MMDyGeAeSnseIMBMZ9XYZ\n2WXco646BtfSZwqS95+lzT5mPLg42FH3fxw8yisaeUlL5dlwzJ/e+24ZOmw3\nd+cYf+cifROp1HpLqgJrdz0JwjQNo+azIU40IXmyUyOsKuZcB6ueS0jKN1l+\noOACb1KH+H9/mSG5Qulj2t3SAwLnG0Wfnp52jmT+2JOPIUYLv3rW08AaOkaB\n7LQ9oElkIyyq00yNU5BEFCZaozR/3d0uuicyW59/SQnapczy7s+PuJ41zqnW\nz1dIf700ZY98LTOB3XXld0X6Mo/EmEPDdSWd4bPLSiPSKmvr3OPsy94Meq78\nxIIbpz613wfikBaXNnsOgXMjzqjEO4yFCt5CJntuoPrD9+ME2SrPxj2fMruT\ntjFm\r\n=Y8ge\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5-rc.3_1542322765400_0.3870469386630129","host":"s3://npm-registry-packages"}},"0.2.0-alpha.389964ac":{"name":"primer-popover","version":"0.2.0-alpha.389964ac","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.389964ac","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"13ceabe3d0c2d14e5da2b0c67b6b669049c3a791","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.389964ac.tgz","fileCount":9,"integrity":"sha512-DoqiFQ9t8omSXYHXCPbOgJn9iiWNXKrPJkOoMqwfSsN7FkaDkjn/98ARfidp0Q7mCvMaSFr2gYFiQhg54YCaHw==","signatures":[{"sig":"MEQCIDginbBCnBer0rqbxYz+HsEJYi2Pw9AHTFNGRrrNSY3MAiBW5of+H+H3TIRlDyDSsYhzwXQ5vpb0iYh3ZRmZr5Vnjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7fuaCRA9TVsSAnZWagAAL1sP/0r29PCU21d240t9C5wo\nXPRUCI9CkGp0Yl24YS/y+5w9LNviQrfvD3NpDWqDMc6WzABDFOGLMs4slKOL\n3V33guP2jhwe4D4P20Ad2LuTj++AQ0e9E+eFm5vU1BLnAVXHL5sP0OzQa4KX\nn3paKe9CKZg6pSzTLzhFToNMXztqRcOW8SF6SFsazmmXxMpQzgHZYUtavi3q\naVsPvXcIb8xX/DMtd1Vs1lPS55PgRHGIphYVOYozGmrfWCvwFLo50pxAt/04\nHAb/RYnwIkVGlRbNeXSV3iw1MvjJJDdbKJ03NsSEm+2EMK/OOApfmgi9QMt/\nRE7kHFomJ6spf33peHIc5n6uNtEHaBp09Vm4AgePhB973PqKaTGHrX4y0bjY\nmi4uM+lgQ8qo4cAOLsq3FeYNv29ShXemAmBnb8Nzji3fZL6DE+uvHQ9iCxY/\nkpaEYH1sU0IPLigm+o3VnR0ujeeBwP6LAsSO5j4G9kE1iUIEe3zbf0clhIqH\ncjuEMLVKcoeNAhXX6uC6zooX+DWdmUPZ2IXgsAWO+p4rfHUMRznDEhurV76E\nbTEwyBdDVxDJsGHrzqmjd4Zx9XaVLZs2tupJO7jRqVrO66JKrQ/W3rnig2fR\ngd4ZzcW/qb0OP7xXtk60JThwsU7DTkGTNHipHnnvjL/L0nl+9Z1d5wjHoDI+\n1w7c\r\n=Kh4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.389964ac"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.389964ac_1542323098157_0.7338001972191543","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c144285b":{"name":"primer-popover","version":"0.2.0-alpha.c144285b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c144285b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e1d1d55d775b4fb996f3a192fdc0d6fcf8efc03d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c144285b.tgz","fileCount":9,"integrity":"sha512-Acr9m0C3oKgu8I/q8zQMfTNRSV+zg/km+E0v9Mctb4zM7d1jM5U0wp3gw+vxRbgfMA/InFiXCcF7XLGyDZ9grg==","signatures":[{"sig":"MEYCIQChZJWQHVn5469b2rqCl3cWULUoHBTXaRJ25OPJVtFAQwIhAJpMiiT/Nzowp3pM2ELGC3ambnw58FY0gLdFKVwg3KKU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7gXICRA9TVsSAnZWagAA8h0P/A/o3reTkLkJPneF8wao\n0Ovcvk2N2v+Ts15DnDcpzJvyM64FCezHCRe2p+MGTS+Go84DagkwNIZKLJaJ\nGTNfwV9uaY0l43r/3GqDeh7BTkCGqSGyETH9ri8ZX2miw49vcOSoozyoq7ni\nADuZEQRFMt4b1ojywecpmEEZwwNPs0cLy8TKrH8a4dEnqOfmolQoZIL5aQOz\npMEN5srXYSy8McVHC3cddfw3Czkx3c0cpz5JWznRUQYs3FeZwStUZRDPI3oe\n8H7h3GjrSZAMdv2g5my/CcxzAmCpo1rJ3J4po66wfHw8F3nOsHPJjhC33DjM\nbsGYMffMkkt686cn3OuMuIeCIhgkrQHz5L40oZ6LHi51SCW0qERKBHaREBjH\nxpko49829VEW6JYFXElwzmHJV+bt+WR21nzFPflIHXOOS8saUC9PJG01sjGO\nFxXQ00QxKEZYkOYHUuncw7EieWpNJ6M3JPFipA7VOoIlmMmjj6izechxH43N\nVmoyJbQShCf0td7YI/4g2WKVUwvZkviwM3nU0qD6SpOQNw4cW/xeQGH5mKMJ\noRTp4FH8YRKxUnXc5ZlIMooLa78mSvVn5ar7h+Xi0hXIGBULdFjI7y116Kel\nYewbY1GOxPjqQhgBpMjkU5iIG/LZF3wl+sqEGqZrkCw9YU0sLR+K9Ag4AUzt\nqAnq\r\n=QVSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c144285b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c144285b_1542325703909_0.08552505088042017","host":"s3://npm-registry-packages"}},"0.1.5-rc.4":{"name":"primer-popover","version":"0.1.5-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"22c754bb9ee1c6b1493193dee81084647b33d7e3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5-rc.4.tgz","fileCount":9,"integrity":"sha512-oBDyCsKBnE/t1JyXTSTPRrwlg7xdH9IPdlwmV+wNeMWIFxQDAX+jfXv7neuIYdiXdhu4aX/hU55klMc3n7Hyfg==","signatures":[{"sig":"MEQCICs3UjcdClraD/x+vUgwgahggVEI+ruCg7eV/cyxUNvrAiA6tm2DqM5DyA2F+MU1lq9Kyl4NOyi1/YgxH30kzc4BnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7gudCRA9TVsSAnZWagAAjlcP/3y1Xc7P2EFZHPK7IPNF\nMb4DApAGWHbG2YjW6J4+OHgSErqjAIbLswsuv1bylXtpoI3rCB40Zvl3nBhz\nhCtBeLpn449oYNnVaJlE1V7H4EJJ3w0UdQOQnaSZCFHcG0pUyNV2paSzerDo\nXLq/y6L/zHYd7Twku6TOJeNyWDM6Fxv8jFouEk40jr/JHTytMQhyIc8JAUWg\nN6e79GX79hKSkq+pv1AlXBP7PSQM26VUJm4jkBjDGbxOZub4YKHXfHRcu6LG\njMEmjB1ofStbCHqGhIuc79xpuTn9Wh7OFpktVlrfTskolumjFSlUEDX2HRdt\nmXWlUxxqfpfBlyBgwHG1HE0wg3SM9dnb2N0CQKVSLGZq0/f3IWI1egBDQneO\nudhsyZ1r07N1DbZoJjCJ1dN0vkkA/RZDwq4e3d63WaAdaf1H2RoD+PU7+Ihw\nkmJIhmlZCs8/YYHp+6GcH3DBz/SvaEHFRHYWiOT4xfh49jx3AwrGrGhwBc4v\n42GaKZ2OdDC+B34KM5YaVvCumOINPwJ1LUhlhVm3lLVwh/qgJO0+1Oabx+LX\n/BVsMUBdOZ42p0W32OeBxK99AA2mOYZH2PMGVNvcbvOQlZDuaVBjlCf2aqk6\nxEzEenRbRQRsrHjHePrSRX/5Wb4Gaz48Tx8gwvRk1Lgi60Aaz9zd+HKXLLyv\n7pYw\r\n=adtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5-rc.4_1542327189038_0.6342009753943854","host":"s3://npm-registry-packages"}},"0.1.5-rc.5":{"name":"primer-popover","version":"0.1.5-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.5-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"48f9889aa77d83560188fb30c3e305e121d0dba7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.5-rc.5.tgz","fileCount":9,"integrity":"sha512-8ocxv2N9tMasXAvJ0kRAejRr0t2f9EEE/OJEY5h3ZJmeUNmAUpmTG/ru96VCXOR+xIv0H4LFdzzjmKYnIQxl0A==","signatures":[{"sig":"MEUCICjLapkXosH2MJIGHYx6VnUwXpZqksJVaLETzFCrg3uHAiEApo2/HmV1HVoCUy/uENgi1xqDoPYKXCSVOJiaS+X5UmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb76DeCRA9TVsSAnZWagAAfuUP/1QaDAWtPyhvFZZAEsfJ\nbHDTk6RyY9tHxbhWVWB96uK34nmGRe0tiztKXTq5NYHIX1Urqs/AtyTbkG/o\nuUwvTwtU24UXU6JADTMAH6kEaa6V8g79mE4ns1xuFAsONhrpTB5NZ3vUBI+P\ngaXvx/tChTXE8lbPKrC7+jA5tBcGjqTnCDAQNuW5d0LdBG8Vx7NiKhnjGV5D\nbFFAUsTzItlD8752s1uLuqGRe647Ba9cQoR+jOT5kGtVlR6ahv+tDZsUyEqO\nUu0qGHC44dH/gcg2bEalDfvD+kdbtmMjGECdt5T9zxewqgPMDjpahlAvwkkw\nR13omIUqelvxNd3rDCKrpgXJXVls9MvyjnRHLBhIMv08+1ylrnp8lHoD18SP\ncCq03wzpHZuHXF4Z5izbJwO7KUNFKZECJ5HmObbNWATGniPl7/3VxioXuCLf\nWr7Rc4b3AAaM0VKjrXiFFYbUrn6lPPLW8QLceitR/sQ+T9ePAPOMHcKZbgNM\nSj9Tf5p/Q/79FX8ld9WylP+KFl5ummdJbKOCcJPVmveODE/SluIRAD9Kb/5I\nY1PyB2FsQisFdeQa16PnappFEYeuasMmTZ9lXpecpsTpK/9vHjDfpNY7E8mW\nSNcZLjwYYAUblptAPpaAxquJW58rfKA0nT/anoByu9bDMGEu9u4E/TwZKS2Q\nZmvJ\r\n=jFm7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.5-rc.5_1542430935519_0.0994997156386821","host":"s3://npm-registry-packages"}},"0.1.6-rc.0":{"name":"primer-popover","version":"0.1.6-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"effcff083f23bf55b80e3adbf7e36e9a26b9b786","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.0.tgz","fileCount":9,"integrity":"sha512-GG6Wc83o1XtlloIDnW1zEof/Qtgx106CMz6c6qlWJlnioNEOxX0X9Mczn8x3C3ReoBuu4gQiYNh3dyo5HrqdGA==","signatures":[{"sig":"MEUCIQDGjp5iFa95uhtrjVfkcVb6nuO3WRYp6BWqF1468PEAiAIgLT9d4FPE1nUWGW7dsgZ/le8w9hPfekhatX44dUyuoso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8x6GCRA9TVsSAnZWagAAr8MP/2AhPHtntLq+fpsQx+aQ\nf/w9cjhMW4vjnRp71bf8yKTCRQQRkgNYau1M9pTa/xobKX6OhCh40hsezUqr\nj0VcDvyIktoxykuYJBHMYpPyb8g07Dt6n+rwCwi2fODgftCNxNJE64lAd+Qb\ngFSK4ILORGEhezGowquHJB5s/jaiRJYfsXYDR3yxbGgCnVXpnA21AoQWI0QL\nuZzF+JIRcVhQ7PfZArq+qnc7O95XePbBBXaATkeDKSunJxXOPs0ptXDuYFMe\nkDx2sO3eEe0DUGvJ5DVGJIJw7eCkXQpqA40vqLbTo+pChy+xt225nXQUohi1\nveIGdgDGjK6VLYjWfxwIWgqGZVaFQK7wN/dx3sf1T7F+DWkdTNkZtHaI2Ggh\nhak8DAooAnH6jem0m39+BSEKY81/CvyOfkoFjYhvRuTs7BocWkdCVuslaxOc\nMmZHcmhWNA4XPr+6SzgFVs9KlR/rKPWygfi7+3Gksc97/luUk+h2gC9Vp+aM\nu3hWnjJeEFoDnQ9SehYWdbZjfKnIXpdUq3DNW7GD+BvND76Xv469y0Iwmhkk\nD1vXsZ6nFbqvJ11tGaj9sAWImiRUDE9f4fhyWtZ6zUotvKeJ6nxZihpaOpUM\nDaxlJpiott88q5oC0eGsrckvobjUk2DO1QaoGVgMwPR2iWKylhrOWeXUImrg\n16Op\r\n=VtxF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.0_1542659716876_0.760743809870235","host":"s3://npm-registry-packages"}},"0.1.6-rc.1":{"name":"primer-popover","version":"0.1.6-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"86a9b93670bc1a2ad4839853be430345697296ca","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.1.tgz","fileCount":9,"integrity":"sha512-9SfQ9fiuVFELnmXBEtro79+SLdHK2Mt8ufztMBwtLHy0YzWRAxQA+dow7g1qtekjO5Tg2jXrClp8Ji093AC5gQ==","signatures":[{"sig":"MEQCIDIdA35ZPc9K9bXBBVU1W+Y4Fy/X9FxwE3GzfNsJ0Ib6AiACcWUhotfjSheOYr5lf12q8ECW7xFXeOsyIQKlwH2TPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8yFgCRA9TVsSAnZWagAAhk8P+wdwzF0/rW9rxJwkEJaF\nxgf6YowiHHApSLgLUk7PV5atA4YT4D6dQVh4VlcLgcokQSYCvov3a78pFIkY\nvqwE0db2vd3hZc5Czsskc4p7E39tATDfcAYR604fzVoNEwXGbSXAhWQUakLj\nJPCBFASqDStRQC4nRt0lkaLBaJMyNUWj62oro802H9PEEYDwnFW2bceM4u3l\n5lXo6viewQxCvBda8p/eub627M0wbaE4lwdGss0MWtQNp2U+DgbcypNj6xsd\n96QCLNRlxusqz1qQbeGTNyOxoktYRgCISQ1a/f7foa+TVvL+/6DGejm5HmG2\nqWNXgr4vePxLD/J4KFIxnzQqr7ZnZrcuGECojhRMkZ7+pRQzE3kSxQmwcXWG\n3/SGF6wkzQsEwP07rYJANCU2ecMNVMiJz8xHJNxc/eJliEGsfhtBowtlJjvx\nvsV424t/qqWUyFoHXDd+OH2D2DojPSeaukt1YSAwTaXc2SJ5iT367IOJelTN\nzrRlcH+mftHOwlR+7ai2c5tmZTwm0k+6NSXfKxMPYnu6UBQxmbTAHjuX5Bq0\nF8KRfRMEHG/TDMsmikfGn69auSdSa+yfXd5zzoq/9AWxKSeGlAmpz5TjtC5x\nlo1vAceJZIvRbiafFyvsuRvYpARH0ak+jThU4m7TdlxhdcplxitUYCDVSpgb\n8jQ1\r\n=VPCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.1_1542660440096_0.431780476406628","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e9889e24":{"name":"primer-popover","version":"0.2.0-alpha.e9889e24","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e9889e24","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d071d07e6262c2ce1e4a7097038ce552b285b0c6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e9889e24.tgz","fileCount":9,"integrity":"sha512-sRINmn1xFzfxGkoRa+q1XFVe4mhn2i8jLnw73BZIuVz8MpE2CgN2wCtM4d93Mfpw0Wk69eZeQIQHelw5aNT7pg==","signatures":[{"sig":"MEUCIQDaZP+5xDUt/o2r5UcYx2hCY5Y8re3w0/28rTzuuvD3KgIgFHf5A4+0k28+NgosFLwNM+6Ibdyb4fs9riLi2MESpyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8y24CRA9TVsSAnZWagAAxD4P/3P0Xsi7I9Y4EW/sAMmE\nhQFNfg5itO4XGlBxURi5BH0B7MtH/XBUPEQ8aQArwF9yfQhda0x5k9SLPfG3\nk7dhynx6JbEIfJ8RRnm+pNWO9IwUyZmwrvalybkc7scAKIF6DvYk0VKnwaQB\nFwVFStxmcTroewg1uQ9ewTmkdX72SN7vS44t93a5v4aGN5JZcdCLbDpiEdxV\nicjRhouSCECdLP2JSDZCYzI6Zbg9TELAtjETDaL1Sg2/LQSLWZKeg7mJr4Ew\nxqJYY/VAnRA+fUwyGA63txIpWy5eHJm0JtBym4fZx6fHz7TkFMhHwXGO6g46\nIK6V0x0CAVLWOUDjElO5K5wZPgvUJbq1keaHAsrCtfUCQqZVM9h6c3jC5OR+\nw9xsukipn15M5iZSTHu8no+o3+kJ59TLG9PW6HhxG9jGrbk97gKZuRnS8xOg\niX53fXOZW6WcBioFZPap1fhmMLF5AKWzcjiDx58o8pu/SGH+28ZA8q8oWdXp\nhzcnWOSBFwdNtPjr2ygCttws3EZ7qnfIwIgFRJeiEWr2N49AG37Mng1dyjel\n4DU9h0EE3pospzJtb66/+GelHtujP1hLbaPkaZ8jF4DYNCXegItwp49Usam6\nfz2q/SPmyKxBk3danfc5lr27uoTE3GsHhaSgarTk9B2cxVnCPhW4LfgiIyPj\nliCB\r\n=0EqI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.8.0-alpha.e9889e24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e9889e24_1542663608224_0.09612888975591538","host":"s3://npm-registry-packages"}},"0.1.6-rc.2":{"name":"primer-popover","version":"0.1.6-rc.2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d982f8173b5be884f9d253516fbceee4fd529f5f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.2.tgz","fileCount":9,"integrity":"sha512-RlYl64t5xi/MIwJB+VLHeR2sqETW5qMf8XmhcpnKzxbqscrHarkUWMks5v5jPIk4mPEWsFX3my9Pkj+XW2Y0/A==","signatures":[{"sig":"MEYCIQC0xlSIpmNq50RQEXYhWOoyLXyfTTVW5WpoCiJrlr6LewIhAPy9lgqGK2B9uCbN+nsjTbq50JDqkcVLMzoQ+rUwUJhC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zF8CRA9TVsSAnZWagAA6VwQAIbQ7aO4HGSEN8GYEfZj\nWTW94Y+XRztJZO7+pkCst87KMUWy4e+nKxbb09tX8CyuWu0Hb2YQ2Lr++ApG\n+zA875b51zLgbnAMTKNCw1ZIL6OXjoCLuOsUWxVUQIi86EHHNNyCsnkRNLzs\n5QNtcUvL28pM8KPo2lgW/aK+JNFBngmX7UiG+3RDetyXaQFURiAB3MB0eA6I\nTGR8Ciy0tQVIQp3VyASu3WthxinfO8fi99lK5U/l6A8jVaJP5P7oDK4VhRGO\nDmQ+ZHW38KWJKx2YJYQirYKBJSB67JXuLLshkdGU1KypddX7U3df5xEMkcJf\nYR3JkwRjnghe67dIfgOCLSBc/LwkfAGuPNaoYRt9VQuXxmrov+RoW7QbIuEY\nD6wcWCjvFRl9aNDUnKLKhCS2uSxnSxOwUpCOUIuW4z0lgYmiHZEVHm4y9SLD\nHJUS0yqIZnT4dXOfNqgCHwDKwvzhOk5n+5W+PtWWvejw+txPq2+n5mlXIpyA\nD+gZ6WUVTuylzhhDOil1fR17aHGccXOOajIecxVtSaM9TeU4BRzyaRN7yY+5\nKTVshwMUmsM3BiUNVMtl/zEL8pWucWZJr2ZBnv4PMSgVRQW/QCavTXQrYwYy\nS63Zh+/tQgMGzeqfJMOu5QfGcHbUexBgIdXWyi6kNcHOQ+ZePOsDEK4Pu4c3\n7keq\r\n=ZBWN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.2_1542664564523_0.8884747499830823","host":"s3://npm-registry-packages"}},"0.2.0-alpha.314bc862":{"name":"primer-popover","version":"0.2.0-alpha.314bc862","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.314bc862","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9d15ca41ab8d29daf5bc8ac7e25ef14c6ec84e3f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.314bc862.tgz","fileCount":9,"integrity":"sha512-TDOgczzQG73QjveugMfv+M78HVJHXagEjrqpPtQFVbp1ckyiVMQfvABDstGd4PJ/+OGWi54aS/fkv4bDWDu4RA==","signatures":[{"sig":"MEUCIFuvszGcNQzxxVKGmf4ZvX7cACW1PFGT3ZFD1CpfCzrbAiEAw3P8VqKJteXfqiEZsvbQw9PC7YAKBcUVboGXQ7aVSh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zVFCRA9TVsSAnZWagAAIr4QAIxk5VxsXERPpoDOHM5y\nzBLCDoXwPCXizIEvLZB/md9WrD8v0JRW5rxShbeFrQlynKWKxmXBZPkX4+g+\nqXgx7+s25uqEsG6d7NFX4q4vr7yKx7hGEuD88wxpd51a6UGcabqY3bjfOb3t\nZoj8nsi++Lnt6gd+c7Dk87wzocVrUUq+Bvl4KVSt3RsyMzr4Up4anzAZpa5O\nLAOm62TrKexdSjJmTSiosHABETZ8fzhRIBFCc7P5b5cLWpkz3kJ7UZTfxlFG\nuGN5ChfeJVPNvNQiJp6DDcDNm4ByI+2W34G3CYkTiCMBzVIGcIsEpmiscczC\nBYqwyUkTgsHbos9kvPhY8/9NlSWtLd1YOR2BKvYk2fbj368MCtBS8QPO3mLG\nJ6/Y3GdI7B/wmaUnHWRB0/4UaOn9XXof2muHe0aK5MucxvZfTxo75A1DJd4y\n9K+r1Vw80VXsHIct2GzJuqULCcBaaelMoGlt7Mr0lUHemEqxYwm99Yr3pBUG\n4+9j9Wjwo4ujDY819icVX2HZecmdRWTJISvR+PywZcU3pp3pgAw35InxgRhL\nR42zw5rgGg8W/+rJE5DsanNfiPNz3Jpv322f9VwZKMo3p10CPV1h34NQgDlU\nbUrMsT/3TW3VyubwQ3/+0sr5LaF0i5Hos+kIGUqS2DDHo6xng4Fwm+N3FteS\nY+N5\r\n=Cc0B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.8.0-alpha.314bc862"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.314bc862_1542665540582_0.5176410126143904","host":"s3://npm-registry-packages"}},"0.1.6-rc.3":{"name":"primer-popover","version":"0.1.6-rc.3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"671a353baa6e3f9ea4a175f221ef4b66816c7329","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.3.tgz","fileCount":9,"integrity":"sha512-GXH3XN23ITTaSsAqydJrAM0msbTeVT5YcMtNaZP2r7Lbfa0+Oa5WN6Ag+klAegnRsK7l2/eCf/QF+FIOR3H5dA==","signatures":[{"sig":"MEYCIQCrl3Z2/U0UnwCMME2ifBwPVyzEiwrvDMVuKtxa6DNBPwIhALV4JIHIAwro7wmE0+IWr008cjrDyfYwydWj8qefs0ku","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zpmCRA9TVsSAnZWagAA60wP/RQtpvmjbSzfF93jDuns\nHRTrb7Lj7+S+TIMYPAaF3VHKyV2T5MizHTErdPKQSjjBjsRwSw25aM+KuYNA\nTw7+Y69PysqgKxuA5pxZz3lW61GwIPy6GDGieEogksA/+M3Wv8TXRjsuuPmb\nTnCRSPj8ixr0/CTdRsG5V6cmuR4h9ulYpuilhQOesUBguISf+tr8XDUHR9yV\niCPT2EMgzC5NogeCn9I4GprKi+KsazsnmruYoxZz89uah7kddZMwTFLk8XnE\nn05T55TN4apuWWdcmqn2KThiTIqJrQ/w2YDcZDskWsFxmnces+7a1+TV8cvF\n2pAdVwtHvbS+AtONLxcSIkn4w7xzb6XeF1Eh8Air0krrJ3ULyY40SwlMBGBt\nSFV/oncgcGBE2vxCIOlZGWxZUCN4Bayho/VZL/F72cQ8f/168kTwEYBvNbn1\n25BVvRhorl4Sf8v9PM+W4zijNRJ6D4mmoBuCyH81BY2LES801veGeqhzQvVY\nx10uM6O2EQdSrAUMZaTbmlJoxAI2vuCPN5zgNqf8uRRvPnlUZIKDmDaMPNmR\n7sDkaUPJhP0napRd1cTbGY2ZZYRH6uv9Q/6TtAHFLeHZnl1gsBLJDwEJ/bfO\n3Lh5SAdcijAlazfgDocprAyYEKIkBYg6Bz8qPUU4d9IkpiQGnaLNOpWVD/RJ\nWrvj\r\n=vB+A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.3_1542666845872_0.9541064428385986","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2afc388c":{"name":"primer-popover","version":"0.2.0-alpha.2afc388c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2afc388c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"326e35709849cd229e7aecd9b107223e10e55993","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2afc388c.tgz","fileCount":9,"integrity":"sha512-jPQ2qLFT1qEFEuHpgQv8/SyPsNfsv9hDUF8lq4s49T6d/6ImJnbNrLbiNnqhWpEjsb6TioEqxpFaMVCjnVLBmg==","signatures":[{"sig":"MEQCIBipeRySXo1og84vUVCFjCEeI7Nidf3oOO78WTUK2I4TAiAm90i8Vp5rOkJqffgvHHqfPNJuWCgyEumHg37h/Qg75A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zxeCRA9TVsSAnZWagAABFIP/0JDmp4BKa/olzqFqXdK\nYxE86gbkx6rT+oK3epgw6LQ5OkjwHH0MGaj1t8ybem4mr+nFAQ5VPMim8CHb\nxNLwjY3s4PVQuO0xdUbhd5XWgsOEHx5wStTP0JmzYrF1p5W6s4MKYKY4Ksja\n5O5/482vaNHKJ42iDx2V8r+gqWIxfzSVS5lP0LAaRKqhCpdJTIM3vW1t8CCa\nt4iZSvl2YPKTK8bCR8e0Ox4uiLnPFABRVcXvw/Mu/so7kgC3F2SMGat2YIOL\nD5pwg4scaxaPD85fRUGGd0vTEGkvIHQz0hQ0A2rlrHPNC9dGccIgAsrHZzZF\n20+r73ES+DGwZ0rhgic+TJCXi5aJjaanONWxCjYHJwLtpO61DibyTgH6m24X\nN3v+1MKdaI3IFDvlUYKzlIVyG+eiXxqsUAxR1mpqFMvUVezBfBxgxl22hYeT\n/qFe7yqKtzPuHyKqIyYYJ7fcAoqFchIlhwpoVgjrW7EUz4EkPU9WvJGl03PN\npY8XuiF4aN+slc32DWlZ3vQHAKGuUvs+Gz6LX2Sl0Z1Lq26+Nl4cnskzrTF4\no6lPk9C6TULMVWBxsETNhAbicCpLDmGlEXiY6oDl7MXzX/MKDobSmuzgx8bx\nf1UymRoVrN/Fu5mBBphoP7Sg5NaSjWS695uGzStik6EKERxJwGDkL/AGi5v7\nH8GY\r\n=yQIT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.8.0-alpha.2afc388c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2afc388c_1542667357680_0.25894103848513117","host":"s3://npm-registry-packages"}},"0.1.6-rc.4":{"name":"primer-popover","version":"0.1.6-rc.4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6d54d236f2c5ce6ad33e7984d8c3f23fab2981b9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.4.tgz","fileCount":9,"integrity":"sha512-9f4KIVJLXfmWDpoxSrLeHboOJVDvRm8YCNvwEGroO6jLUpK7ThQd1uy3ncGRo+z84u7ZckeiNi0C5Uv0L/vHOg==","signatures":[{"sig":"MEYCIQCcZG7Ikfk0Am5dO2RMN+mcfdtUu1pjs2rs7FBMYMD1EQIhAMCjseBFMJdNnt3IHeqbpqfUoIb3Uu005G8zwuftoey7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8z2ECRA9TVsSAnZWagAAwJUP/1AGx5HTONa+Kl1wYbOl\nIilbLE2l+/ufQ3AN6saUYx2dEIzmn0P+isbXb5Ln8kxP15XXOlCi07NHDIuf\nDV2wP+mnd5kWVp74BbQas/keNeh4vhtyEFSD4DGa0W27Xy4bPLMTojXk3n4M\nDa39HToIF1h5ypTz52XY8aQKHtAgz5bOyHKaG4OL+pd8k9NZu5CmeXXhD6BQ\n5XjQiFgAhW9Pof6Bn3EjLGvCuWDrs5fR/oSk/uOVVRzboiju0hwBnU7HWE59\n70VCbIyUd945roVnQYA89bOlS/Gkqr+QkHsq2hkpGq/Zt0EbS4DSTk3CccfX\nqlzPfieZ6Jhvh2YS3gfi3vbuRFsCjlw4NzODrSYck9wrPvGjdnjt5MZJyoFz\n6oiSVK5cSHv1hapnjKre4kFGwjj7roqTePDin8UAKKuM1mki1Hm68aMmKKa/\nElaxh1bd9CdU/3bIqf4ey4hjTq3oR+WsRGHp+mXj/sgfBuNJw0BGkhexZtO1\nIEAnxqgZiDSQIrdemJyQDWVACAYFxp+pBJeVwyxYVT1x0scTTnibUsjwPoQJ\nifKXbpIvJVPlSv+Sqy2Frd6dbkuemyaofheQD+Mtaxq96kdzMCKCZyPrvrhz\nIIzOc3zN19K/x8qb2UqM+MCtYejY8RBxmsEYggMUmRaV1EdoVy/wOOiob4bT\n8j0J\r\n=u7Iq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.4_1542667652048_0.0864326889011886","host":"s3://npm-registry-packages"}},"0.1.6":{"name":"primer-popover","version":"0.1.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4ca57be31e00f1c5ca8e8986a750478a86371866","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6.tgz","fileCount":9,"integrity":"sha512-dG8Dnl2p1AZAjy/3wvN+iFnMDzxHYxHlI+4tJyG/14WiHyBCp6H0lPL4JiThHtx8yhr3PdWAW5I0IPyx/kYUVQ==","signatures":[{"sig":"MEQCICgYKIX7ubAhcFpByxMUiEfDWg1fnrVtZ8nMuPl4FpL1AiAJk70cogykUKaCpX8iSP2awzdHuoSwGTk7NX8G3ex2xQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb80+7CRA9TVsSAnZWagAAeCkP/2JPjgXh7MOU2+MF66Mg\nOrScxD9gyk33DbceAebe6kbgplxIPyF5SfHmIMeUSmnjM93gQmwPfKLXTvJz\nYnzZw9vip5AcTYEzMGbLve6YQFHnEQZxQBx3WCBzjY8yitreXmaT0qIDVFTY\ndFTswRu1H4iRWjf8kf/44QekEHAOcQAgpp8eIrRbuYNsRGVTFUXcpnu6MJN5\nxneWjEDCluuoN3+22CngGqqlHT2YV9uycUqCEYX6NYR7Yuvwc5lbpuVSlai3\n+pVVj/Y5ITUzoeHGO0KsTuibwqKycKklqwL+E9IFn7xNBPVhdWNk69CzjU8/\nEhjVRm3a6omkgOANNLcmnsAp77V7eRU3nAjtJb1R7NhGuwUzw9CTo/m6Ozqx\nzbF/RmynpDkTjNMCyJeg0l/SnxgClkE4ZtbQLXj0CDYF+sTI3Ak52ksQIKzh\nqIMKLsc0rcTVbzcEk/8a1UKTfDBxBj6BBOPsyZGdWrfKtqeHMOXZ35vftYO4\n3UBqop6DZR0YctPCGnyXRhdDHQmdodh/wycRMI/+OaIp21hVwpAH4n/m/1PC\nNFRaQdn/WqwS6uEojR9fliv0VhBW5wjnPT5lIT/R6pgyp9yW4WbyZm1iKWKx\n6jVvCDfHPSH2iaDVAc/8tBRq8s5p5qaeJNbyfLFSRy3dIBhdk82XMUyjGDQb\nO26M\r\n=Tmd+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6_1542672314920_0.43153049045652225","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ab2b4e17":{"name":"primer-popover","version":"0.2.0-alpha.ab2b4e17","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ab2b4e17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e7a3b877699eb06dbb7ed806b81a43b1a0638549","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ab2b4e17.tgz","fileCount":9,"integrity":"sha512-xPkNWPvFAE9mm2Chs7ZwGxGkBgNfT7fzPw0siE0bJY/PoWTatwc+rOxKrma8OOK26X3sBFi+cH0rC4RrJt7Xfw==","signatures":[{"sig":"MEQCIDWv7za6se+rJgTF2rvCABvT/1AbNiKwJGUO2GvOUu7mAiAZyMe9AFiawVnJq0UPaeJr0s9F4N+bChN8PRd66BLigg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9FTLCRA9TVsSAnZWagAAlT8P/0Pz5Sci3cYJp7xpuDjY\nGroeXp+Keve+NULOp+bWN672TJSCtELrTCyfpS8yF4V1qZDIvQtzjvSByoIP\naVMuU8EitvI5krhD/QLljlYZGS2jhttqI53zxopmrGdtjXj4hobJmV8VH9Z2\nmN80oAoQN51jFlZOqsHJ/3v4Ol3/WBmutYKXvdTXJu06/lTjm5ilQ6spmpHw\nZyBJ/BkwvpzwkTNK2YmUoppIsvbfUS8PI1ukRiz6yAM7JxPg9sAtsY9ktZcD\n5EdvQ9Cudrxcm5HibEnJgYmIJ5GS+z7rmtMfd+pQztImcGGnrwBrgjDhrExB\nCv0b9meBqgqyanSm9Ar4prnhV26uJ17BoH7KRnr1JtLaHnlKxWaRg/ibR0Ng\nZqsw8zZaab8GRWNRnrwMwOJHJuRTZYsKeSJMveg6xbJiacgZavxmO/qMWlLm\nIxP3OPpBeztMOiK/SYAssF2rxYKW6yHH8mXQcLrj6L2A5hRlkQkciQ04houc\nfp4gaPxb3CGDPzXcF87uRiIMK4aY2hY55G42LZrxijbuz41q2XvBLXADzrJ1\nhVqvXg29xIsBnv9l2xskslboUSUrdxf/NuE4bDkd+O8Vq76MFEnZZUZGLnIo\nDPtETrCAp6xY8DWbYN0lBSybEmoy8ui39SrSc3L77XiunnepP3FArlTCmlEp\nOP67\r\n=LpYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.13.0","dependencies":{"primer-support":"4.8.0-alpha.ab2b4e17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ab2b4e17_1542739146464_0.30816276190321656","host":"s3://npm-registry-packages"}},"0.2.0-alpha.62009446":{"name":"primer-popover","version":"0.2.0-alpha.62009446","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.62009446","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"13e9dbf8b64288a03b39cf0587f263460fe75b6d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.62009446.tgz","fileCount":9,"integrity":"sha512-KSThvXA1wsR7EBsBhpPY+jg/e18kfdyFW3ibEijUdvIFn5OU6t0+E158KVvA2TI6drbESl9X1ukLsLP0kj1IrA==","signatures":[{"sig":"MEUCIAjZ3GW3AIbSKmCUSkOhu9qJJhlPimztsHnx53t+tlr6AiEA5jzzCwoLW7P+ui/IWKY+SaXThRawnwaOx/GSVG6KWvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9FY3CRA9TVsSAnZWagAA+ncQAIgpKeUwYjgApmL+oy9C\nIbkSan/OqaM77lR96Ct1yc2xAU5KyQKyj4/vMoCunEgbtmeoNV1d/T7n9DIg\nvQQhetT0f5cDgtMRZzIvAcV7ik2h98844TKo7PnI/VfW/I3+KBq/UQKCN3Sr\n9p+k13WF9luYY0Aaa5BQ1bigeUf8a1JgPpVOL0CvrkWOQ8kVr+mlXSQE8s6W\n+zZDytuxSk27DAipx8n1EuAFkZKLPBg3UaRrsSHaPszZ2PirrFZylzKgvIM8\n4yXwy3KSPzijUWx6cO28C91P+MkYOJq/i7a/vJWXAM36EPsZhff4Jyod33BO\ne+MP2EFro+cd1t84rzxE0IOHZV1HradMgwSPsDkTEjN9b6NAkSI8DC29+Rxt\n8mCtBumZ183HMfmw59e0ZUq0aKCp+A5b/lc82w+Hrt/H4feQw+gLBysRP5Hk\n0J1rPYY55pbpHvMwnARnXrdBz45PKQpbbqNpZj8mAHbm6lgth6A4Xr6oP9PD\npFPNu1ncDOJAEiBoPbDGMlbaVi2tAc3ixKHpMDykJa2KCchI6Ke+4mqSyhQT\nCAPa5l7nRgz7vfZzDotF5x5UZk535w9RRKptPnEZPrHsKFVTjTUywu12J2wg\ncKv8VbXBk5y/TRysx9Xwaznf7PabUo7hho4RKLTqtnkMtiR8R0PPRxFhC79s\nIelz\r\n=ywJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.13.0","dependencies":{"primer-support":"4.8.0-alpha.62009446"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.62009446_1542739511290_0.751188964801444","host":"s3://npm-registry-packages"}},"0.2.0-alpha.bc9c43da":{"name":"primer-popover","version":"0.2.0-alpha.bc9c43da","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.bc9c43da","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"259959fc893a2e3963ce6a58b4e4d5a88c2dd272","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.bc9c43da.tgz","fileCount":9,"integrity":"sha512-69ZfmWQxxZjeHFLba/sAb5cg1OWMWKV1pExrvBbQher2V9qFKENkCPkBhWfaT0KvUdD5nc80E+bWnnzxrmpaKQ==","signatures":[{"sig":"MEUCIQC0YhhmmLNvHIVC8x9dVgL5477whYkKFuyQDf7LCW2G4AIgZwYX6BmKiXCDzPuyKnx0po7D/KZqoGZOTGTj5g3Jtew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/E4jCRA9TVsSAnZWagAA2okP/RVOCpWOo8U7EHt6/0xs\n/8q4RbMt72aPMREr4LIYAQraLmm7VL9SRwjqQPGA/wABY2tyaDRLaICwP8KH\n1P5jLs/2DcIlIcMwJYPuueVYTOlsdVHyd1YRasuudF+xx1ZrUgIDO+Sgghly\nlCnsPtOImSRFdkCyjktqXkG7MESyluqWUflnRcPJ5VSU0fMGil4RIs2a1oEK\n7CKEnq+gG+1yhrNiunVZnVcobN+1/BGTEn7bNjawOxCjmjcXxVytvTHw4gH5\nKZtWStAo5t4wdKYKFf3EfI4oHKQgUmEB31iLJ0NfuNt5wzA89BmdfSD7hc/3\n5acMwj5JdSICETe/xWMXQ2/Yoha/fKtyuO8STDjDaZI6ig+FinIL7EcN/ODN\nB1Y5omhDO6AEQmwYMFbnwSA2hrC/0y4yhEVPgy4M+zx1B0UTNVRetVyIu6xS\nyNyBfFTabsR/3p55FCguAtlzOO2l9bn+pCWS+aQSJLQ1jiXiZOWZl/t16IjQ\ncR62vU8NC7wOoZm7Z02IxygX5mw7k/YBJiWBaRLsKzQ/5SN6n2gR7RRx6maw\npDxaVFGyNI4JbQLyjejp2mAid8WWVne52HH/f3UKOkdUoaVuoPv35MW4qvPm\ndR9CZO8uKgoC0VfFzfh8Ijfb7Q8VLp/hrwF8kI0IV8akedgwfcYa7sCQxnZh\nkiPV\r\n=pJb7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.13.0","dependencies":{"primer-support":"4.8.0-alpha.bc9c43da"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.bc9c43da_1543261730617_0.8133856736508411","host":"s3://npm-registry-packages"}},"0.2.0-alpha.589611fb":{"name":"primer-popover","version":"0.2.0-alpha.589611fb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.589611fb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3cd01e0acfd54e39c95916f6e9b574af8d6d52bd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.589611fb.tgz","fileCount":9,"integrity":"sha512-GCGkqFNzx5Ot6ZZf+LOY5zLfiXp9wuB0xJlKffdarZpWYVb9lE0R4ISOI/WOurULlg6NBSyeDwWjyLWVcBusAg==","signatures":[{"sig":"MEUCIB0f0JwWhj+c0CQeZMd4fhD/gsdYgZ4TCchOK/JHkVbgAiEAoSL6CLzeLssPG4lJSuX153egShC3jKastgNKQld51fQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAC6ECRA9TVsSAnZWagAAUvEP/35j3OS8RHBsJhz5c8vy\nFW4bPwQJnjol8V3snR8mBv3T52d3jzJq3AcN+Qd9mOD7XQZ/Msg+GdzAR7Vf\nOZ21cte7QpAWYq+OucBOKTW1lS91HFwg3t4FchIEmTdbGL5UQRqXMttmvT0+\niK+4V2909lPY44o7NnzaHm5duoD1c4pdWMQE3ZhbrjsmZJnZijkyUw56LIuU\nvxjp8BtfPUzGLYeDy70sDmSBMQGHsJqv9CdrpGyrlo7r5E1jhLqObOsdJSA2\nE8eZSXZgJLWLARnWBf1VlR7G8Cx3XzUvprV9cQuXQo2ChsFKrkUdJ61oNXI9\nLRa+0w9+nYlwesa3PTk1kZT6US6O9EfXm9O1rxVyFJmEa7Syo9OG6cB08zAy\nkjBFzQ1JcispBq4/igrSUIsT8lKzX4TRm375etXcB+AdRGKDsF3BnnFE4Kkp\nb84mqVnT4GBSy4+1khBPJsKMLMf3/MNc65o2wvVf4JtjfnTlea7JExKqfn7A\nlFDEX2YuRFtQlakzZn1ElpgxT2yngNooQ/Av7LOAxgfIN0olMwlPNGRGmYTV\ndnP4fLQy2WU/tdGqhaIDdFDR6toqAq2F7mbsmuyNLwd99JDgBtKCeWbspflD\nIOmcfHtVzsCnqrl8HaD9FvbT1fQru99xLNgE6r8RwuhXYjw573Z9KPAevrCY\n776A\r\n=NYrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.589611fb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.589611fb_1543515780071_0.6480593304409876","host":"s3://npm-registry-packages"}},"0.2.0-alpha.640adae6":{"name":"primer-popover","version":"0.2.0-alpha.640adae6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.640adae6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"44efdee283f41bbe147eac7c8f0747120ae20bf4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.640adae6.tgz","fileCount":9,"integrity":"sha512-RHWCeOf8oX7+yDjf7QXb0TntDazHOebBXj4UO2yhohB5rbVT4WKULOkcl8S0jRIbCegt2Ts9hENRwku4MdkAVA==","signatures":[{"sig":"MEUCIH0dZ7sbpK7TyaKZOlEc3QJ9PFGAJHSPY/xP34LMN3ImAiEAvu0RVlQwnXoZOpSSwv3GFA4DEtAQ3t0NwH7uxtE7WKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAYTgCRA9TVsSAnZWagAAAekP/0VxsbeJlz3hw5E/Jjqp\n4+bZXe4lgJ889mjaAPpOS6rt8Jkr0BwpnbSWq2aYUlZI5VOGx5BcGfL/AQKi\nnYi9+z3UWXR7Cj2uRRuyo6qFOtkCHNd8WyWhk9+/QPJuCD0LmPY9zh1rzZNf\nZkkdudb4ahREEdA2CPMrXRuv+mEu5L7dYPmONN3Nl2qgEugnrY2DsO0vLRk1\nwbfRDMwZfA72Sq50f33Ik8tuXFhOYVto5H/kdpAn6WqJMOFv3K048caLVVpR\n1SXtnkE6/mEdoojTMn+VSFIboUrNWrOByoo4ilZtT2KIrn5JtJRg8wcyOv68\npY1/hwxua8xfoyo9igaRdhwaNueDmvXk0jPIhNXGoyDnteI/QVveVgYp4wPI\nLH8pPnCzdIJj+e0gp5AGwggHzqVn2AsxHDNKbNFGd2LhAr6N0V3bHCQMRZVW\nB5mfcpLCMatkaj4Tp0orT+RookRBYmopl9k2Btm/duvcZPfIdmlFrvXW94Si\nPFnYpvhudWW7GSEa/4z5/bkrwRiszSLhblbzK4PWeKklncAe9dul0hRjo/Ry\ntzScB2moVvoZjjh2D1wVWQu+LAYZIVo3QuVx71bQV2aLr+Q7xgpdzsNaqQiz\nH4Xa3r4Q5jde3eZpKYshsi5CSc/cBciHCOcpj720n3XKhtHUewkxnW6ChGgy\nexI0\r\n=DU0y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.640adae6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.640adae6_1543603423185_0.5249425324120607","host":"s3://npm-registry-packages"}},"0.2.0-alpha.9abc2666":{"name":"primer-popover","version":"0.2.0-alpha.9abc2666","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.9abc2666","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aa6cee10f062c52d8078141a69a1f57bc604af50","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.9abc2666.tgz","fileCount":9,"integrity":"sha512-4eUqwowXfiCwrNeLatPQgBlQwkFi5ccV8yGC/pi2OFNHMiHO0ymXkRdMlKMo5XMP9WFE4oK9zmfZlxeYvmUf+g==","signatures":[{"sig":"MEYCIQDXbhm2KZr7GV3xFy7X3RKIB/bcec5eoPAcW3Q1oyOC8AIhAL+sWGTMrfr+7c7b7rSoubYQO8lmaG3sqk5xWJDRLedH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAaseCRA9TVsSAnZWagAAVeoP/RirMjYlIzixVk6M2xTM\nKyybujfK2Xo7RHuNThWHD0hGRqn/lmJAFbURR7lwaTTZJqVOKKvLaJVT8Z12\nxVd3CqX1Rbsrj5ysawAaIHyjWM398IN1oL0c+C1yCop+69joXttA5c9NLIrY\nyWAjTVgPSq5WvIB5uZbfYtH3P1JMy6cfI/ijpjL8gBYFDthlorC5wJsw/Jv+\nty+5ilkE4Cqid59yd8n7aWLVt1EWwKBdXpsWhUVtZ9t5tOBVvgkRhUXOXVFF\nn2joCdtxWSSA4RObqdQL6GNoVvzBgNJ2CJvQtaS6R79DZFXX9Kqlh4UAvhU8\nOez3/eNiuou15xFBKBEGh52G74i4cbD2RpJA5uD8mKNuyyD+9hY2UbnoOuX8\n5446N5vpC45MNtD0VhAJDUX1r1h2Itl4dd9hKNEVOEXXuzQfVxhkIq6f67jZ\nnMEf7kan80Ngx9a+ZgZ/s4XR5s89Gw01iffuyXhuYOZg658AkPfudXBPusqn\nGvPqCpzyuEJ9XPrCX2iVoX10VMWyV6lRLOQLUxz2/GOhJ0LNoUnOC1DT2rp8\nbnm7rudbLpXTUaGe/KOJl1fBSDCDjqD0P5Bv9BtBUghuBMx/GlAtFsPIaTPU\nIk4NCkuKG1MYJJgLxUXnRpEtLIKSQyFHjYhoYGCx6+EDr2qCAKHTXRo8pMwJ\nUWnG\r\n=HH8b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.9abc2666"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.9abc2666_1543613213620_0.9096150679516741","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c96e9341":{"name":"primer-popover","version":"0.2.0-alpha.c96e9341","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c96e9341","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"208f363f22ecce6036fb61e081d83d428c92271d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c96e9341.tgz","fileCount":9,"integrity":"sha512-rMQnTXG2ZBjicpnDB3SgJ1rzsqjD/84fJWgzJ5iHD+i33K0PaUnJxxcp+xVENCc44q2Pf7eDcnbzfWmi5d/z0Q==","signatures":[{"sig":"MEUCIQDd9GgUG6TZmr3nz01GCgYjiFEiVYL9D0lLXqXTxSYslgIgG/xGVf2EnB5JQ0K0KzkW5rQrUbYgFmKgSyOZij9WL9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdU5CRA9TVsSAnZWagAAXy8QAKBtyBJ5AhOyFMMcOV9R\nDBCSQa/cvyncVvcqAm5XbmnyIdiiZVIR/rfV9nouNFg+4BeFWTL48rty9FrU\nSKbqLUFf30yk6qoDn+4wKx+2EpTjbYmrmrwvP4TbIrQLls0pVgPHWGi9f+Bq\ni4hIb/GUXgHpEtwTauuU+GCFnL3Uhu4zVWL8pHwWQNe9XQS5K6K3MEkht/1N\nrbDO64P0E41rp/eRxGS2mM2ABwjsn1gqoR1xlL506LouQeH6uX4ocUAwuDhC\nGRH8SnvVazGqZP7pEoGqQlp5M2swFztI2FbDddThnboHjjSSsDU44KhUC6El\nU9kSjoOOPcpO7pqfR3l2rGarMd0gZtZlt9gvtpY74Mh0NgDU/hCdX5oi5E73\npFkez5fQBeTMtwgoNEntS+py2VTDkkN1dQKgyqhPCp++/GuQCV13BefTZKdG\nZ6Msb7hoMpcoI61OntCjNEMA36li4YDQdg9sAH7X+UgianwE1ew/JziF1xGZ\n11IxSsTX6GwTSMqcMZVJLIFRrBJVucKK4njI3saw0PytSJ4G46oD+YKxmxa0\nbSfNyzM51wFuKdxxJDfiCePhNwL+reCjiIi9kO3RE1ll3Ekj+zGF+7Me/c5S\nNZgq3K1KJ62koLptUvJr/YJOSKJae8zpOhbn3DEYibFSI135Zi2vtB8/GLlS\n7GBE\r\n=MTcZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.c96e9341"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c96e9341_1543623993281_0.4831829920787636","host":"s3://npm-registry-packages"}},"0.2.0-alpha.920cbb94":{"name":"primer-popover","version":"0.2.0-alpha.920cbb94","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.920cbb94","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2e8e184846f3b24d4a109461a930a9693502f99b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.920cbb94.tgz","fileCount":9,"integrity":"sha512-QEioCrkoezNaYHot/42l0Kh6aJYo87ohhD82Vswuwda674t2Mqzl8vogQ2V333MEMSKMjPV6MfXV82/fp25mGg==","signatures":[{"sig":"MEQCIEgh1lhyC7/cjfbHEB0jzFuTKYDCzfPs7I9BZcsgmR+MAiBVDvc5P8Vccr3L8Xta/OTjc8VIz+iZq8xf5Wm/OWQa1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdc3CRA9TVsSAnZWagAAE4kP/2IhtpjYZ8UKtIwr52m9\nIzNaCwMP8rx6zWesNUXDJEBRIbtKkEUAqA33lKv2jPHjc5BbGqLgJeDjsNGm\nvwi9cFWSLnWnu8bpHP0Zympj9wO27+m9js458ppjN8C+JzdLuTAoX6y761tW\ncmx+H4oHfaKBKo7E2nIH83wBGu6HC51hq2aSNVVpkskjCl+TgajIWB2ObEoY\nqhAFZoX+oIfmyGhU0EXA1u0FgjRyWSMM7EQqPN6Z3/TapS8OqTeaIEN2m8AN\nRc/CVAb/OwE7dmGgcUtGnwYr21o3le/AcWSsONUFM7QnEgg6x9w5FxSBz88i\n+YJyO2FaSfZQOT2vOfRCjGvx1a4upNktEaAR/hJcB3Lj6wk7wD/EMSTM+xl0\nUGh7sJ8Rlgi1xjs0iEk8GgApFE3xqoPx6L/LX8mIWuqnsFXg3/W9je81k9Lp\nFzliaj0cNSJ18IFzTyqyteIbEoRXVhaPMAT2MnA09H8D+uGl7roBwzBfPxw9\na+4hT9P2LgnaskRo3yJBhsEaTqXoSQTsHWDhEoPd/jyp3qT/M+YQhwXses4C\nm8Tew2YtyBvAkNcD0cyuiQWMrj/DuWrgd6SyxNZlfhzmTDJFjNlyJ3hNXc6G\nUdDh2jfeuTNHZjofQTCHR9HkdJ6hXf7eI4N1LCTDDkyUIuKqDZg+cfEIHFT4\nfaK9\r\n=Dn73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.920cbb94"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.920cbb94_1543624502489_0.3856030835163977","host":"s3://npm-registry-packages"}},"0.2.0-alpha.10b12bd7":{"name":"primer-popover","version":"0.2.0-alpha.10b12bd7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.10b12bd7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2e74ea1cdeab90c1381f6b00b8f383e47c002c54","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.10b12bd7.tgz","fileCount":9,"integrity":"sha512-8zJPFM6AwekZDR0VcYxySRWZlXD5oDos00+ViKr8omBmv6rd+YPqwlFBE3ANNfnO+MjE4DdRxdy7nGRCUl/KXg==","signatures":[{"sig":"MEYCIQDBG+bvM1LToYUPftlHlArSBkHSpOLYPt889FncRRCFcQIhAJ+11J6ldEORAm5MZZMqzzt2AgGrZic9GJYnrdvL4oAn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdq4CRA9TVsSAnZWagAAPoYP/1k9eSD9CJjW1ZUP0gI5\nd4wu9WVyg1nolVc4QlPg5Wyis/AQ+llnPuaqVg1Hxo+kvWbP8savIIPQlBCJ\naxQy5i8X6bTH89WGEGLWbnTP6MFjZCUG8HojhhPAtC7L5mrg5igG1wodDGyN\nJT8hL0U85U8fnombP9ZdiyYXl/Y4HhVVrvon4J5HiFPAnvjU47vcm+Jy9g/Z\n/JCx4HdKcPDK/up9LfqR6X6uts6q6yBYSkR/87mu1Oa27Zh2Lpthd81+GZDk\n0AMlrt5DZ3J6qGcSwATVSVRgy3PXuZZ27pCUxajzwaswLd+JpYDlJYdvDCYt\nQGwJOVheHepbuir71OUtOcLJkqCxZTN5A0tfWpMHim46f6z8wzpRw7H4dRJI\nxlLXi8iQOjJV+7AblnMvR3nc5Zf/mSrQM6SCFSK5Rv8NnFHZU3gnh0ysQ7iz\nKqdtjAyYBJcztjInK0n5TQ0CAqrQ3oqZI8RHPgP9/4X+vfu0dNBE2byQQddI\ntN1pIgLSWuJoYClnwEbKANHh5ZwutVWFDX5qxx4xqt8n3Mo91rIQkrYJdkV2\nLnq9QEIcQpAFYnuJtgdttmMGAepVUqfPNu3LQRip9uAYcilpZqjiO2aod6ig\nLt1onVhW6jCjc7Dt2ffbmZU8Q4fEP6YoB6qMhO0Im3TEuXXmHPZi6CW6ygBU\ncYg8\r\n=hGmI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.10b12bd7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.10b12bd7_1543625399434_0.4867565637784006","host":"s3://npm-registry-packages"}},"0.2.0-alpha.60374339":{"name":"primer-popover","version":"0.2.0-alpha.60374339","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.60374339","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"413a48b13662a131d804bde8ab5c498c2c2600e4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.60374339.tgz","fileCount":9,"integrity":"sha512-aqFDnkF9elFKGJktv05m1Z9OC1Ve1jTQ3Tq4b77oiZB7V9wCaR3yI+TYWUNBJb5KmeE4xUnodofJJss65KFkaQ==","signatures":[{"sig":"MEUCIQC6dqv8KBJFO56tekEEJaZDLbDNIJucXsu3aQVHI2XPXwIgELbrYuXaLb22Ani3fbPzhoqHcAAHPTvZKybfvvHH1X4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAds4CRA9TVsSAnZWagAAGyUQAJFcOtiTBHVwwinzusCF\nEXB+sidLh/FO3uxYiCwaNfTtq5Ou0EU3UO+uQZncNdI56Wj7bREz0y7eJKlI\nZvzD+S1duAJEM88/rg+kV5J9NRwcihWf8TNcs2z0zTeU8p9+E3y82VfeQ7AA\nV3t5YCKxZClO3p0Zhu7xmcvwkfMaIT9B6BSaSaFjO1c9W0dXYk1pjjqFMChC\n63PaBp+8jz40RuN21FbqwLcYX8jRnq0YR2DWbvK4WIqYq5gda5fqUd3efD2n\nIWTWdXaMBobBxvySfL25XgSkoE//U4o5105WjdUDXfUesnbmiymlVG/f+zW8\nVZwUDOnbViisWlygeHijh/v+CGAsYdVeR3/4JFo8R5JK5yn9MoGP0Y49nFxn\n1kbYiL5KUAtQykIFo1vMh4lNspJ9vRfwOGlN/PQqXiK1o5kQGdDzT08kmVba\nTDW0WNjkozDwT6HapjaJLNibj4VKK5nYqqjPQSALaK9dv+bJIFAVXiThQx9L\njMqLNBgAinlncIFiOqV5JVf+PKIVnm43nQsTjNDTse6bfz/HHHIjo+srioHi\nGtKUpDUYyWeJoQX4IcdvAVYeeUe/itKeN/J4s3xZaaeXASmLDELrp1a7cVn1\nanj9/INsssdU5Tspsiur+jfOaewtTr7/unjFsOs5zw9PQrxoFedDpQ60eU4I\nNQsd\r\n=VY/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.60374339"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.60374339_1543625527685_0.6472442521015149","host":"s3://npm-registry-packages"}},"0.2.0-alpha.72bcb091":{"name":"primer-popover","version":"0.2.0-alpha.72bcb091","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.72bcb091","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6d16b5e21c5669aa12c8845bebb9e519b1d34a59","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.72bcb091.tgz","fileCount":9,"integrity":"sha512-+l2fyCLDFJBtlK0bBSS/BYKETUM+3jr07Ytb/oGYQESyBtriGjpddtxazXZEcPSw+sM/GKKm+votUKXHgqrxKw==","signatures":[{"sig":"MEQCIHY2zls9c+KLXP7hR+CtdNrGyTEsQ0b5v5GyMAwjSc7HAiBIztGV/isa+YqvwehM8UypBjAESJJgG8eCXgbXUMamow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBuZHCRA9TVsSAnZWagAAHR8P/j0eYJ99pC3MN+tulUPA\n7LbFcRCZEKpJ3CLZgvEKi4oWIKYnYJNV+jKiXcB0GuXsa1EHe/GcPGkfxVUj\noc/jWWwRLvIzE4hyUGhdpqquq2MY/sOg0lMuTUKcfGIMq9PHL9vodB4a+BC3\nAT3wAXAt+21jDRhv5oCdYPfSdCeP2voCWvWwPqG9puoM+GojvVNsxoMee6yv\niOl1/E1Mec8yfLarRokPYmEZxN13Fu/S3YYft/euafHTjCsUJSSsa+RnsZb2\nbrUwJ4vG7+KEz5WTBs+xwDvDi5GcUyNHZpdP7XqIl8vXBKorep2cd0rHw64F\nI8jJDZrehFXIl03Wh7Hc7wCqNN23qxOKkBreffM9MVoo/RCeFH6/TOhqGXuz\nZq/gdWTzcGK0oXRBAkZkcwgINune88goQTJS8haU0G1a2OiIELGXhjJPeTy/\nijUjqY/oFcyYmS6yubkeNKR3QgGUDmJLiEH4dwwIV3s+soqgDH6txclSQN/2\nXdssIVGySiSVLla521QsmOo4rEiiP03sm3yEenEV6aHOX3F5phX4AeFVsnC8\neKnyOH66PEGZOF6FOwfBck79rzwFNb+rRBLhGpntl37W42xgqieSStfwUY3q\ngvhRVn2fCarLiPq+Lxbnyse9L3lERDHvfWj3p/3Y5qVMf5xpEPS8082w+D7c\nQtTI\r\n=u/+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.72bcb091"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.72bcb091_1543956038413_0.03566163208213635","host":"s3://npm-registry-packages"}},"0.2.0-alpha.406e3771":{"name":"primer-popover","version":"0.2.0-alpha.406e3771","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.406e3771","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8476670102da8b9c5b55cfa395f2296d7eb4fd29","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.406e3771.tgz","fileCount":9,"integrity":"sha512-7w2mpYN/HbrMXXqo/w3ptX4+gsRLYAZlqD5zkqZVprmFQOlueXThCczKfVv/EKY4Pw5QFp7/1DgIKhZvbY67/A==","signatures":[{"sig":"MEQCIG/TLvrFmyTmCIIYUfWSyFoaL0lXsz6rQmXtkymZpFpHAiA5LG0O+rYzvx/oAo+RixWUyLDk22okcWmz0V44Fw5BIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB2t2CRA9TVsSAnZWagAA+pAP/2u10BtGWFu7+NNG1w0N\n9hucPWTxggZT2XQHviGYdkAMGBQ4CCOqzzxmHHpd4mMFy/Co3xGI7cC3uim3\ngMDi1Fx2zkb6rQJkj/SbVFugXligrZGzRlIln6o3nf5l1mg4PEkJtsD2Q3B2\nac/cHWCYkA8UgPaVAb7Q7ld2peqodfH5YkqH7PRsmNEM8TZ2gy0i80PB2Qlw\n7cGNA2V72dzvlnZn78vfALxAy7WNhNIwgv9cP0JMBPUiG8t0+WP0W3n7EsyP\nhpYFIIWCZ1KWyJ3IZQ5S49pbRBl7zg8CcBbSYQe6o8dKgrubJ5QdjqjG1GWC\nj7laTOr7MJAFD7LmBfwCZMhw4U1lWg4gICcXgwhcSyidWKYBhe2kEEKZsKfF\nVPKu9+4KXS166ms/qhQVQ1KlBvsgZXaU8uX/c/GgKNZFBtUPpGiLDLXbYNTk\n7MDNOKFiW0eS3WMDG3oqIY1pxDW+mtSo796HwNtoWVcQIs8XBb7tn1uY9Px/\ndVEy+zONhHuyKLsAclB3CtPbR+Y/g+ZnRxHD2zPNESE8nOpPGMgi5CCaHuYf\nRCIgkvDsBFV+/ktJUP6wMnbAN7QWQqxLQGKcQJCYmwHvZPxOd+yNJdLJs4IX\ncSQ5cpaKsnKviuXvSCvXEltLmg9PSTODHfUtcmDKCy+aawM3txMuc2F4+9cy\nO9x0\r\n=C2Fm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.406e3771"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.406e3771_1543990133497_0.3788698888050961","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7b492b62":{"name":"primer-popover","version":"0.2.0-alpha.7b492b62","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7b492b62","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"63bee4acafa471cb0d8ba44e89eda82e19ee1dbd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7b492b62.tgz","fileCount":9,"integrity":"sha512-covhEMMOGqjpDG3AsgeZS00TGfODe3n0QEGC/ps0xK17PqNVpU8y2UKepq+cUG+MC7LYfgPZC7P9fu8xD2UA/A==","signatures":[{"sig":"MEUCIAZXJBXpbnFymySwCytjNUNbjLXl2ZZL2zfQjqNavCoOAiEA3BDzY7ToVNe9S8c9fkY8eJh0OlorzC8BpYzSxe85c+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB3WYCRA9TVsSAnZWagAAur4P/3xra6/+PmEUn2FMX1Gh\nuwUPvK95mJ1WZDxtfec0hNiPYKWmSE7EHfXZL3pAR8tuCJNPtFvb1A0AghJ9\nGiG6RN3dd5YFLzuz0eQ+J09UrPLkkDrTqeVWbIY6tD9bxUv52Atx3s2ifAoj\nmc1gN0pAnSLRrcYvzSBlGihcWdwXG7jPaIqd2PXzeI2ZEzUziJquhXidikpG\nlSXhVHqTTOSTHviKgVAkw0/dLXMIBWIP6y9FDTelibeSG+6OF1JW6IMDdzyB\niMI+tatcnIZFmYnE4k7yhHawIT6NbNfCAHz9xfEo2WrNBxMwKcn0VWvOZVsd\n2IqthWW+PbCgXjQybuFtu+/gVvjn2TxuBrQugG8Dq5XGXv4Nib535taOkayX\nGDq+n/l8SQ+5/PKsz26oqnQHvQDuDAG4kYslGaNA8Crx+eletH96WBcSye3D\nYmygEZnyCyl5NnUnBN3qsNPkFCK7kDLLrUnfVOHTFrPW67SlkOBKTajXcQAO\nUnvh1oaaPRVhW9X2aXcEdxOnrMeB2qtOo1xkalFj/0uivbRRN0tcXn0D04wI\ni/BOboNMCQDP95j1dfycfBSC+x5LGzpcadx9MzyVrYF4T0CHwmg/fouI5UN3\nvE7Q2i9AMxnbF+9pob6lzFZGe47u0XeDP0kZV/6GER1MSIPE8VIGxe9RAqNN\n+8/A\r\n=RQ3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.7b492b62"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7b492b62_1543992727618_0.48128276591233377","host":"s3://npm-registry-packages"}},"0.2.0-alpha.076a5833":{"name":"primer-popover","version":"0.2.0-alpha.076a5833","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.076a5833","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"87f66a1c411460c57731a9d4eff852f75eae8ff3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.076a5833.tgz","fileCount":9,"integrity":"sha512-MjdRbzt2eaguwsWO2yf1lLCXz1b1TMPu2Zx4X7JsgwvqAgM6cxiFQAuuirG78RemAlP3IaESlGSPi1NQ2SZAwg==","signatures":[{"sig":"MEQCIAlCLVb86tJA61aS8MRYQmeSP2zDuLOjdjSHj3WfTs8lAiALxOYa06H/vFRcY/68p+ANofgPtNl9cvH2mc6zNzcF+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB5xACRA9TVsSAnZWagAAoXgP/jD2fzDeKjw0/vE7wu74\ncKFiM4tdYl+VtXDjfCfI4zCY3uSLC3OuYdk/yrwIfA889NNz8QiGux3tdP1l\ndBjrM+k5cMewlVKOQwquxy45QBqnDbVCbulvEVsrwk0zOMKesdGJm05X+zpy\nnzbKErQT7QKOaTP2WS62bjuhlOwMDdrXXTnAsG6M3UHYi+JgHCpAMRqjZTb5\nYUD32SspGa+aENqZxUJk6/BYm/wUcmD1skwVsAX/qpTqonHRJjbAjLy1ixJe\n5GWsk8rlxYQnbvNBRSN9VD9PwmHzlFMdMRcVWoggyqNUzy39qO4nxpwTCz4F\nNp4ubojDrlX1vkHjQmZnJeufkBRbReEWrApfkhC1kIJAY8v+aHNTIeH0sy8u\nnxE9NNhoaJpiS2NwAwmbLNDZ3gkRJIVDtQxBOpCyDxcRfCP2BzKXM0CP1uCK\n6WonSTs9hQdT/lPp3epq+4AgrKIv0e23fMmVAL9L+2OtvIUrbHZKhv5UdjG+\nTpqud8hK9+7Nxg13W9Rieic9geolHOpK70TBg/tJaqvNLZIStKP33T4wtdb7\n2Dg2It5+DewqZ38vy8NpLp9QQVs4zwrvLQ1JIqvq/ZYiboRaDm4oI+uCMMWT\nruKcsboBu+cUJq7sxVVo90o++Dk62Um9gpHgjILqJb83GwcPPCjo4Xl4KHfA\nxnQW\r\n=PwDJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.076a5833"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.076a5833_1544002623457_0.7775204415806385","host":"s3://npm-registry-packages"}},"0.2.0-alpha.87a7c3c7":{"name":"primer-popover","version":"0.2.0-alpha.87a7c3c7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.87a7c3c7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd045618405e44c7b291e0939d5b91c99b10cf77","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.87a7c3c7.tgz","fileCount":9,"integrity":"sha512-YwSiC6VIWCjp64UeuQnaHzWlRefdm39M/1yItbXGfmoktVJGVqIS9jJnGhvJlhZK0KoyRsn0NFJtwyIHXBfWSA==","signatures":[{"sig":"MEQCIEz+5eaDdfDM2uZ5AVwsfNx9yI65apK8TN1xqD8X1hp8AiB74/DcXujgCBxxNVWuK1PIX+WPN/I+Zi0UFRNnKwa7DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB6AgCRA9TVsSAnZWagAATQQP/3WFsPy7URjyPkLQSQRW\nzqEMFBfHAcDSU/0qtcaBej4bMJXDF7lI7mbXj+1//onb6YMGPUV8xSxD5kGR\naNsIUl/VU1TN3vcwNYuF0zGRyFMvH5mNZ7IPaZtuArkHpY8W8B7VkAwC9YRM\nIkcyW6APk2CLWRPK2w//W3UMoT/RjqjwDm9GrEOBau4FhKnG1Rf3VupK5VXN\n1MymefYgJp4Pk02Itv/qopI4HF2i+t7aDDZtKvoE8SwHeWchiMASd1wtvdbT\nRA/CWaepHuqS45jlQqqH6QEYbv9kGsUSBWyBNIvvJ1H3aul8XVbufmsNUpu5\ntPYiXBdeJi5wyPzXYqckFdc08rwWqYeTmOf90lWIB4oX87dK8YLvDduznbv1\nErJchpaUIGaO8mqBxDI8iJ5dUk3h8B27Y1CvTc0t6sZdivbseM/4cn1B1L0v\nAH5+CLKv9t8CAT3RJgtCtM+iHZtCGi3cvcUinNIDUESAppU2WIBbdpbcZf4q\nDcrb4b5lewMrmaye1cnADOVpTLtecs4PzKbuL3eAysfj33mSYJj1NaSQ0wcU\nAvokC6Lkuz/rrSDLe7vSWPy93yMCF/USQM7Zo8hFqmNEvNeYxQ8+YsKbaVXV\n4UQpc4WaJlGM+VVoEWR2zB+Wf1yAd1gHyiR2QmoXtoQbcMqwDonB2ft6X07k\nXt2e\r\n=TDkV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.87a7c3c7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.87a7c3c7_1544003615224_0.680386151232478","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2fb541e8":{"name":"primer-popover","version":"0.2.0-alpha.2fb541e8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2fb541e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4fa1686406d7b22ff67b5223b98ecbf84a09ce1b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2fb541e8.tgz","fileCount":9,"integrity":"sha512-YdQcn/33IG9c3MyB7BPcUqjOhBbQbZRdnDYjmHJLeoyb8sHkjNjiO/OnuQEQEukEilhodb1Y1qPw9XT9yFH0Zw==","signatures":[{"sig":"MEUCIEva7vIQrudDSUioieQxkZ/BhGnjWz23NvAZcBwuo/f6AiEA/xmLwAkAEe1Ga9L1801OZna/00GCKIFLXMD6V7eR7BE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB6HJCRA9TVsSAnZWagAAHcAP/1M1ie++PYv6LZKI382w\nt0+JlXQrDGp1/VvNPzqThHvdTK7Vxippt+VYeliCEhykuSFXp580gVD941M3\nCe4jMpHmb8tpCgFAlW00n/3hl9B8QldNEqqwAsVrKzbOo5WJ+MVMO4LpZxbf\nXhTwijPFg1gkHeScTmNUPjZkoWxCltFm2UTPC3LgJe3LZ4aQdmCDo3dp/TZ9\nQ2QUsdrZXluBN8iA+nQ/oRaUl2sKElD4wp5tFcUDX2YnTYTdWV9twVSy8qCW\nGGCFjLWEQxHoBiuWx854FW+2D1sp/v6/6/ujEYYbM/seS6O6BhbB1yieaanC\nFxL9zSZcemOokB1FjDERgnbNYmtXK2LvWDm9SEmSGERxMix4Ag/7w7I7m+Gc\nZ9AQPApFGLWK0N7wTBCNmS494NxAYOMxnGhv0kXWBuQzekriKmcrKO4XaOup\nKdvSY9YzW+V4eVPRyew+BjgyNp7FSKY7YvA8mzrcYHD3Xhdr4dGLpMeY81w0\nTIxCHNKZTedCg3kWr3Ki0WqNHUVLZKD5GoI6uxVSR67hcNFoADSpWHCIxPsg\nPKTW7DzTTgt14z4q1QvFwTvl2yp4x2N5x95ozeQTHq1xcqW/jJRksa9CMEG3\nT8hfpZlbN183Y6zVOJ5O2cjkYMi8ZY9WEf4g/KGUvCiHPnhMOdzrN8zPQM1q\nNSjl\r\n=lsZv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.2fb541e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2fb541e8_1544004040545_0.7600949557590861","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7ad3aaa6":{"name":"primer-popover","version":"0.2.0-alpha.7ad3aaa6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7ad3aaa6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"390ba9ae39329bf3683849bc70a84a937658d1a6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7ad3aaa6.tgz","fileCount":9,"integrity":"sha512-YM+4OQoMjXvVL7efFSUgP6WAReNZFniwmuClqjmB3iW+msC8xXvq3TDSSYMdN9FiCrVPyue1ilBsdHXHffIp/Q==","signatures":[{"sig":"MEUCIQD9Jad7q6wm+xYUmh5wzCy2iq7c470A4v1oYr7EG6BomgIgDKaDfJ+uLyfhAee5REPu0c2XurxYi4+qOZ/cPqPLLGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB6H+CRA9TVsSAnZWagAA6OgP/3UHn/sH+lgsJKQ9ZnQF\nJncab8dsusVmjhJtHPoFgwTaLtBtye7h8R8oA1RuGN7hua0ULWb3MF8XAXVb\nCnYRRoHoGgeuM5rqigZ2k9RMdw2CQe2lb7+31vjeWfNeQEl3Cc/M4+r6El8E\nnwq0HNd9ab+PxmSNPGjlqlL4NBG8Yvw0jwDUG5Qdnxo6jkhARIkQd8R5AbUh\nlnGWLd9yfPxQ/MwtSGu2/0J39GWmVTU0GakEtxbskqtdQ5z6dDenPYQCuK2d\nZ59lDiexrTh53RGCbw8swavvkaDNFt3PJ0znbqY/pkb4BTRFZxLZUzWfVHk8\ne8DfMjXOYesngN5ArOU5Px7130neEBr1PGYEVfZzBmZcASoZXSgHXVDMLnim\nvsx6+JcgBIeQ0NFuhSktx/oT740c4ECVeDefvMHSI3TdCpXzC10uEUQn/bqe\n7EECBcdKmkxYuohAEoHozyWhQki8QWLDDT5smqJ1LTkxDiCj7iG9Lxpw1O/+\nUdwtOGe7nL7or6hawXaGopSn80z4hrwaoj81o+oJoJugiV8q8G/EAyxR7bKb\n+1HdwhgTJ6Tlesz2hovLjp2UALht1GJjGvDGxTtU+/WOsjPSzMys809xGCn2\ni2ou27prU3xHYOgNdo9Qr28mYwmUyX/TZ88guL4yoZ+V2sAcoEyTBmWLN8hr\ngX2M\r\n=kTds\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.7ad3aaa6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7ad3aaa6_1544004093912_0.6375073425116728","host":"s3://npm-registry-packages"}},"0.2.0-alpha.335e7a0f":{"name":"primer-popover","version":"0.2.0-alpha.335e7a0f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.335e7a0f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f89bcba2f2038acd333d6cb30798876848b22d63","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.335e7a0f.tgz","fileCount":9,"integrity":"sha512-bdvrAQzpCqsR+/tgsW12H2e30YUZAXH3nT5ocqyUO+MVTW4FhQIcbwU09qHZVk6pHwRIDs0LW+CUCCa7i4shXw==","signatures":[{"sig":"MEUCIFj0gi8VdeKdnv4IHW3pMbZsAUHwf9/z/ClRZ0ioEiz0AiEA7NSnKf65sqGcsh/sMEyrwzWLCU1sKrzIQlB2TJiPSyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCdQCRA9TVsSAnZWagAAitcP+wdxExfA8t33AWaQ5Wvb\nHuDHhss8/Ncgiv5klnJ9hpd2IS0q+DlnnA9+GEFPg/yzr+wKV07VBo7cs7Gl\nLWJgicw8a+Ijt5sQ/YV0IPHFBXMnEqAPIiaGUpUI7CIS4Mf7i9SQ0A+6brDd\n1NTkueBSDtzNNJFssBsXQIvky2Qi7je56dKmL1fzM7SBSAmSYW7jkOghWG4S\npepO+kK4fSOa9scHfNnXVHFqVkv/kXSVjc3SZU8Qc+w8YIP/noNSKEbX5lL0\nj8g/gXbk54jji8n31jL20mjsK5eNYaanUawlU/SlQ4VPGJnKT2luEZB5ASjc\n3t0UWWU+3MXS0w9dYFaCxTBzmGO7bdhxRPSk/x1uvh/5O2o2ZbVj4xb8R3H8\ncdWb2H9gV9YqS+rBex/za+nEsDvdBW+pxgIeT/4PiGjOAM8Qct0D4G01bAhR\n27xKmDs/ZrDgUimlhGpB5Xpb5T68i8OFfIZ/PEClk8gtGVRMGKjdiIqVLVO+\neVGJ0LsMdlohHjGlxBYFq9v3ZbVQY58GJrzSeJ/d916T98EkhQDMe1wQIiXF\nqPN6gp2SD4YL3nTy3OnpzyNCzdIFDedPehN5KBKtsfPRrU4mUA13Lf9lmt4G\nP/PUEpVxRBZs37CCSUzyPEp4+BlJRupp1vRSR2+bN1h8uMbiL0MJCvmSkka3\njROE\r\n=Gs5J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.335e7a0f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.335e7a0f_1544038223840_0.48014091167110773","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1d903df8":{"name":"primer-popover","version":"0.2.0-alpha.1d903df8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1d903df8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7e3cd8892919fee81a6c2450a9ebb84a050f1e7a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1d903df8.tgz","fileCount":9,"integrity":"sha512-AxSP31SUEzgKBeYOKTxI1l0YkODIVQP0WF7Y22oEMQffIN7HZD4weLgydb4+1xNc2rgKdBm1n2C3BMtuPgJ+7w==","signatures":[{"sig":"MEUCIQCH4EHI2ekA6r9CUW8LS9y10wddP9joyk1F98hjdkj1KwIgDWG5+5UHac5+SD32Y4wyT8lKOjwPJ1WJZWtk9KUxTyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCpXCRA9TVsSAnZWagAAtSUQAINQHkMDhxSBiUmfKqC/\n42rYTuQnRUxUeSKfnIGRcXaOtvj8VLsE/NZ42gODZnTLahaWF/GDXMLaZhq9\nihzzeZoZMV8JmPVWDu75ntbfliRGTbWZI36npR8BskP8V438zzJeY3+2QuaM\nG999A92w76C5gTcG76QJKjERS1tI8rEa1sgMclAzRBj6VjKHOz3FMyE6Nvr8\nOcQ/ffjRq5863ch59zLkubU7iQZsHcwOa96dpjWGjgmwAjgCp9vRpE0TYQqu\n2Pbl804t/5+6nod3xgyK2r1xB6aVi9MVsjlJJV8ItZD7CkGn66eGqloaxTmF\nk1GzJ330HHz7eFSk9geQqhBpKhriY/hMhTijZNbNXvO/dMVwAqrWxFTVhcJz\n3dN+WD3+8x3dV2ZkhCPEEIHeIUyFdiF8F89RlLsYx7u2avUgs3+O/xVJzhGZ\neCM6MaRyYQjNwsmV+JSDU/KZnTW1PdZJoeYi1xUF2aEYNzhPBd4t6oMGnI3b\nuxqhCAeaXTEoLWx1oc5PuYbxX2WfvP+Jeh33LJg+5KmGpDVCjbv1miCQr6+O\nYYKgu01GHCtRqpDKnBQ/K7QIhadytEcwunQ7pehn0EqIOjZZF/aFWz36Gsfb\nEbtMgfB7SP4eDlhpN3wIkC6X940BxZnb2B9IeFu3unuAWG4C6UznDBfeMDe7\n6HvL\r\n=pY+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.1d903df8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1d903df8_1544038998757_0.2157294900081761","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5505b4f9":{"name":"primer-popover","version":"0.2.0-alpha.5505b4f9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5505b4f9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8712974e9ec449ed470180a1153c0f954cf1a1f2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5505b4f9.tgz","fileCount":9,"integrity":"sha512-ovvTgzrNMbNhpd9jDlV6Msp785zZvSAXnUTdxdticUX54tAEnI/gjOlpF9AMVXGRMM7SEA4m5c8BKSnVEvgJQg==","signatures":[{"sig":"MEQCIHX6hSL5iiMxTpJmlKg5addFNSS52OSugF0+pJubJMpnAiArr2fvmotb3BG1apGJazp+YisErByzb8KnkSPz2ho7Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCC6JCRA9TVsSAnZWagAAxLIP/RVYfoNmaM1wRWDpl8+G\n1WIOPktO9PSzqwkGYKsrjfQFP3flz3jddMIEU+RWZecAPxbrWo/nWTBlSBlu\ndDvmZbA6TFtblnr8gq9GnqnSsMjSKXpe2Zq9BA57LGm38AR/Wuoa+ysNJ38j\nZSqE5sXoCbuwiS6peGSFyqpPAo/lg40N6qUgCZq2AwtnpuaD7jxjAkkfmx/W\n4N9KWSX6yYJmWK94vwdqV0HKThDwMbpi3oqKA4RcbybCQ+W7chCZ0dI17EhQ\nKXX5voAN0SOeBgE/0GAW3pdhrOubXt28928VBqH+UjqCIxwrR2a+0TsFH/R4\nxV24v9dPsWoE/3WO7ihfsFhxWoX0WSuT+eDbzkRcahVdWkG6bLqBQE7ebzRx\n65PeaPhr8SWhK+A0SHEhHh7gLv+SVvfXi1I2kezUTVLrP00Vd3m2PZ4NFZKF\nJ07nCUVxLPqt52iZ2RDpP8HJjYPEiMGSBOcQ4fjcRN3QsCrxiXSUg7CU42na\ns+2/4AfS0jcHwre4TLncP8KLDYsD0g71MjV4oHfdBOzo87Z0h/BjKEjN5Owp\nvozKGqaYJ70Y6MJaK4j+sz4xLnkX4VNKg90noc6SOqy2DopG0ZSh9mtxSpw1\nm7yGuvsyLfqt/fNUUHpEDK0I8OSViALt+lrciLw6QWZPKf9HNW77iAgEQxhN\nJ+aY\r\n=LJS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.5505b4f9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5505b4f9_1544040072659_0.3280517324765517","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c9c2ddd0":{"name":"primer-popover","version":"0.2.0-alpha.c9c2ddd0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c9c2ddd0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f6d44e6e6499733b3a385ff1ff24833588d6322e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c9c2ddd0.tgz","fileCount":9,"integrity":"sha512-sNtkORFs94MhHM8Oyl9OTK3gAjtyCGFmcvhssGt5p+3PvlQUABZfM2XHhYj9BIJK1eb9FFnQIJVEZOq2HEKaRA==","signatures":[{"sig":"MEYCIQC2lBrYycrjePj1fkBKF1g8ZbEvgddxD+jvrwepP7GiEwIhAIo/tWuQwgee1HZrFaHOsRzdipZUnvi0n7nHM9gx3+Yp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCHAeCRA9TVsSAnZWagAAGuUP/jmdvvNi4Tcnxjsi7uq7\nOjhJsWwy67JNkPx50/jUNEbkP65JYBHnCpyksfg8q/aNtZztCfhKvO2nQiTW\neK6qNVAsKL5AZyEdbHJ6efL34h24mSMQPdICMZeeL3eDTjXaQrGnNEOV+jyZ\nftG2/0Vid5r+oRRbAxLoMM7IQinp6iWeIVc6cE8ykYOmuXqDXmtRssXqd0V7\n661iGeV0Eyrjjehrd4VVQUArn/3xdtrcO22mueygeZHbeDReqegk6gAUJvDE\nySa7ViMcX4WTN3yYtpK49adUdUD30LMTAvoS2c+Uq3cyT8ZrONyJTaeV7mu6\ncPab9AVWKgTE3NPnB8BaLl+NLzw1INHChHmyJqajGiu5WL2vUusGLvESU/cC\nUd54gJPMDqPHjVWsSrOdzY2Dv+q2t+8W8JawKkIuKtsulHa4s4vWGuUL9Bm0\ncC6D9fJSU2+eh+qRKPNN502ycC06MT7uwZFXHdasTwkdAJiApFBgLw8t/hsk\n/+Gw8eBvwQ6OPdp6m+X70kMMVaHcZ8UE/lAKC5dBR1tNj79f40SFMRdXC/f2\nBtXGQZtLXff7pSufmoQtUbOHJi39rxTtmNXsuNmFstC1mhLtb8EKPbvcnGHP\nmY76mCZVhf9yRdTQ18dSyU73X+VHxU6AcgUz6L1bWP7IyB5sBEDy4ThIiSLg\neBoW\r\n=Y3t0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.c9c2ddd0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c9c2ddd0_1544056861635_0.5110725857341449","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3a835d8f":{"name":"primer-popover","version":"0.2.0-alpha.3a835d8f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3a835d8f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"933ac1392d0773376a9b4c0b614a008ad34d25dc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3a835d8f.tgz","fileCount":9,"integrity":"sha512-pdgrUfokLdDH+yMY+rQzVwXyfBgdditFevs/6agYb8ksn47AMBmtsRonGDov1jLjsu3mMeSTftwrbVgtnAiHlw==","signatures":[{"sig":"MEQCICsYdLAMb3mv25QadTT09Aa+MgWRtBxuWVjjhXF29P9yAiAbLGsJsw0ziyevKHAabhNSX6xx80TDj5sd4JHeAXlQeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCWyeCRA9TVsSAnZWagAA6r0P/3RP4Hi3xGbanZaAgqZs\n+LtuUI9fLR1/ioHasMkDVjQ3eW28yYk9DEo/yC7gflhr5M7sI31cMflur7sk\nZaKQ+1Rv9nzHYQ5SaiRFlbZBOwLL3PC8B8L5I1Jo3ef6LzCMxhS5xEfpsNt5\nDmv2uPnoUb7k0WOaU3SZWU4ss3AsHyZlStpdl5+3imKbV1Y3NL6vGg0Vwc9k\n37NL9h5DYStNfzGmxDD4Cn07RxYc0LhSDo8Gexsj8+ICZgKjASZ4Uk19L+He\ntmYYAe+H8IpPNXEVr5yHInbiivhrRC4kUbtABPAZWedRbOmC2RsgXXnNtiwM\neHh2Q5HK64U59VElDnrl8Q1tEyifIFwlYg8o9P8GJ2xDpkP/NR0aodJOEqR+\nkGDb2Owhw58o4zf1oto0ltbznbEJAR4JA9+aAJtctA+wwxJqZXRKCJ5aAyXG\nDvxbr1X6Rl9ttOinIKZ6vuQCanw9cI5sKJx7Yj+xnM/8PPgvfvYaskLVBaQj\nn9FIVCqaiLkhejizIh7sy9kfxCUG5Cny4XNXaKne70AwqYVhernWdvFBO7QU\nel6QqFmGBRrfCmeDStLgiNBia1x+8ripNuEZWr422Maf9Eci1Fl9PMqQDiGT\n8kOY/5hNfSvo14hM0/udk0SxNj5OmIWP/tzlQaXJ/VpcupLzXJr88puU/Tki\n8eq3\r\n=C5oF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.3a835d8f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3a835d8f_1544121501249_0.44447971569941314","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a4606fae":{"name":"primer-popover","version":"0.2.0-alpha.a4606fae","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a4606fae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3cfa853cd6bd2d1b3f76940c5613f2c52e95cfb0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a4606fae.tgz","fileCount":9,"integrity":"sha512-UjnuoNhzh4ifUusd7DjF6Jp6wgHEb1jIjEJruDZ0vcv1smVjZMYNWM69Hp2L4Q3NN0TqoOr+pmSHAGW1N21fhA==","signatures":[{"sig":"MEUCIQD/1Sh/K47gZF/530P0qaXyoPVzghqnfpb4MNiOLCL02wIgBBnje/ahPYAROVu4Oo1vBo0h1xG5WdNMxCVPcnQfj4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCXH2CRA9TVsSAnZWagAAmskP/R1mW/vyZnteoX1bZzDk\nWHH02XhlWMAIhB0OSc0brq9Z4wLzvj1xuB0l9QdJlpcjcYbHU98eovEFnn5y\nitlqdovj/JDujQRnSIr/mHWmao7MmuX8FsgxutICpCZg9YjsmxNUHewtRcqz\nwa+vDQaSmEP/qru3ZXRnYr8AVoxKeoiTruf2kUPjNh4ofZCbVut/FtCs8f9B\n9jAaVagaW9VQDTq4nnm4tk7PuEWQFMx2TkhTO7bxodfhzLt9ue9dyXjvcRUP\nrVqnXO/8mjoxgpeMWdC8QZyPtXGBjQtN6XntRNJn2LQiV47NbPeyhNh11Nbw\nMy7hSvMHvRE2WUWPUVR4Te7VkNuioGwmgogdcgyWm2rwSfNjgZZRsfFc7xuj\n50JVN4E1buCn33Ue6syTEN+dFKwshZbJBfVmqdaflz2dnPKpQ+wMWv/a7i4b\nHHo2nGIxPRmVaEFeWSzkssmMIRIdTT7ZXI1/j3RL8lzUu8tQtFIguraiFPaB\nfIOiDaUOkrj9x8eI/h4kTUyrxtDcSZMHyrONV5ntxEF7eBf+UUnWymn598AF\nXPiXOGLzfWQuvOXeGae5427FhdI9nsb8rPLhLNB4D51+gLudwHZB9OdesOTY\n7mSGh/8mlFcm4mqTn0PZ+iPiZERr93EGHm5YqDn1ao21qi9Qg0Ij5ymX4k6w\nFn5k\r\n=PvDe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a4606fae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a4606fae_1544122870266_0.6332532441089276","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1a319bd0":{"name":"primer-popover","version":"0.2.0-alpha.1a319bd0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1a319bd0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"571f85c86f01f2f2205ae3ec8baac27b712f0d28","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1a319bd0.tgz","fileCount":9,"integrity":"sha512-e4c/fpkIBHvZzN77cBaGkZ8syoB3PE8iaaBRCqMCb9WVu484WATC/Aj4R0BW7qYjm31iDguqcxB2XcPxG4VHbA==","signatures":[{"sig":"MEUCIFb/wIeLrdK6vcYwAzmAHOylYUmYqCRFMTi6l1FPkW4pAiEAnv5HpNFQeZXeY8eJw4KTDv+bwjykaFl7Za1iMLy/dAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCX8iCRA9TVsSAnZWagAAkXYP/0V0bDhiJx5SFal3PPxo\nRAE8rC57iq/WMr6tN78UV79lEd0QeFs4FXRKTZfPjEGhFEmQev/ArIjfh06+\na+VGugFIYuJH3ZwvTaKUIeKC40otF37nZ/Yyf6jf6Ms8Ag9CnyUWpHgVdH7u\nYuExxM0xteHaqqRwhmgrA0jfM77+ZDS8Se5j3Tctlpz1E+MNN8w+iEP4epNZ\nO6Hxzt6v4ScULQnfTf+kexB3flVFTZ+g1sMEkuKpU8/z9xMvr8Jjdyexa0m1\nDTVgAjCyQKsCfXoK6tkRJqIZMxCxzuoIAO45/+fIIlNLmaNZ84aTo32EtEFI\nk6KlJ331fe0nDKWX/DjVggZ/aDU+tmIAiQxIgxPE/Asa5VS+0n3GAu2G8c9g\nvVj1LVsCJPvr6WOk5m029ahq1rmG/mVWd8t9JgaTuZG2TCpfsxam18gwdEf3\ndeiIB20QN7hH3ja557OUCR8rw9gNQXW7fbjWxeY9ObNpNa6WZ/c4Gk0jLHK0\nRJZfoQlFgsTg4dGgAwPWjC7Gk5PQZErGiYEafuT6e2BGwpHShq3OEGilWNQN\nuvHpLHSnbb8/HuC3MCYam7qYiFZYeRgytJmI1rHzqWyPEo17nwuspffKLZ5o\n8SVgfXzK92JzfrkQ3XxmPmWSoE9Qk8wdI9nxEcGPMkpw9uFfBn1+Koxpniod\nS06f\r\n=ZFtp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.1a319bd0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1a319bd0_1544126241706_0.9777965166325315","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a59a2bd4":{"name":"primer-popover","version":"0.2.0-alpha.a59a2bd4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a59a2bd4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c12de7ba55b10939b49d1aa21f6f65cace1bd009","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a59a2bd4.tgz","fileCount":9,"integrity":"sha512-PlSf52Oey0HRj6QdruHLPySiT0Xpisq0v1d37JAi1+WRToldJWVYEBICVllJ7v09nYDwJ6VUY62JsJqmxd20mA==","signatures":[{"sig":"MEQCIHO2TRgf6Enno9I0DQgwxpMWEuYRD5ydThEW7vzxdCraAiABj6RWUOekgc3XX4UlvvYCOGVSZX7dVFpkkXKbiXnUoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCaSCCRA9TVsSAnZWagAA4EUQAJ2rIww/wS6gv1Uop4aY\n3+MjsiLz84uC2OFYe9qY2twjnqPrDxWtlCugRFbWQFWnF3DUm6F/Ic8370jx\ntN+JCCP4YGj6rwuTZhFma7JI535CyJjUbEaYmb29JDAG891qaWgp5kyEX5db\nFxje44psrJQo5zc4pNTbZy6vxtd+L1nmWrVSBcBGQlWa2fkHjickH6HePvXE\nbTf4tCpWOJb7EkJunDbxBxnXOgSV/YLp3eqOeh2PN+UKa/ew81ive6dvjIfX\nSkSWgA1WwknsMa+wDaRniT9kKJwcvZuF/cVXG1hOZz6gwlMAyFEGmMLnK/jQ\nvOQcuYo5nS3G5bsOUsuyBBozcR2fKsvFRwhg80azsjRHGYzUrsR/LxCyIkCh\nKIs8xfyBCwxd7sGhYVJsKe32tAHPsqLWzskS4Hqf7pEgl1B7q1BOAi5G6Q7n\nJ2EMeOSrEmFA4FuxITPYuVtqmXGAFgEm7XFK33amxMrJRyToAosdBPQym7zt\nCRNVMu5jv32oTLQUMRbbN+mt7UtWkIUDJ9WoXVLHCUemzJvJUkjb7i14phGl\nkTQmgafr/0u394oGm3lFMurzC1VA1IiWVVoYYwjzBEY6BsPbmKsDkf+drgi4\nOClPRtZoEWaWLBBcelALYPLpjYDH0GCazB2tKZlQCQI99B/dX4NoHiD1GJ7o\n2JI6\r\n=qZGI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a59a2bd4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a59a2bd4_1544135809579_0.02430634765706996","host":"s3://npm-registry-packages"}},"0.2.0-alpha.97a6e91d":{"name":"primer-popover","version":"0.2.0-alpha.97a6e91d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.97a6e91d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"979ceebcc1fc4d0a9364d041dd08a5c80460afa7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.97a6e91d.tgz","fileCount":9,"integrity":"sha512-QL2BwldXT3HBj2R3iHyOgSwV7MnErv9oSuaJgwO8seodciQ65naVE0VnLTWy4JBNWcMpqeu5qgYi1T7i3eSoHA==","signatures":[{"sig":"MEUCIQDa4XW6XC1j3Rs7HvRYHwoOkDfc5WPE1L1VghCcsqOl0QIgYw/7+mJWCKloO0TuUOQDcT0ARqvKOonSBzSybaKj7YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCjHwCRA9TVsSAnZWagAAURYQAJAxp7O4IivH5OyWHSd4\nIj0zZGDfM3w8tTILOhMHYBeXJtg5RoQdAJVouVuX++s0DEbryrm7BquYCcAR\n27QHEDd/sEhz/Bf+ZhXotiZcrt3suTq/R4S9P6rfR/mmJzK0n7x1kj3yENwd\nwcEN0s6a8O1c4jtPUB1eYQbS0xurWkhLhboOqYuM+xUq56dr015+uzZgiERY\nRBjMUwMi8FRBGtooH04jpW56nTk2Heopn0E/hRnKrdtrNIoBLB64tmLQFfo9\netIcpnny21FYxLT7bPq2AQQU8eWWGbbG3u/IDm0egWhFUj+TdnyP6cg0FLkr\ntf208YrurD2cwTDcHRWOogwZcckJKxepjhC2Hih2Rq2nDtiY5adpW/tR5pA4\ncUPOYC9N7lL6hwz757ltXzs/6zRoeb+aNmFNbAiFxsz+O7Q4jBAKfcMbwJ50\nyhUnCX/rF4KgwvsFSfNeXtt1YQCo96380uFsc50SReZ0JY/VVhWSR8+xI49+\nA/jA81OjuNXazOx4hOUuon+Tf60L6zlZlyMckVKRijm4aQTAzVGcAIk7pAQf\n6/jzXc5Ay/t9bn6e8od8YQ2FDY+thKxwCoctFRD0bdaqZsWqPWvUr2oIuof7\nSbz5ttV2htRyXxcMnix5gHvZcynL2BBTn1l3rs5hM1UR+2UhPyP4za55JYTi\nFqiQ\r\n=b7T+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.97a6e91d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.97a6e91d_1544172016131_0.9042870665354668","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a93e3ebd":{"name":"primer-popover","version":"0.2.0-alpha.a93e3ebd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a93e3ebd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4b5b36281c6c4c3da5697d9c96a71ec2622b3ccd","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a93e3ebd.tgz","fileCount":9,"integrity":"sha512-1EphUgILxz7Gi6CrGsQQiRbkUwsqr6Prc/5l2L4ymCFOXZsuzAivscWdC9G98USTkgKPIkoBsZiLAba+ey6BpQ==","signatures":[{"sig":"MEQCIHEEad+bcLvpToYoWKggVWrPsQ6xvWnPt2gPBrnAIrasAiBlXHkuzaCGokd3yaGEfVstkKNcW3kvLqscoSi4the+MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCj/4CRA9TVsSAnZWagAAm0UP+wf1chHJ3aXpnErvBdzx\nabfKzk7U/d2CqDJxwolce536MFfijZt1TB2Nw18WCcCkvckZQC99u1gM9Ts2\nnQdXYBwDoqXn0x5hahRX+EsqBbgBZtcgbni4j7ZN6SnglSlHsPygkMq6YA6B\nqoXJe0ittVEM0dQv+eNcjZRWfH3GaEGJR9YVUTILdTdWBDNKjgp9cvz/aE9l\nLfgi2i/UabxoKj6FUYvkSrqK0FGtWsNuTZTVV6VGlSzp5lsTCguXmR3q2W1K\nXd9kPeeICqGJjq5LIuwM/sUJQ/RbNSIDuKbgkN4HdvvCjOOHCjfzJqKlwXQg\nyZtRp6O/PH9Tb7yFOhPacFtewH3xqE3gkN/1BLU/hmC+SpxDgSKyr3dqAKrm\nH0v1AGtvjerVdkxu69i1tpU3yswgfDRfLij78JMBf8PBRxlixK+pDMOX+qxe\nEPIbLHlvY1/qjSJqK7onIrMkNjOUe2OeBCIoRrV9zCIfYslCd8KgAbHmG2/J\n9bgmxZO7JVaUqFri3a7gECEDlvnFsVpE5Qu+8RaPl+IwYpb2jlZeuH0QJVDp\ntpWwMfmK1YCvm4KYZDL8hyaWekHKKylBNgJf9TZDPWt4u1f39WlnP8WEs5HV\n8UYmeUTK99NKZyckZyLmAAsxnpBHY9W+ZFacCMhOdeoD43jxghKP3oL3E3xp\nRtO4\r\n=633D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a93e3ebd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a93e3ebd_1544175608202_0.4228767329403311","host":"s3://npm-registry-packages"}},"0.2.0-alpha.46beb5a1":{"name":"primer-popover","version":"0.2.0-alpha.46beb5a1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.46beb5a1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0cbf5f59eb4245f2357e522a36077a2ac8aa8302","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.46beb5a1.tgz","fileCount":9,"integrity":"sha512-g7tGVwEXGkxyjtBkYzvwo5EUOj06bgNtMG/evExKRtrOhCmLUKtpL1h/XSTkQJ5hWW9ur5KvGXcRzbP3b+0YcQ==","signatures":[{"sig":"MEYCIQDiyhK1uKkUuSL0x6exjwv/PNZ+OOnZioLkNjUWdOZVdAIhAN74KPrzndwCQLICL1/WO/FahWlf8uv6+NAgdlGAFQ7E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCswnCRA9TVsSAnZWagAAKqwP/R3BH2nPnwx7cYbPQeJj\no1jfb3JlPOU6jD4pRynWn6sGZDhvAeZGgt3/UiT9rH6yBK1EQ2D70Mgkb1cm\nCXaTEQU3Nvv0g8rs9TEtvaJS1Mf9jtSIEQbtMEkaO3bWHjPBWePosEUjs2Yq\ng6FLxSYGR1sJmeoNr4t/IZkTzz6ad8Mp0+EgOSGbrIglpus5Qri452N85Grc\ndK/Crc4gmRqlWQWTnHlKZ3ltlwle7BLzmgBDDTUz3rmnnjiHZ6+9qltJBBmT\n0N82S+osaJ9JgR7e8DiW5a3Q/JIsu+04Y/lyiDA6DWUgccBZiz5oC5Jv+NSW\nszW2Z8dJ8Cn8kAPOcC/Dy01P4lEoPGUe+15U8Z20VKsR4sVCyNMDsuN5pUuR\nZd2RDfS95RLMTCiAid3H8p4aqkKFFyvU8jb09S6CJB9Q/VSmN18m2Y5Jme/0\nQEVctuKftTo6x/kgrRj++5UljvEXrrRyB9m/3fdXRDybb5AFX3hREjExOg/g\nqUAdBJU+dnJlisfvjZ9VQG5MPXwfnMoyheWgt0oVBNX50eEUKfwlUdnJ569E\n73Mp2LuAKQrK0TDKsVuw9vENvcrMUR1kkaOPBUIC55dYMdrtFr9QAaoD3gBK\n9jqQntoSP8h/aoEhwZg/XH+ZP0VslyMpk9r4utPFeYVNJaxCs40twCFR5APZ\nVUh7\r\n=4Vsn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.46beb5a1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.46beb5a1_1544211494608_0.5170615806122041","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c20a7afb":{"name":"primer-popover","version":"0.2.0-alpha.c20a7afb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c20a7afb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ceb526c37bdf6215f55e0e299a5b2ca248a1ad29","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c20a7afb.tgz","fileCount":9,"integrity":"sha512-qqmgWMrHENs/9paDUG3xkFZd4z0i9pguOP4JaGyX8BtWI3d790cIF124+kf1CJjF8mbZx6ThutekNiFBvQ+iJw==","signatures":[{"sig":"MEYCIQCufdfEgKHyYANIY5RBcCAnWaScuCld5MLNlZ1G+Ec8PQIhAPUGAkrPUDIlA26qn/Y+uwfat8bcxEioX/hEewao17WH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvbfCRA9TVsSAnZWagAA7/8QAJEnwJICTUD17UcsB/X0\nYkbY+7vnrvUWn4/O0pV6jboWvXppWgX2xT5zJLIhg1x5WN9T7pMzm8rI5yAl\ney/EHkoRAkqAv3TG4GHA210NvoQV1R+2YWPxyrPzDZFOAXH2s3I2srmrgnSh\nfEeBLZXkn1hMFa/KZ0I6/BEO/DR8KIfc5EYbtptNR51T0w8LkZBUWGMPiT69\ntUL/bb0CwIrG1CPPKaP9ofAKGKvKlOXVVNxz2yMUx1AOd6RXzSfJeOQRptZO\nQT2PUbxywYgefT8zI2+ub8Wf03p7J5hn8nPm1CB9FzhYrCFw3zqDMdbOrLoV\n/pK4efN2yL6q+9tpECc8LGcuJLV2UwBMMj2Wu8TiuCfP2EesKXmMtia7pL/F\nc2nsN0D7DR87XaFLudZfWqVz/Ko268+/5jTduLgnXuQMdvXXLj+z5/SUyK87\nVby/R/WtbC5urG1d0BdBSlqy1e4IYr6nHqavQ3eHeyuf6apAHRzRsofCvOzZ\n2SH5Zh/Lof+/F8ExpR+ho6NUYjWW29SwFmSqWm4t/aoXFtCtQLVb1OpYYSzM\nuCMm6tm4ZInSNrtLlmZK0l8XB7mm1SJyO9sJBUJfZVry+pQCPZxVBhmXVyUB\nB2Doyfj+Qdb9SOQTSCeQhrxCkBxC+HlxpwG/80tKW7wdn833thnQ7bq0e4ho\nVCcX\r\n=NyHp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.c20a7afb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c20a7afb_1544222430964_0.8384238284063739","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a369dd35":{"name":"primer-popover","version":"0.2.0-alpha.a369dd35","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a369dd35","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bc5e120db38190806651f6aed210c2385d339da8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a369dd35.tgz","fileCount":9,"integrity":"sha512-V5UCJ+uHQYfy2r34ANa0qVvOVnWCP8xBvb3NbsGTDVP+v9zSAc6wbw3YeBX8zbKM/DVw9OU+1NF57Qz1FvIK6w==","signatures":[{"sig":"MEQCIA9Eb5EM61yhaUxRn26sMmtfm8bu/d35FAiXZnvnONwuAiAx4LSHkvGKd4Wneb+CXAEg6janRzzsMxGeUaIKNgYNEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCveFCRA9TVsSAnZWagAAEE8QAJJkj5axBy+P5spJFImW\n/9BYKXBbJW0bOkZagdK2y0xt7dwL9I+HRaokWVTK3AgkCIQSroRg/ef55Ao6\n/26xckEq71m4s+H/5iQepKnq0kFhWSryb1yQeuwNEYkv9dvFYewg3hsipL0K\ncNaxxrLcUGUVlINCGHtq6fh6bS40SBJr9ciricJ5gwuTDYscEDP2R6IDa4aT\nNrSeMb/lTBzCpzIr7lVwKeJMW9A3FOlw/wU4Efb+goqKCZmEljsPaahmMq5g\nq/iFQKRwAqjWR5teAdCl8K5H1HbooTaesDEt8/Znj7zYnenuubQdVhfs9zDs\nYRwP9EyA1D2QdlSNyJH7FSBwxFHLFmnQk62hVdVTQgUF8l47M71jsZyunYlN\nLnH8IR2wc1Bc1EGyNywsik2na6uLP5YpM1YSRqI7IlQPiJcSM1Uq4md5ZhIZ\nHg63aS0/8AeKSb/Vb1ueOpDhzX6adLhZiFpDc8IDTQN5yzF+g0p1EpmFE3hU\nVka1IxC2VM7iWcPVfTe2SfaOP/Hi0atJFROJ3lLSY4PI7DcVJI1SuVCJIcnr\ngQLP/O6iyQsaCdJDDkYkNEoaxWmbYbtyPMR3eHHUZpECjZShedEIr8h4teNN\nGKZr9N+amr7AJ2gEBtU+GXwLXDaU9+gKf1NnREGkwO9YIl8DpOtTlLlxyJrT\nEGCn\r\n=VadO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a369dd35"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a369dd35_1544222596418_0.9830532265044645","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d328fa90":{"name":"primer-popover","version":"0.2.0-alpha.d328fa90","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d328fa90","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"46eed06c0207a060a09eb5a6aa641890843ea30f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d328fa90.tgz","fileCount":9,"integrity":"sha512-Akud+GqrleiBo1ihmdMhx6D/Nwu6FSyoQtf/6aUF0qk3zi7DxZBBjl9QkMrI0NIcbVFFivciYRHD9pFgXzjUjw==","signatures":[{"sig":"MEYCIQC/Hs1MazdkDgZBfvxWkePJ3p6lUwdRSK8MkpMSQkxyzQIhAK4jTSBTQCL+tso3McK3qDDLndAxHOyKiV0Yhpo7iHUH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvxlCRA9TVsSAnZWagAAFRIP/RD95DFy6hlKgamgzojj\nFEviYIcY3GxMVJexy7iRBC8cwNkBz/lElaS7z8r0Q1LYyKi4lEy55RbweIHZ\nvs+DjL53maj4tMo4QG9PTFxFj0zG2dqNPUcYKxjc6R2WnZ3U01D6RC8giFzw\nw2wnNV4z6lRiYY2MmoQxXGyKNrTGV7H/zDuCouxd8Hs778iGehOIq01BAND1\ncX1UgfSK1E3EnbKWK07efRIcs2jzhJc4G5ad/Ar3Ot4sCCcNBuUP1fmIvDSc\nftH+vg6LiZN4l+qhXCldVKgx/lOOOnGwIahlQP72UPxVNATA/XTEy/Lt1WK/\naksND6NT6L3ZwaRKowWL7ngjfN7DDRorslozybY6KUFW8lZbo78LPiECLVLN\nMPP/4ebOOeLEaIaBDBnjw58mFxGGHc7d23GJfczrhsgftQSs2fM+aV8N2gUD\n293a8bUtEndE1J/OwuvPGFmMQGVZ06ueKPjfkSTw7wxixnx3dLunfCSWPXVZ\nVcAV3gQf6uAE64Pfq82Na3Uk+Y05txgeH5ns9gNTu/HkDXrHgdQFNpoxsz7M\nOy/v1VGz5I6mTZlehUz0NTVe3HoifLrtrA5NLFbe4Ey2x7dz9bt0TOWqUfp6\nUP1b65/DD9UYyu4fYVG6qUv6NxGaWICIUw8b0fLcSx/6azMUz9cEUV2OcP/M\ntQ23\r\n=1Mqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.d328fa90"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d328fa90_1544223844842_0.33350447249190407","host":"s3://npm-registry-packages"}},"0.2.0-alpha.bd244056":{"name":"primer-popover","version":"0.2.0-alpha.bd244056","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.bd244056","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c92396507ea65cf572a43157769c61b6390a94d0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.bd244056.tgz","fileCount":9,"integrity":"sha512-ky8f2sCOLugIVBAJvNF2AkXRl7nCltu3o3yeWhtXiE7GBJ8NTaRR713z9tL/1R3r95sWS8N/5+ez4UhCseIAdw==","signatures":[{"sig":"MEUCIQCTiX4UUAK6yjAFD+ZOXiAQtv4kmoGXoMr+xWDTDAk1/wIgPZ5ZVmiHY7J/FwLD2H+2Nr9GAQzn29bcThjn85qmxE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCwI7CRA9TVsSAnZWagAAI9wP/3N9tnYD1tpM1tImDgzM\n9SRFNAk6jloigOVhiXmG9cLjkDog1f4c8T0UYabcIiREjNAVs0qe+cmrzdEL\nkCl3fLwxnAq+3ytaXJi7TLKRxMlC/oVMJdqz3xUBSc4xruZ9g8+GZEbxzD1U\nPXoRy4/hN/MhKK+vIkAqxvRda2srGkZpZLQh1lm2gtVyxsIawMGH8tOFXcBF\nB7GOZlBXW+ho6x+NA0+O3Za7qAxGmt1itwMZg+9CNMJ7lopcqIfT3jZYgfhm\n3IS/HpI2KzB/Zf4J3iMSU7tDBrvZfoCn9O4EjwkJ78n2hZ8QXX/2ESjJtIxh\n4S/RnBVI/tFkhGJlE4T8BnTgTgAfAPQ3e+pYAKEGm4QUxfVR2TCU+WqDSQnI\nSE4wINiLZ69yqJiW/O+aGULZifGN8OR2voAVReKxmJ0PcM+jbpX4SXb+BTRz\n6cAkTO5PfmPUGI/DFerFcl+uFLEBYXLkffP3AFKpyqay7r+oEeqaPo54LytZ\nP/WbJgoBZ5U4vHyp8xLFelyw6NI7ptJpYSq5pNIONVD0a72RIf1iH4DczqOf\n3GIjOA7mw0ESjuBxRaUkUsFPzljJFS1pgyIj5SQrS+ZRjhWdRbuOuoau5DUs\na+5b3YnNibM3Lit2sqRavQ6CiHPEhPmBOIiqiNFXj8tXAf1zZeBOaZ6GO6+9\nKwjT\r\n=jm/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.bd244056"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.bd244056_1544225338948_0.4222022324078647","host":"s3://npm-registry-packages"}},"0.2.0-alpha.f7b11c63":{"name":"primer-popover","version":"0.2.0-alpha.f7b11c63","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.f7b11c63","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"da76c2c261590d2dd800ec1cc6464818dbd8fe03","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.f7b11c63.tgz","fileCount":9,"integrity":"sha512-68TmQZCbcm2qSxgmg9KlFUV4GoFbK6NYQMfQhS6cAIT1/sOVG8FgcbvMgTYvrpusrDC20eBuURfDwV85Lh1jkQ==","signatures":[{"sig":"MEQCIC3DEeO1ynDSr4JFmmhSCL3l87DDKAkmvJApxTywS8YMAiBb+gFu4NtPpvZarjyxeI4JZzOXDb2qs4Sbug/q7ATNPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCw2eCRA9TVsSAnZWagAA0fUQAJjrazr21NUjkT+CritX\ntiSPcoqeoaV5Cn8ucm/PGuieqrwfJFwuyo/ddLIx9C0zqZQ6jkJWec/OnoLV\nF6tizu1K4WULVBwn1wOF+dNKi0/JTFoKlrEqq1pY7JXnZc+fLmqVp7NuM7S9\ngoz3WaunZK3FuZ7UezaWjuCFoC1Izhry5AqAsLj2JC6Bmv2lkm6Wl+UO9yrM\newLwharFjo6531xBjzxTWcN3tShBuKv2vbFrHhHd/LmDScrEn5mFA03PDWfd\nA8h0vUyvY5Pe7Jx3HA06TpRabnhZW6P5OjoTsA4Zu84lWKgZfxoRXK9cdm8q\n1+uJJClL4yOnmw8ISTxemQ74+CI/qU6uQO/h8rC5b5Fa8mMzojAhta+Xb/xr\nWEVvsHFZbq3PhBO+AXYh7aEjtI8DhU0pAE6FEkqjHUuZ4nYZdMncXAR2R1U7\nti+9FBkXyPRyvgTIX7JYprtANG1qRqR0bxpnX16o7wvl76IhcdMXKFvPMoxX\nScYSj/9NLUQKm6ukp+ZBdvkWKtYokxGvcoy7jxFYLubUT6inkfWEOfKrmm85\nX30ZUJ3lYZu1zXw4e+YdXvg17csxJq3wegeMqohSPmzpYMSsmVemCI1+nj3f\npE8ZWzbS4kq6gib8tuY899Zwb6javvz6jCuzcGKdxvYEr9LPN716CRGKptQX\nf7Zw\r\n=ZjRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.f7b11c63"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.f7b11c63_1544228254259_0.007320262040759529","host":"s3://npm-registry-packages"}},"0.2.0-alpha.714565b4":{"name":"primer-popover","version":"0.2.0-alpha.714565b4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.714565b4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1cf7b2458f2827f28fd0ad221423ca459aeb7717","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.714565b4.tgz","fileCount":9,"integrity":"sha512-Xbqh9gR6m/2DNyCHR1C1v4Z8cblYVISmqoOVA4t9wU24BYRfmhYMJ+S2A1Nn/bca8S2RQcRT+P4IPsRlcpdFow==","signatures":[{"sig":"MEYCIQCUx6X2f0v9ksu+DcxCOe6Yi2oOUMqFYuEJSL8HMhmWiQIhAPwzKU/r84aDZE0gl8U5ZidA9PfqmUJI7kHFPQVIHYd/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcDpGeCRA9TVsSAnZWagAAKRYP/0cdKZ8vRQV0P5SNruCD\nOjSm7omMByAo/NKZ/3t09kTt1eJ+2fUo/RZzjcm4+02vJxphH8dsMNUjNslW\n/bE8y3aBjTQqdThlLWHPbvnDLdP4jqHr72nphTfK0WUkcvm0nlve2MHXbmrn\nUyNSrp5x0dSlmiX0f1FDMb6XNdIeclNPK9Dw5HyncV9byS8zuGP72yulWKtZ\nMQvbuB3cVne7SlmoUCzZAgQp8nf4hyOHpTyg+uS4B3Qcz4BcIpitBUk2/ii7\nm6QAOvI7iJwzOo6jQDiGUxe1j/l/E6TNTr2+1/fRKtjJt7q+FZ6YqQL12wQk\nAAlMriCRrCblz1esS0LNj/q0vd6jUbY9r8VZMS0LnAcZYe8jX88ZTGocGg1Y\nZCuP1tvOnON2hoWo04IATtqTk5FqzRdQN48S0QIEJL4JU2rlw1a7XZNNfWbg\nqhw/qg7aiXY99NUkFFxc7+2ss5q2DTUnXBjw6JRfXt1G9Pjgn+4v23KWktpJ\nkadBuEbI2XST4DDAhkIK9F20RX0BgnAF7KFfS4JMGgDUb5cXfMMg6Zh3egIN\n1uVl9J7sF28A9oOjrPt414wn3k5hvpYQ6/vlAYBmUiMPemGOKLCzrtp8JtFR\nqJa6wiM/fHZAtRVKeeP9Dfi6yp6EkJQSRnI13X0NjeP0dTZ8oxtg2SyTklsk\nABh7\r\n=a/7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.714565b4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.714565b4_1544458653370_0.9139883649821674","host":"s3://npm-registry-packages"}},"0.2.0-alpha.456be6d9":{"name":"primer-popover","version":"0.2.0-alpha.456be6d9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.456be6d9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6b4b018e336084e42a232c183869e9eaefc3fdaa","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.456be6d9.tgz","fileCount":9,"integrity":"sha512-np+ITg0IQ1i2A0XWXW+wlJ7XJq84GjbVQSeMHp/pOTxFS6GeezjpY8tpsYY7jEQCcfywoTVOPg/tdVjDdpxZzQ==","signatures":[{"sig":"MEQCIHHmyjYAChAlDM6cnkHYOAIQJvbgo6BXxzWPS2rjDRbZAiBDYc9iV7v4CJfmmN6sFmBCTYZxdmrGJfdaMJC3w7YU4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcDwF7CRA9TVsSAnZWagAANewP/jD841XO/noegfCMfV6a\ndonw8ugRT+gOxpo79FXKwkhPpjF/YM98iQX5IDoO9xvRW2E/FbwmS/0AyOIS\nAYG3Kc5EXZdMJm2LN4YG0dYligL34PszYq3IcESlmrHBmqzBF8gb8n20xX88\nPf49lKadI4GCcEPaMGpHrSkG62TSBq0gVL/IXZKvyWdqByykycLzfdiAfV8q\nEQSk7lB/RelKDPGvg6vC63oRSNLlnfx/rpkb1rLfLBem1wiZuyuI0D2iHLO8\nNNPXJ/jJ37aaJ4mrYC4B4psNaSsUvyt3uOFqSTErQ80mAyO9nFiqm1qP/j6c\njpw48wYzjGOOo7x5rE4Lllk8M3z28DBI8MHo9c41DrLc8CEfF8KR+R5Hdi6g\niMZ86/SRGX0+FRm5a4ZsKsUTbWjPm4fwrdv48nnY1i907/UEKit9nvHTUDZN\nx5DI+A6ZRyYIieSexKmiqk/dG3/lYGwCMAk7l+eM7ZdeGH4G7zVdy6Q8emhL\nIWne2XVs2Xa7Xykuy37P8ez53WAn7e/7X+k8MHPVH0Isn18HtrpRflbNtkuM\nhh6N5DZsAaBPaLVtblOYw+/OXnGT9DWWQ7n4HVh6ttty5baQEYWGdBzPQH1w\nV+aujROHmXc/QAetBF+AsJmPTgJVqDSx/sCnX+15IMKtF+GPqBurEisY9j7W\n6AE8\r\n=jtmq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.456be6d9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.456be6d9_1544487290430_0.9544543612379606","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0b0d1941":{"name":"primer-popover","version":"0.2.0-alpha.0b0d1941","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0b0d1941","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7c767bc19af3505405bfb467327a36e53facd8a6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0b0d1941.tgz","fileCount":9,"integrity":"sha512-StVnjkX5pdJKRE8MKTdFfEPuhm0NPEW12qXXkHdeH/KNZ7uV4teBhqm7NPxo/f7LZtffWEh5zVw56gIBMMwzIA==","signatures":[{"sig":"MEUCIQDIKGty4Fm8EoqhPCL60BvWsWkSqVwzSjwlUeQve4oOkgIgZI9hYTmeAY9lIMYj57/jV3NW7n+MiWNzd178KIdhK2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE0RHCRA9TVsSAnZWagAA2MMP/1cH1jb7uTq9KEiHHGkc\n9iwosVx9meOwicd52ZZexlDyhk/ZwW/nQuMMeFWBGLA8/QOulxVgq7NoZvLA\n44jMBCBF+oUj3EkDZz/rnNT+JCPA1fYTAkgbUFye5XdAGw9r6S4tkkjFrXkq\noK8MEcfzB9BBXINQV/MsTE/Kp6I/4C4zDH7AIB5K9XfBD4Dei8MgGb4+jqnJ\nEIpx881Ve15BIWv8Wg5X0uB0QbOaJ/2DUEDsEsCjSF7sfdoO9GvH4igJfvN8\nxly5jvABDZIWdEcGGxMeiDEQOdKHBPDRt8FjtKrGmvd7vJi8nQfmjFzBFSee\nxunoYywi2Cd+/NQ2KfRDPtJIFR4Ej7LWLYhLcPyuJ3gN5fm9nx4oc/Eune9g\nWcIU7zvAYGK5rm+B0A4nsuKIamDPGyUD/iGZdGTUxW64VaVc/b5NNu2Dq+vl\nzdDI1RvikHhJ2m9QTkgfvsDDBDN1T90zEQASPX1K7MgiMbrILPMSo6UOX5en\nOHKKW4so0Ig4MiiGf3vt8aJF6IFq710oMAE4Hk55rWa/sGQhyUKuqmJQwUZM\n1v4pnN3e8Y5TuLBkppngNp7G668t7CRlu3UR8+mu7oIRNydx30shdfZ8bAl7\ncWH74EwjW/rlG/czxvo+9lmxrHREeWZdja6PEVjJ/8j0aA5U+qPUpIL1WtGU\nfCrk\r\n=M9Dq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.0b0d1941"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0b0d1941_1544766535244_0.5429857930309441","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7acee306":{"name":"primer-popover","version":"0.2.0-alpha.7acee306","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7acee306","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"378c2ae52013c3de0b5a3a96b207d3857a289b5f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7acee306.tgz","fileCount":9,"integrity":"sha512-jFzI746tHjB5BaJeRghiW/rymm6b9Kh6fxUtU3c+Eb1/ggGg5KRP4xC5QY1Ag3TI1a9WuotfSVGFDKAMUB3kfw==","signatures":[{"sig":"MEUCICWro+TksUi+0IMUBKxdBXy036e71rPwkOMVQe86KI9FAiEAhiMoSsFUrABdon/FYFFXvNtV740jTr0HHaByIpuZzeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE055CRA9TVsSAnZWagAAa50P/0TA7RxnrbLUacXlJ1lB\nkLmX+lMvrCBFyiI+P4dxfMX48X8OxGYHGNGj3ao+dhd3cav+8zIuDH69uFOk\nAHjmREl3EqcwXsxfaR3vpG5BCco4VhWfvUEnZVga6Rw6yV/3S8JMTT4p59N6\njPG3P6Rhzh1Bh33qBskTWlhThWPRwhQUD5/se8GMDld+n6mcb+GEw7ZL8LoA\ndwPRqR9qEB3JQTx45aRvhu0qHBAVRxwHkFYVlBKId+2HPoOm1yw7E9SZXUd1\nQNM+7fRnGqLf+XZA//z83g29WNR1Z7xe9LawxNwYoaeAz+Bm16gcuF/v0f1F\nsj2gjFE63vkeSyzKi3n4Xp4gyWcfCxNTNKapt7upKA2BTjq/Y7rWNa0FDWVM\nFt6rJChTmnx3WhTr6DLBvs/7mV7qPyOOj2qMmjo/5aXIc44tXlRj9zjDqhPB\nZEdyUUNfEQgnfBm7l+aYUQS2uQcCsafvqI0lPPiqKLTGvGRjXG7Avn/pO9RV\niRx/mTQHRVaZFWv0MxuLJ8WsVzkbTsoUEg4498rewWQmYYqyUjj+XdHS1TRJ\nNELPNHL9PObHQWgg4MztEPgk4d/7Lof4gnmc4S+69UXUVIfOub33ycelCLut\n3sDv42Cu78NF3IZyB1l/3yEJiJg7DzqfS8kMFyfCvum7c9bCAvWeI7unYoYa\nMNog\r\n=VZwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.7acee306"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7acee306_1544769144557_0.46004015065255466","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8d9b243e":{"name":"primer-popover","version":"0.2.0-alpha.8d9b243e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8d9b243e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"46ea74766fc2a8fc75503069c98ddd8d5061e862","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8d9b243e.tgz","fileCount":9,"integrity":"sha512-DBFx5FNZ99Klk/VZOUAoqOVeRLfSCTxKL00AxG6MLm6/ZxC65McDPpxBd9dKYOZyK+5QTnNo6I2g+IUutmX3YA==","signatures":[{"sig":"MEQCICRw9wytiUN7M0lKExPj3oUgntJjLrI/WnJKbDL14rhOAiAts9PpmFMEUvFtvDG0RlJRiqLNvy77n2fOHBVcHxVCNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE1AcCRA9TVsSAnZWagAA9/YQAKLGQMasD/1HurS8kIde\nnSZCxuSQ54F8+2Cl//K+HStPmGDiBXCaEV4h44bB4vP5qtqkEIka0B227TQO\n75XceDsyDI3oaRdOoOpKcgT9fC+tthnMVlXSLlZGQJrYGTk+2UeNMRS+i2Tr\nCm0CXmsysRIsFvG1xFou/brZQKHmD8Q/YspQVAxcPtEYcFdCKXowFuoNR3O4\nqwE3+e02eUKtFsLaFMlYVrE6tnbzqDdxXDaK2X1w9+D6oWqKD3Yg84aGsDd4\nZhwlvJ7WayRA7K6298938zDjeSSRzUqc3DZucmIe1kkRcD28y9pBpxO2ILw5\n9hvbcIhhKTEtwxRej/XkvG0FEkacyLgnJOza56oGDQMvgCgH057cmVVNyfn1\nWc3teyD/SfspWxsnWVhHWWxk+ahFQubN0agFcdi/weQzEBsDlVVA8xjBwnc4\n6Q9ZPJfghkhWfFQ5xps2AJSLBOd/BILj1OzNOlthCsnHMFZA1DeFyqLE+Whl\nedUKwy+xNcDxhWCgWoO10Mbf9riy34X+5961GGeZJ/4+9SgJOQwiR8OjNOLf\nar6Ib+xtCcgbvSNHnOWYffL7Q5azLu5cy/JK2mL2qtWmTtWAHwWFB2KYZCzD\nfnCG9V0j26dY/EbFadomURX+zkAoqQ4aJeepDQ5ZyC0/gz8HQboXqAR+Q4T8\n9QLf\r\n=UU2w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.8d9b243e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8d9b243e_1544769564220_0.14410755605511683","host":"s3://npm-registry-packages"}},"0.2.0-alpha.084f709d":{"name":"primer-popover","version":"0.2.0-alpha.084f709d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.084f709d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ca1baeeafad6948b8febf991f86b26702f0c66f8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.084f709d.tgz","fileCount":9,"integrity":"sha512-UGXE2ma4vJObEMMhlDDV89FLXX3F1SOZR6i4PDrMS4XUgdf0diEXEjkawrrw0EYtNOIV0OJneG1vrHwS0sY+aA==","signatures":[{"sig":"MEQCIEI2pxYL5iwxp4aQfWGAGal3WVMU12Ym1hrOxBGZ8vldAiBUBr+1RgCHl+ZaItFslsf2f3i4U72wF2vP7xvb+/71IA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGCrSCRA9TVsSAnZWagAA+NoP/RTsr56qDWdyQOBsXxoF\nfS67YJpyWlBL8JC7o21cYDP8RiiBbMwSKb/5s7gAb4ChkoEVrC+HCPpMv/nU\nWHj8/N+dFyLai3Gdg/Cpct3S7sdN+Pg/vP/HDQHjXsBxS5v01KtnM9l7EO+e\nFYIXPOHVKPGiQ47gFq7dhZmv9XwcbuOiX39N3VjrDjJhGbu3xJZ+ocSXt502\n0vdZZzDybJ2JQ8ND87QusvOII7WgiHO+zSziSAoBwzAXqU4KB5e4E+HUGSLp\nFwv3o80JNJtvcp5JKUBeIdLl5AiUX1vPx//ZxCGQ6xh+l7lvZz3rDUQMHEqz\nPeth6zxfSLlNkP/+9FzQn0E1jBohboVs2op+0mtWmFFRxWp41H5kSSYc2Qh1\naf3Gw2YLee/j3tndXzk/XpvPYjm3xioiOS1K6RxDRaXQACWwtWxEwr/4dzFi\nErNTZG3NS991II+iMQQK3mOHaYUaI2R3GiDw9FzIbcEAiOUcQXU2bLLJ4rep\nsCebzWkS661Mkgyt+uMHDRq9LQU/G2DGJMu+YLJjQe+DtBYa4ZrDsxDAynm+\nvE6z6rqgaqO8Uj8aXoqtkPgvDgNdi/mBSISsR2WjqL83ieor6APkoh4BX+Z2\n/dwvNK5FX1Ies3p/stO52HYu5n5PcFMLiFT8awafQd+cEhLLk0O7ogksCJ9R\nDF54\r\n=ZPhj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.084f709d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.084f709d_1545087698251_0.26053579806484395","host":"s3://npm-registry-packages"}},"0.2.0-alpha.f5a89e25":{"name":"primer-popover","version":"0.2.0-alpha.f5a89e25","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.f5a89e25","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d0fdde2a1f02851e9853e845226e078713a35b85","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.f5a89e25.tgz","fileCount":9,"integrity":"sha512-WggYuYj/FFfg/BzHfncQmSHPr1HbME0fLF50bCU1aKoUHOZ3us55BU+qTQAgE8IEkwou6pNuRvWaeo8pXMnL1Q==","signatures":[{"sig":"MEUCIQC09Gu7wscWLGigYsDWWs8FxNGrawXeKvNFrExjw8BGlAIge7pEqzAv6s/b/XXARemBjbysLOugUNNeZ+61mB8eEuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGC1uCRA9TVsSAnZWagAAFfcQAJx/m5QCsk29DCmz0Wcy\nHoDVWnzvhXKecfLH9Vr2i1a2gp3ujUI5GrmbLEZAII0tER5pchU9q5pMXpYz\nExGbIobMdSKhQNhfLiQQxZrYJIcqsPSpzkQcHf/bfv8tJfE5Sc68HLByO+mC\n5gil7CzxyMq4Qe0/lnQN4nzPsNjbU2YymhfuEkIIcPVR9FzSrqKFjFJMrmLe\naa2hGXwB74Ik5lFzqNp7HA65AL3o5sfhSW1swAw5y1QRbloGy8U8sJyJqpyy\noxXSFHMKhJfIhJmd+nEw1Y/XdloMOqXjhBb0KCWm0qjhcPVN8LSHAJugOfhM\nZNrmYOvnH2JSmU08KhcG/Fs040ShPAG14NIBQkXUkfibqwasVFjINKj+OWOf\nKBDTc+xHRVCnY3k+Jol+TZRTEbhwZT6XdHCq3f8ZpaQk3L8C0iAu+7phqHAj\n6UvuKPujjXZ3/Of1RcnKOTGdP0wpJ7V3FxIGR+XmL96aByCtDloZ62wZdkdM\nK+hHfmhDF1g4ethSNHsPkobRQv/K80EOKJu9Fjj9i940J+EnZ6ER0FtKNwC8\nz1g/kJKoMI7DgLvGFImMMfEXNGgH+YZBrj/ojMidlY34Uvi8PzZzBpz5zm6g\n2QeaLf5JLDP/VHT3egC2mf4UXBAxLnkbTWQR3vaK9UToD0MNIuxo2lkNgz2N\nwppf\r\n=kvVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.f5a89e25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.f5a89e25_1545088366022_0.8814984819783589","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4586004e":{"name":"primer-popover","version":"0.2.0-alpha.4586004e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4586004e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1ef796d50760fb55d4092dac23217f2b49b0f2b6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4586004e.tgz","fileCount":9,"integrity":"sha512-q4rM9gJpGV0qjLPaOglfjn6/1TiFtwRn6FoRl1jprTq8+tFkvePkB/lXbH2gC/2WXx0oWwBH02unSsVSaHK8Nw==","signatures":[{"sig":"MEUCIBFkfSQVPt32Rs9uXW6Xq4auCa3Grz4PYH07SQTnud6XAiEAtLFcD94eDzNzvRK0MwJYmgjh7SVDq6jBo1fOpRWOB7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGC4+CRA9TVsSAnZWagAAUMkP/RN3FBIKMC4wS4yAlA41\n997t4J5VJFemHWtedXHOx6XzJwgb9Giy+VT6x/MNT9F1MyL32DalhzY5QJIu\negHMREMgsCYIWFSKocRvNDBZr9HK3VuI2Lqm+/Qb/g3Bl1lQC8bFt6kca1XH\n/gzRYA0HweGokeh/mBueALhrEN5Lfzt5Ri5C77rUMNUGXN3Fcql/80qEQwyN\n9AmcqFEzUdJBXb34JmQPjyNqMQA4SU2QyhPqe0GJm8PRoSaKNWogifEnlF71\nXbVkSc2C62hSVaINWlg8FP9HRQuJyDMmyX4UTdZV0qG8G6fOGsjz1NQJPJUe\nkBDgAU+x64P4Bqxj9iVLHeX8lkzT/11jOxss8nyaaD79cmwavuEBkkOIT6D+\n9YOaPdB+qn14EuDbJyg8ac7ZcefkO7dpNfdmVZasa7Wa6qoWhXgbIeDgM+aK\nwZEUOBUTKqR6WcNgFtOuag8Ev6v4SMi/pF8eFlQXQn3se7dtmCVPy62ADXUD\nGDq8mf/4J9dUOi2ORv9fauvQg4iRi4oKoonNTX80xLPBH3H9cTZpjuMCxMR/\nBF69zr9IT97xj0wVG6t/Jgrt/aO4ISxnhIEIsRD99Fxf+94w2Bkg23QdTzA+\nWsG3xMVC1Wqwc1Tqe9ZgLrw2chkLc5H2531rPY+mq2NVKlM7rr0HVTW5EoOJ\nuhep\r\n=ICbe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.4586004e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4586004e_1545088574333_0.14666444160616288","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6289c294":{"name":"primer-popover","version":"0.2.0-alpha.6289c294","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6289c294","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9925ff5e923a3c7e77e8c5110599767b401da67e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6289c294.tgz","fileCount":9,"integrity":"sha512-7zcefPV7Uw6u8S46hcMFbUS/du/503okXI59c5mcGC/kl5YvMLMWCE5dcZtemGGPWh847AM8XXv71Bcdm/rNCQ==","signatures":[{"sig":"MEQCIGl3r4+EzdJMunoR+FMLeqBND3L6G5364g8io+CpMfbmAiA2T1Y7pv9bOjivmtjmOlAvnkfwrSBXBuf/Tkh+Oiyifg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDL8CRA9TVsSAnZWagAALloP/33jfK+0dDYByX/IOw8e\n6vt0oaURRhXWQ8JTBVgiuhIkr07lZvu+Mmo7GdrvqCBpoa7c8QHyUB1SWqdP\n1SXT7t20nV1OVoGrepyai72UApIjkufTdhcUJqfUo4KIo15M08rrDdHvWphG\nSSH7HOE9uR4GYvnMjlr8xkzF2R6LpQp6SXxXuwA5vGNKP5/KWUl0PMup9kEx\n4FJuEG8KIWuNuXFPUstO2QFC8zj2QE0jYyoh0xfDJSeB+EiQ7VVrGnaAFas+\nIpllnFhvU6bIFLzD7+Z2oXQZDarfie0vjS0OnhJEtjngaERXA+WzoyhIjCfd\nResVzAlNHdBr+kBA0HbT0fiXYi3ZOLxzIBThKZ4b0uMnwfQwcaLYK1J7aDaX\nG5TcdJZiVIIOizogXvCZHQ/GpU/KIwIfbuJhUhM/0HTxPzERtQWmfapu9+Bw\nJZOethTPTr5dt5PWZZeQge+QWBJobURocr0fOYodCy++NrILKBbvtH3Xar26\nxeXNBMGEJGgmBmYBUSj+ROh+PwjbKelRr9RMA1vUM92PBgo98ik6azUS3rtr\n+ae+0E9oXT6ZnfU5TuwZnjjG7RjrBYfx6XdyAPyHoJCa7l28asSmOizsEIKU\nHXvVBfZFmcli97F0ftIcUErcv+8dXNShLpgQExVyYOoRYd7KJPXdCu8OA/DM\n6M9m\r\n=RTpC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.6289c294"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6289c294_1545089787905_0.7491260913791813","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d4f69a27":{"name":"primer-popover","version":"0.2.0-alpha.d4f69a27","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d4f69a27","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9f9cf5664a9efbe9fd1618a94e21b64b883aac97","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d4f69a27.tgz","fileCount":9,"integrity":"sha512-sYDlCDBxErD0pyr83xwB4CtdWCVPsfYY/KTlzXylX597wVGRBP7WGbdZcXNHdqFfqBBqckwuGSqIxY8ZzsjuAg==","signatures":[{"sig":"MEUCICY/SRvyUybxDe8nAm3GJSD6Yxclh07zXe7/+StpJ5yVAiEA7jKDYwsIN3MYuzXB+eH+k26klvoUXH8sLxdFNAykPsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDRACRA9TVsSAnZWagAAvbcP/1zB5PypjQwEEBynErNE\nXru9oFcyB4LdMABmEpRYXOYHwFZcd4hfuZqxpT9cNqJ23BtKhc6FD7KEU5gm\n+4fClGLb8VUPPJxCewSZY0Z5rq2x883bBf/54C6/o2fySjE3qaHlP0LXNTLH\nkWiriWjYBD6qMCNnvaMs3GaQK2ONsxN0bS6/f3DE2Jn3HwMsasgxlT7p6E3C\npQ+vKh+l89klEP8Xt9O9bW61a5W0N8xN19UbC91vAXt5DwVR21TPPIvMuv0E\n6UynwEmfcsWei6NnYo7ktJvb2uxL9jCA4lI1nSX3x7DAdeVpId1F1JHdk/Il\n/qwosiZ2mxXsgjxr+yLtkjsGgkx7JNzAhwZ5k/56lCNGkiPzU5nKO6AxsQuN\nShnDWT5+Sip9Y8RzfdYHKBt/i/MHvfpo/QK0etP0CR4a/VBKijUknWq3rMwG\n/I9LC6zXE60MLNu+2ssjSihlEaaYijN2ECvqrvtLypi4GcxEgDeQc2v5npac\n5C7xHUKm36p5DNwzG4gjjdXMXHUECy8fVy4Lu8wHipQdZ8MJGyq9p1FgJ70+\nHml7K/PNjND7Sreq2P9jpFvvW/VIAforA+a6GhItAwkG9dvXVv1tc89G1k/A\n/N0r7nDEBZv3byFSmxoGrtBjCkairxqGWvbCS8xrX/XnFRRIniimiRcAmD2R\nZ7zq\r\n=Xf9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.d4f69a27"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d4f69a27_1545090112293_0.8383206355251585","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2a13841b":{"name":"primer-popover","version":"0.2.0-alpha.2a13841b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2a13841b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f07f7a68dd4ed3d2cbc58143a96fb04d06410715","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2a13841b.tgz","fileCount":9,"integrity":"sha512-TGEtJ30T5evG2CQ5qZrrNaLpj52Cr64i6Y0H0N1EqTxxVcjYXMgW0WfMLk3S13CW/LcVubpMISnDgFqtDGsy6g==","signatures":[{"sig":"MEQCICjuuobb0Ghqk+i45y+etMhao3LUAM15+HrbTiFO+VX4AiBHQ1pmvbYLIvipM+o+7BF5Ri+TALBOx6NT+NHmqznsbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDm+CRA9TVsSAnZWagAAPWEQAJeca0Aa9tbRfbxLIALQ\n791qlebVuZ/0XGKnKF4NYk8w6r/Ko7JlLfDrFhDrrsVKTUG63eJLcMYalqOn\njjGkMubXOJ0vIRpAlsKEPLDh3qv/XRRqdtwQksnDSAT9uMvvLIwGbpCYWtc/\nRRs0ILTuZ+8a8Yncav0GBOWS1j2lGWPzm0HFI4bVW7p0eykNpl5xTuJa9UQE\nh7k9W6F0XhosdHiT8vAbNa+SfLN7oATMvLFThyqBYI6Zmo0AtrX7BE8Moau3\nIY28KLSk2HwPz4JlEp9RljRF72V8JnIG35o1QB0FCCO6D+R5QOqtwuWJXfQx\nknbzSLD2fJQHZGLgtN9UZstG5AHvR5hK8rUBBf3+ZI1d2CBeVLZF6evcCc1a\nNK8m2m2GVEbhwCDYqQa0k+YBmGT6jdu/tiZtYSByiwREML5ahLXxmp3rTWlG\nmSP43VMlvfv0LHjE39Yl1ecNaI0iH7pqaXJXg/2jLVjrDzUQw9EgUZIHMsXF\n0dsiW2/2YTEOPDXG5YNbOkvI4cc1eP8jTSRmN6VORecF4mawU8aOZ1vSUXR2\ngKesJ+HuklG+GmH1p+tno7jy/538AOZ+76zp4//GW6TTE5d4e63aJZ+GFJQr\nEIht0NMq0Vw8bTmc4nlhh6Pw1nLGRvZ2aOU2FNKurK7tq+1AYfXlgRWdqh06\nq14D\r\n=8wBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.2a13841b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2a13841b_1545091517949_0.9546943456680912","host":"s3://npm-registry-packages"}},"0.2.0-alpha.45c8cf83":{"name":"primer-popover","version":"0.2.0-alpha.45c8cf83","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.45c8cf83","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aa9853136c24c79100794d6c48411a192e9f2191","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.45c8cf83.tgz","fileCount":9,"integrity":"sha512-rbGcIQ6HVE5bfWb+C8PKgVHSlgEMU6lxvEkDYZjXz0pNGeNtl3gPL+z6xIvIRVpfvW+E8UBwB/MICLb0MC8lfA==","signatures":[{"sig":"MEYCIQD9Wki2GbYhUyizhaqL4kOjggqwjVf6rKcaSWZbiWegrAIhAMYt8lgkHU+HiVFjyTis3dYR3AW2Du42RxO+iaJTPJsF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDtFCRA9TVsSAnZWagAAp9UP+QEooUbCq8SRxpWg0SmN\nsR5YV3IVNGjW07U8liByb+pe+9dbqOOcTq/13h0UywpEZ6f9RDsflN7KpuS4\nRUO1HCCO/ODRgTob8+BM0rk7zjZmK88sFVdw3E7ZbBZHps6rZq2tnPdOUzOC\nX3vfySrhWj4K4s/12p3x4HWoRyT0Ti1mAAijUqbuhZW3PyEjDeiSWDa4S1EU\n/IBF2qy2l/QLr3YB7ROpISF1PdorFQQ1z5OaFvPHWYBCwG/AVAh4hIV2K0Od\ny5yZu9qnHzeQZaWH9pOKDokjrvPXFRjbIgAcdyTCc0cRfUw24JpX0AjUQpdo\nKWL9b96UfO2QLvURAERZs8hTv4AcTCTbk7CPQxqHEEjfnT8/GrvPeAd722dM\nNEeXlwOjCsuYHeVFBUf2KMxMdDCFV1eXSZ5tQFVxNv4T53VzCDvplGW1CbQD\nAZt5xwEYBLyHJGrTtl5p1cTHfC6hMZMzD5e9wDWYi99yZBJqJPDcKgRnZ1WW\nmPa1WvVtGKLqDVcPez3yE3SILcdbGT78oyUuGbmhSGXWaQrkg+KQ2UdhsB/0\nYKgt3NUpHsa2Pg5k8R3bXRu5WKR9PhlLJKkgk8q8PO46rGGBthYLMfo/Z++A\nmINr8qW8vleY6zP1aUizsJpYvO/JEnrJxJAV3xBb/Rpm3OTBQjIUJmEY0eDe\nCZ9d\r\n=m/D0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.45c8cf83"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.45c8cf83_1545091908512_0.11626407834347852","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8432e534":{"name":"primer-popover","version":"0.2.0-alpha.8432e534","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8432e534","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ededc5b48aa7d681f90655e8c67e88a20ba3a155","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8432e534.tgz","fileCount":9,"integrity":"sha512-/NyiFDPZOBRXLhljRMU4gUpr5XNT8NeIR5Bf2mv7aoNIsFAmbbTXnB6sMNRuiVQavKBklS9D50YbihDQNHlZtw==","signatures":[{"sig":"MEUCIFhYBVJ/2YO4MhO5Ds+mjm1JwodvMnJYT8gnPfCSKcsuAiEA65kPpzVkqDsYeDBOnyWypdIl706/w/rvfJ7IDBM0yIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGD0bCRA9TVsSAnZWagAA7GEP/2F99udwOyk4C6Cart5B\nrhEnRrA3iD5GLZw9CXHTns3EZSL3Y3W3ZWbtXr4LprShmAxX7CnnkTV45rtV\n3qb3N3Fk5QxOHAman5tnGXn7XHv66RiXcLOUvGcTkWGy/OSgrlgXdXknjXA/\nwIzwabsZDKgGWplZUZi1eD5ayGmy9AT+XFne0Sidgd+xhzDG9NaNFzAv6cdO\n5tPIxDNNabM82WXjK7wIx6mOrKI3SjJBODL0Li8p/bCYpyoe/utmE0c/kO+l\n5k52hdJWpq1XSLXOJ0T0FP1LL4zJxrK8McvAOt8rHAKpqDesTNJB+V1HmV5Y\nx2hyp1PUyNowgwosT231S//28/CExD51H/WGPNyL4V7dS6Z6be3bXoWaubOR\nPdHfobIHuRCG3wxru/e8+ndfHNJ/L0nHoo9ualPpmFvNIm1zaQJGuJPYuYHe\nMpwI3CaUb0vShcwaqE/Cv50QGCnjkUQe9vZK/NeXf/hdgVny5qoVTr0hftMe\nVSiEPhX30NqGGdVcEONLqK6oMYZWmc84Ar2v3AdSo9lwTmnArnIdCzfFA4la\n5p5UZ3td2Ke1GnFKJVQT97CyYlL9HRGwaC2PUNZ2ngc0jomDd/NO1p+Tvzig\nRtjzckHbZqKdzsKvjnV2u2qg5TX2R8wDX7KbeTzhpym4FaIE4nRjUqlTnCLc\nKvXU\r\n=ed1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.8432e534"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8432e534_1545092378665_0.632628632966721","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7a76b326":{"name":"primer-popover","version":"0.2.0-alpha.7a76b326","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7a76b326","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b8d7fa4e709f8e4d5af637995d78b423abc575c5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7a76b326.tgz","fileCount":9,"integrity":"sha512-RH+9L34DvJ262fl3HCTL11oAyn/wjhFp/KQtWhH+g/3tWmWZF8jC3lny2q5zd8BsGRK34Gdz5EbttGQaaHfKxQ==","signatures":[{"sig":"MEUCIDdX5+H4E5EUQNKaiSFVgErVX8ye4/8TuYToxQtyl+xmAiEA6H1fEFqzhj5Z0r/rNcyerj31hoA4mB3b+tmtxSeREBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGdWACRA9TVsSAnZWagAAe5sP/A/mOn65wx4MetvEaCct\n1inUB/3zAewvQx/St7u08J0B2euE13BMM9Dckv0T5yrT1qvz0XQq+B3rsOEZ\nOdaA76aLrZkb8dum+G1OcY9w4RdEslkChwcdbgmyqS132UqulpAKzXHDdG1v\nO+3tgJLguLVlgiYFtVm5n73N58zGwSgUcxPhoLIKdxbwCHYwpdA64Am+GDGq\n1R9bF8Odn1CMM/J1zfhmhEFEQRWAPOxhVcdnzoeHUuYuyiY+XVPH+yIza6DI\noy9GSNowwZfWxXr51b/l/6XZPpJK7iu/SIAeSwenoLIN0DN4ps4hH0tR28+R\nSa+pgG8biri3Z1ZUnzR6Bnx3OR+qBu3669Cw54zxAJNIbH9GvjxTVE6j59Dt\njphE6Ha3Pd6HtAkCpJR5jE7wegi3CDnWu7ADMoPX8aYvcAgu24Su1ZFjn6fd\nY9BtQJciU/fv4w4B0kLvZSTvtfyeaP5/DbWhybI2KtD0ikzSUPyxtpN3G36s\ned65yAuVkfGXfn/mNj6QoDuzovDp6UTFxXEjLzGa9WJkUcK6Ww7c2ZqODLj8\n8YQCM3mzeb5fvN3UffG2uTtC9HA0LvLpWy0UzaEGf2U9fTMHMBZzsHDbcf8H\npw15zYLDN2SCZBmJrlpHqha+pad1sVnMxgdNXzJlU0qhE+yot2rLPYKb3Icr\nUjev\r\n=5AL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.7a76b326"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7a76b326_1545196928050_0.8329004310147654","host":"s3://npm-registry-packages"}},"0.2.0-alpha.52d5b327":{"name":"primer-popover","version":"0.2.0-alpha.52d5b327","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.52d5b327","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e5445c169e0d9b6b6629134bc49924c06320f390","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.52d5b327.tgz","fileCount":9,"integrity":"sha512-l99A2bkElfpBHrv5zp920C2G/WmHp2Vk/UIh6Mq04yquqkjNAiiiKtaQ1lTgNtbxs5EcQckjVr2R+rqhEmorQQ==","signatures":[{"sig":"MEUCIQDoJrT21NGpLQ0a+l0gO2t3Vn4EmdpaTe7BINEQkZ+vjQIgfp0yvo/KFsgGGJPFqf3ys5yzebAkHJVq/Zy/0ba897M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcG+/6CRA9TVsSAnZWagAANAIQAIQCg9EjgyirOrCCOv73\nWSns86eNjqcTV2a00l9Pk4mjVkomyyDWfqM5EEEPHsofNMHJ4/ZqELmwd5aM\nWLSCWpInYLuuBF402FZU4C2hiAV9F2nAwFy8sOY9llkbg4ZWHVzhU7Tieufy\nrepamB6Xbo/att8vf8tTsWkDj5/lFur0OeYGbLmul0J/54UEl2QA+aV6Y/Ph\n/DZVFwY5TKMrI9MsXHMyek4/xPSeWTU0SgaWKYmRNEwpkrJjRLFjskg/ZD8i\n3Ee6tHSwdjJmFiCYk6EcJeDyRHbSsM9h4vZSmLKldyD7r8pXu+BKT4k64mzK\nEixsnKaZKESmOMwMpjHlfvz75DpBs6VgJWelfl6u4n6HkL57TS/yTcZU+xXm\nfIYYJIdfUqjbO2AptJBI2dcd5+30RtyWhABRinHoT1tpAmU/RgA7WRqywlEU\ndeWb2vCRq1bklh7W8PZdIerEmVqNhq86bClPiMLGqrh0Ap4/mIbksy2NgNeA\nSMNuW0RUgHIXIz8uDUZNzdp+agLBKFeqXOo+JukuoP6Z6M2hHzGMOMzQgLHC\neKKXeY2c4ZFAdMz0NN5qx5J1C99qMEwIoTzvgBvK74QlNlviMgRnPBydN1e0\nKbzqscoYBEyzlhPCZqZnIvM1jW8HDkLDBbl5uMA/0hSHpU9uT7nhHBkKL/Iu\nUIXd\r\n=3zWb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.52d5b327"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.52d5b327_1545334777850_0.39932502107155066","host":"s3://npm-registry-packages"}},"0.2.0-alpha.af57a500":{"name":"primer-popover","version":"0.2.0-alpha.af57a500","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.af57a500","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ee2c88aa1f2ccd2ef92c2bbb15200a60020eb746","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.af57a500.tgz","fileCount":9,"integrity":"sha512-QeY/KQwsyGvF8z/18gx3EUVGjkavX7zI1Q5wP39TxPhmA9hAsP/1iHv3wJQNFwMwNoGq+LbTTEwqUdYww9v8HQ==","signatures":[{"sig":"MEYCIQC5DmAmdmELumTk3uJIiyy3JyNHR5fYQUhWavyHHt7v4AIhAJOVd9ONyl7Yvlp45Wbb1BKcDrK4IjdgjYxStnTwONAz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBiSCRA9TVsSAnZWagAAM4YP/A7AwmuYbdCFr11Xk9Wk\ngR/yvE4BWlA2sGKpo98+FxBUtprxo7wym8ZUgBFwLi6yawgA25qaz4VoEOPT\nKWbOsJspebx0CNhq4F8gx5ma11YnhwmvOtOE2RtkDTm5npAo2EI3WhXx6099\nV24ObWC982kVn7xmS+8/FF3meJjJd58AytnJ3/K05Gnv6nlbr2RigQc+j35o\nsR5NLGspiBr1sBH33u/JUJ4OMLHHe3R6nRwUii8UzSmT4dtGhHpwjYhfWOiD\npm9erWKscget9XUm+z9VdQyUd0UlAELfQb+e1gsJtlLFN8LMQF5PKChPf0DD\nvT0tVLtan2YyhW3OZ+v/u1pZV1KA0/ftim9rTK7MD6vtCp5mlI2JRPo6mmFA\necdCAdGJ8AISJ83V1DKhbxj/9v4y5PtBgW4CqsBjIxg+kJhIYuTRTKmSc4OS\nBWMZOzYMb8jro/5t4cDLjAO9HtwuDVm7XvEhTlQI2CY+v9SS9Z3oX8gc1dze\n4zKl/Nra5YSP4NkGN/wg3I3leVVs1N0+oPbvh2GW3mVCXsTUavvzbPCXcqXP\nirzoZL01w7bL5sKaEL8+v7+8Fvx2M7ice5rnmydAaHBQQaLEC6n6Di6C6aF4\n3cwQdEngg+GmKL9dOiYR30zxpTLU3mkkEjOSwZQHECkMeX7CZmjR0XHysnDE\n2SLV\r\n=KPV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.af57a500"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.af57a500_1545345169611_0.8194537917625779","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4dab7fdf":{"name":"primer-popover","version":"0.2.0-alpha.4dab7fdf","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4dab7fdf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"14f7086f9c9d442df6fe2c348bcf50423bc74997","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4dab7fdf.tgz","fileCount":9,"integrity":"sha512-Rk7lEJnb2haDFiKn7ux+6InaCk6X2ShOx0jPhiDD9DKnXq1T51awmlf1tyssHlwiz+Z5lzqyYipVjSTbkofzFA==","signatures":[{"sig":"MEYCIQD8pZz0TVh60npXo0Jh9iVeBu7h5KByw1CjnIsCGqmmuwIhAP+5168+YK2jsbVGbr6MDO5riHm32x1KPWk7Ea4VQMBA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBoECRA9TVsSAnZWagAAHwsP/R/rvUTG00GB0Uk9FP8h\nco0Fs960REVjs/ODIcL9EqARTIXJepM31+fpljLQPMTiH8aIZtpMTUFAIBxF\n0d7yoxPfe2nSg9uU2vpG6pVGq34ttcvFnG4V1LNW300Im+EkskwKBo5KQgu3\nDQoDyx9s0O5UPUxuwUL5KuMJXaBnR+xSfcauyTxaEurm9Sd7fwfLx1SJWU99\nMWgSc7Z2sNIRrlOPbObaUuXwGOP8NFA2yc/KkU6vu+qC96aXIDMDi8nx+VAi\nUEvytHU1JDKu9lkYPp/bMeyV3Hl1jXECmRnXWE4nnJEsjYpDEqiKOTW7nk8y\ndmue5YSz1RVgLbKwIXlWLTKFLxuaxVM13WMOsm+wEIx4CMg9Z0+0/AtEUdjy\nbbEMcVIKEbCA974yiYLNt+0G5wAL+wwyI0Y5G5JPF4g+r5WpkEUjmQGXAFep\nKnX51F02G6a5A+3a0e4VJQNX1/NGod8PzgtEgP3w6UVM1g6bH1E9XoOiwUUe\nYPtHsPRuQpVQCnN0/vJjwVBSjmsVnaZfx87/aOTNZo+LNjjeTaNMcDlXtOmo\nUpg+dZFOEe4DVKaBV5Z6c10/xdXs0zI6roAvoPp6vFBo5VR7864iwFHMy9gu\nkx7WuIP0Uuw/6hrNtfOFj9yJh7tXIPo7Ckg/2hKTpH7CDyD5yrauml7BY1x7\nD/u1\r\n=THq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.4dab7fdf"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4dab7fdf_1545345539798_0.6322309929668466","host":"s3://npm-registry-packages"}},"0.2.0-alpha.47ed2750":{"name":"primer-popover","version":"0.2.0-alpha.47ed2750","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.47ed2750","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1bc5ee283c5d6a749609c13d92ab2c5e7811d16c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.47ed2750.tgz","fileCount":9,"integrity":"sha512-qOHEYF45rCcVPY5KYf6tWS9E/htLTCHNXwKE/bIo7GjU+tow2JqWoX2dSE+0691raDcuKhBuqWRtqw0REJBe2g==","signatures":[{"sig":"MEYCIQC5GfNgL6O4HkXjeGfXJshxVfFA52GLnQomjtm9RHWCTQIhANnTCL4ZmpJbHP/wRDa1teYgTOduqV6sZiCkEquiAMng","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBy/CRA9TVsSAnZWagAAyxAQAJROO4f3z+0vDC26S82n\nXkYAn1eOGI+BVCabiQH87cshLW8BHpjtzRSUhDCmOaRhIAGGUFWMnITc9Q8K\n0ZbzW8j+LSS4hcnNTDspOJa0e/ot9fTJhayr8SUzbx3SmGkSTWCytQVQtX46\nW8rPu6I9g7K2KMKB/+ztSRgniSvOlXPCoggM0Q/Hu3CGKzg6x/tdiu62payM\n01WolBcxvZF2TGqIXzELVSMCO2NSqBUg29JBT45GX5y07Txh2XllP2346MjB\nzfe/DPZdZWLZLk+YMtFG+EM5BA9FBkzLWezE/VGqNXfw9eB6GfsUzNn+SVAV\n5Bj4yar8LBu6H7gd1Wrgcf16ci2pVJiXK0og2PkAQxbzXHcgBqKzQJo8Pdcu\nR6uXzKE9gmSkr0w96c89Gi2arPfaO0aQAVRBUmq2uI/DiH/LXVJVMldcJuxM\nprg68xIXgtnMeH7EV7MFIT4RKZzGsdX4226mDpTUi7R3GwkjPQ0FxUmpKB5m\nfq9QEuqiQIesvFfa3l3xB0ulciqRexoksOq5eNRR+PctXiVhMDlSt+YNfGMp\nz1PKKAVbm+bmzWvMhYu+5aVy9zlktNY+LeGujJS3AaBvTl0bMr0Kw0Z3eSKp\npa57lwv9fEdIp0iA/QaDwNJYs0dXVI68LId/br2YdCm/qU8Rky+jdnyEGGYg\npTlZ\r\n=T8Kc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.47ed2750"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.47ed2750_1545346238984_0.10353544940575232","host":"s3://npm-registry-packages"}},"0.2.0-alpha.82bac610":{"name":"primer-popover","version":"0.2.0-alpha.82bac610","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.82bac610","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa4292aa4275e56fbc0ad72c9063e94fc68ba723","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.82bac610.tgz","fileCount":9,"integrity":"sha512-MH4KvTUdjPdM9IP0D2QCyOStnPl7wNCeK027L8J9C+Qv6B39OFAN2YUedtXD7bX7i3RXr3DGoXoCBQvZQ7/KbA==","signatures":[{"sig":"MEQCIGgTkEng4MRmEn/zX8S2q9I2sdh/TwsYgfA9p/ZgG2hUAiAb5se1eQa9u2mul3OW6xjX4Ko9oeAXdHy8lRzxlBAXtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHCAkCRA9TVsSAnZWagAAYJUP/ih5QEi/AFOHy4ZD0mu6\n+sYOrAn24PAutUNm/taX2H+RjLdIbjdlpnusmzB6xT/SgAjJjS3KKAbHKpGf\nWqLcbrLiZujelqnhHPfSyd2Slx9amKSkBr5vIaOx76LfhQy3xjIvIJN9P962\ngIlGfQQ2oVqAiCu+ppCZBl05M/FU2+THI3zrTSbASg9JjZEItrrZNOXMXbyz\n58z+82b6NZL98MCwSMn6p6lZT2Rf0kUN+pDddIpaF0jVwBsKBDmW8SOoYOve\n2WU4hXb+Yrjr0zU5SOTO3F3u/czwiLRafEz61MAEMiWUMHfgcs6bj23rYBWg\n0ThCHrsAaOVbSd5rzbFn57WBsc/rmxfEE3xIgsXmxIdc3cPrUQsy9F1+qwjE\nPUMDOEDyvHH4zrq+0FYlnhrF7WsU3ipzvjC6dAAUbZsDlgOnqIHXw2ppdJ8p\nCuKgxG0IKqtt7yp6sM9dna8Bk9Qpy5QzBvXCJq97l65PGlReJXDcjApzIptk\nUMuip9A801taWDAKjGUWSM0trwnTD29mtCo5MIjVlnpjTk6eND8h0/qRDsQO\nh/ineXmGno9mi0vltdZ5W7SCprCa1H0ar1x8pzKu/2KuF60eVQ+owOPUuyJo\n4DST51MZbF6LQ8q2aQQ5IPFpWQmhdft3eTJmmRGSvctEDRUI4JJ1+ONZq41S\nzS8k\r\n=YGKF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.82bac610"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.82bac610_1545347107451_0.20669909896171523","host":"s3://npm-registry-packages"}},"0.2.0-alpha.15a93353":{"name":"primer-popover","version":"0.2.0-alpha.15a93353","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.15a93353","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"15843c0971020a66b7117c9a32aa598b29cf8a60","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.15a93353.tgz","fileCount":9,"integrity":"sha512-+dDLRAGqxtam3bylclzcg1V+dI3OnFlTpi7Y8C6+2I0tGqOa9tmwDaueO3Yh+m0luRmTWgKXmGpaTBGr9kmtqA==","signatures":[{"sig":"MEUCIQDaXxMdzrQ8wrxVPqjHVZCTfWXzDxUaxB/q9HstfOn9nQIgSROQnFnpslFSaU417wm9kblysiZbFcut0PdKqHA95nQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHCJ1CRA9TVsSAnZWagAANF8P/0wcursuzEgfz01bVyQE\nI+d1g54/f0WAHiN68rpbXc41Niipf1pbUpRZhcPhh6aFi3fZMGj0lNRqjElT\nkVrISEp8vyMqBt2jp7gCF8IrXRiCWQzIoCXslcnwo5e6ZqoyIeNQP1CuVRk1\nXFaeyTU3zNg0t80TwAFlcJY9KmzgsFjbw9/GpKGxplFEZQXlBByDZwjWa9Qs\n3H4V5apCH2WKXZOAkT7LkDByfnPWq69Hm6CaqNZ8ywbW1VTSqivQ94i7GhNe\n6q5f7/VCCfA+1vdORkj+Dd8MB8V4QzptCPQBcVlDUwr1sUFpD/mZnKPbiUeH\n4uHohskIiqu5+/+RJck8pNOmppo+CnzcuciQ4mxcymcsWKdKfSaBUIBp7C7j\np8zfNnyXhI+Qf/y3Sc8KXOkac10XOqt5Bw39MT6wVF74FY5uO2TN6xWzI5Zk\nu8XB7WsHAnQGVDdqOSrZV0KWveikO2vMpwobiNxnodXEdUpBfsh9oqgSqIsV\nl6qiSCgjNlLE2vwQs4ArN3ssMBpqA9B2K+I1IFVzIDtMa5FpO7GSNrvsMs7+\ntg+5LOdfc3X/vgMy1ALjq/uqMqTF5ikZWXLh4vE0Z/wgYl5CyQiOmrdU1vrI\nkvmteacJyoKuCfv4xtiVy4t3UpWDuyo00xMyyzVLWiEzPW60iGrO6oo9kxYY\nMPFU\r\n=ekSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.15a93353"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.15a93353_1545347700081_0.2928622759519286","host":"s3://npm-registry-packages"}},"0.2.0-alpha.50e7198e":{"name":"primer-popover","version":"0.2.0-alpha.50e7198e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.50e7198e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0b3564f94c4a9b4be8109897b649580da0c38110","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.50e7198e.tgz","fileCount":9,"integrity":"sha512-gMaGBN0IZdYmcwFfPOObe5OEn+KK0uYI5ZzJ1PD5ykfJSiEogXCUmUUTI8dL7ZSb8nRaegOAT9Pvy1zwzrY0dA==","signatures":[{"sig":"MEUCIFwYBcCrxNHVuSPsbyDhMeoGEadRVFgAjkQzVM2tRKVoAiEAlV6zfAa+WFxcNdmWUszyiok8LuYSuZABWln3DVN4gAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHT08CRA9TVsSAnZWagAADFEP/2jlgWJ7e5eAqXdIi439\nPZVOExavTacT1dawy8vZiiESTGNV6NO+SsXttsa5AnHNDD1mosm0FIexKevm\nq7TXBncxOzVs9dcPh7yaAvxE66/EwV+7jpVOtYs6hZphDzNra3bNY93Loknq\nl9tVrg6eUI/QEID82jCxSIhSv7cjUT5rVLO5BcbIqCnblTuJnBKTvTHEVWQp\nveJhDChfmrUO8OSl1PrMrNCY5+GiP5C/8r4spyDHWGZu2CHpqEQW+GJ7D8GE\nzFUBBlw2xZV7RTJbsQbnT+uNSQOw3OCoLj7QBfJX3RkUDE30ZThv2RwJYGNp\nehTOqgCaZg+RdIJ0tgsI1NLaLb+KadBuY5IrjhL9pd43vlkkM5CwLFNaWmZ+\nc9Ti3yifxD8hcmHFTJNoMusKG/N8305934puWOHnCu3R+5/p09Gx49fbglLo\nfgGZzSL7Ek/NUF5HArzckUGvHnybsOjF1yqjYbu/ybvWuAYsxFgnHCSZWalX\n+OVJhaLoL7fDilc85SAOVJaSvQhoqK3OU7egH/qnjsteI6sO+9dzzJESKm40\nyBG8qysDSnSTWGOvDX88cgIEpswFn43fUbFSpJGOTnybAkw2ioiU4ENCnQGw\n30k8FKkw+lp1sQBA6lcC8DCHn/zUwzCU4cXzibmje4KHJrO+CpERLZFL/dTO\nXGpH\r\n=R5/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.50e7198e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.50e7198e_1545420091966_0.6214510596389642","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6c54e75d":{"name":"primer-popover","version":"0.2.0-alpha.6c54e75d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6c54e75d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c181e19a295ec10c9a8cc89c8dd3894f1f433123","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6c54e75d.tgz","fileCount":9,"integrity":"sha512-18pQbF3aBSgYJ65hJaM1rOYsNwXb7YX7KCaIRf68I8GVPBqLd8AxHrPFEoyb39Qivy9wySGleEVy4bMEtklcJQ==","signatures":[{"sig":"MEUCIHlHLrVJEAT8I0TBGHHJoVc4cYvpF7QZLGmnN1mG3dswAiEAxZWid1kr+QUjOgTM9CdLxvqoqEd64KsbY5GX6qJnI+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHUvuCRA9TVsSAnZWagAAqpMP/RsR5nqakCx96HfuQJnX\nqPREjgNQ5E/g9s2BK0XMn87AUdc1c8EqRrgXqe1knyRy3dzqWgshg6wb5xy1\ng3MqShvnZac9yF/PDIAQ61JWPL4iGP2ssq/CYHWg0W9fzCeKZO8AivkEYc18\nT0zmTWKLXygjPn5mF+pESBDGUV1rUierGCQffM4Dt5nszcVKTOSmqnlMETR8\nZmn9s+H+PVhyNGDqKEZ+WNu83h9Ll1Oi2vF43Lxf3xZK7uTuKf7SJxQJ4Qz2\njEki9erhPb/TCFcftWsazwxwJ91t/bUcK0OCFm49+JR3mAUvphWOGMuGE/XU\nAZ54iNGpsOxmdTzNYJHb+hs9pO/5IaVTnl15Yq9KbD8aTpB3+SoWTzV1IOv4\nm2+HZ5p08LCw0KVKgcSB84ci201JNkKQvMSa4n9J5zKSBeEqA6OXB0YGGKeM\nL0jvJXY4SfpbrlY7tIzpFTIASXaaG5OY8wlV9tTg+z2umwZVM8npqMV/eaIk\n0PRCAJTZsFS0eXFUomoEgRtMgsdGPqNGj18FJgeKBYGMECI/LDhgNggLQNUX\nFq3U4Er2MBorBTskqSI/cudPc3rT6kXvxBz1Gmv0x1Oy20+Gp8k0eofwsDJ2\nxYpetsdXYBr4wsebH4shRvp6liow8N8mbrExOY2YeSLybrwEL7s4HnbSncY9\nzUEb\r\n=7NSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.6c54e75d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6c54e75d_1545423853582_0.6658865664077822","host":"s3://npm-registry-packages"}},"0.1.6-rc.5":{"name":"primer-popover","version":"0.1.6-rc.5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f397f8bb6caee7122f54d9a9cbd05f2b8d972da7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.5.tgz","fileCount":9,"integrity":"sha512-PV+yTWvAMH8BipKPkCUIkHG35H+tFoiGbqXKwuIH61wvL6kfCvECEhjpN6HAEBQXl7UfTGDVzXfX0zBY78vw/w==","signatures":[{"sig":"MEYCIQDGU5PONePyfngWhIWA9gH9Hg9Cju6Wic0okq+WrbshQgIhALjAFnsV6XhrImWtfEd5bUlkTPKtfoSpSovGE00Oafnn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHWvpCRA9TVsSAnZWagAAnvcP/ij54D5QZ1quUdbycacC\ndzbo8tudEo1W352sMlkPyOLUdsAP73tyuaO0byVgwHrFSaz7HC6xA7Posmkf\n0nOnPKvhYsKzP4CxeVodN1LNzwuEldd8i/LvWfeXVTEHO6+/P/XowABDaQzy\nKPyTyLG5GNywrVwHbbe0el9Nj+P5ZLYD4jbMx/PhiZl6Rf2mWQY+WKZf8o1I\neV6JMxLyEkJJJKQcMIacYDlrCCH6V47LMJN00V4CtB35D7x7WZWqOdtTN+ku\nxe3OpU63KjOJen1PdMWAb9y8uSU8cAa//ksO8a+2nKeNWw6PbCmwC/MLLAxh\nNXLjvF1ebK2YRhB6QtF+QC8rcnT77KLjrte2dBznbrxPCcIV5Z8Ak1x135nJ\nlDX1ljCqsYtW9zc5Sh+zAHRBPbJiCZ6ZCqvJkWNj9LGNjnIWu2UKXYJ/35qE\ndiHBdM908v3lVUqwdVW6HopIM0ja+vj1x/UxgXO4HTnPTKXjHZrFNu6hGetv\nZl1oFqUtDMJ0THB+yBgLMnBAnCL/7n6x8w0FXQFeE+ZJjAN4iDNicWoK4BFc\nATNxIhH95TuPvnX2N9B/UoOe5K8tAobvqWu5JFKOA0uvKZL89we/7SXSo4y2\nS0YH5p/hwj9tkveWnhsHdWFqqX946Xkdcxeph5HqJNgB3nzsmHIVYdVuM5fE\nL+hX\r\n=Z1zT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.0-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.5_1545432033497_0.6488421729476153","host":"s3://npm-registry-packages"}},"0.1.6-rc.6":{"name":"primer-popover","version":"0.1.6-rc.6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.6-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6323c9532e43d39928d3c7aba07470092aae6119","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.6-rc.6.tgz","fileCount":9,"integrity":"sha512-3PeZf4ddz7AwZhA/uOoch5WN9PRE27+/0uilKGtTuH7WvRrGOiYcuarqBlzw+/b2u/yYMc+iQldEPZwE89VtiA==","signatures":[{"sig":"MEQCIEjX1BQYH5zPRupjNoO5a0qVHYduIyp8SOfARXxGBJURAiBsKjqvW5QySpRvrqi+F5zt350eQD7tsfQMygVcQy+zAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHW1KCRA9TVsSAnZWagAANUQP/2Udols/xw0wnibqiZXC\npEJ0SZOj9fEoxrdLGSvCF8qpH1Iuqc1TvDRjLYIEAsvgBuK2NtP/MgwTeZuD\n7hIXIoEMPCQaW4Np8KQDLy+cWByUrL5v8NWV4F2K8PpJsA9Zvcv6rynw4JcZ\nK39hvW1b8R+31ajy1ziQ8jVsjgPnkOdRilgYzDSTbmO01/5wS5LJDNaZuUL5\nvNxdoHQu1bSmli3JDCeKH3VOmpAIKSBVnO3jvJm6FnxpjWTesVq8gAzAc328\nE8LOMoCUjOjFZQytOUh9PT5bPeXUbjE5gLCBtyi2NMKYvCJERA5B9z3Ft9Jk\n98sjE2acTO2guOz1Zhd1fI/d5BUIxgTKHs/goJ3a9z8Z5ZcETJ06J0neG+q1\npoBl9gxXsDyXPobXSmO45zYuWEYis0v5qhCDArHA/a6hu0yzi18GW+PnoLXo\nfWwiGUlPNodYKzVLZ6j2j++iQIKF8QnNmHLtF8wAtYmH9INDGbY+s4jlE8nd\nJX8oWCC1NQSBhcoVT6bnTjhxDL7EZUA+h5y+ac2Sal0LmGeTh9B/aWuLQK4E\nrV4X1GSbMBx5pez9MM18opRku0fVCoM6U+Cz25dpwyPF1mnVDo9tgyyKM37B\nEaKS1972JMIQMOOb68h+uGsJahtNIp96rHe2wnxcRW3b35VCCxE8YWOPAggp\n1gEy\r\n=nb0N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.0-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.6-rc.6_1545432387058_0.44068801065229257","host":"s3://npm-registry-packages"}},"0.1.7-rc.0":{"name":"primer-popover","version":"0.1.7-rc.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.7-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1df72dcb212ac98347ac11ba2c5ec79c5acbce6d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.7-rc.0.tgz","fileCount":9,"integrity":"sha512-3n3jAbe0QaccY0tsOKNk2dXmihtRcZWk+RKbuB5aZBaENpQm8ofVSVeLMpqc42VJInStD10x8M3JYUgn0Jcx1w==","signatures":[{"sig":"MEYCIQDh5K5lcf43t0QNZJn2EdXYWYHxf+RBYE6dQPAoryqmEgIhAL54Mz2HfIWwmyBV12Z/VvmPcOO0sNblCQGUEoVQdQNG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHXBECRA9TVsSAnZWagAAkXgQAITyIXZbYO9SxSJ5tb2a\n1qyUww9RgnyuDZvBH9s5KPaCm29IehVRE1MssQeTOlQeKce2gwsv/ExsvpgR\nSEypUfgZHRMayalpzrewZvxeGUfv9TO3vKgyyWHKg5BWUrSoHLc9Hr4UCsVN\n9EtNat/FusUtbt5Npzx2LURe7iT4LpdDMkAseakJHkRPAXJp7GHQCW3u0yOV\nvqfHxAM+azzowTKHZUFW1Oa6rpz2ABH0rzgA0nd9faCTTdasGdYWAzJfYvgR\nDlQwqKo/7aSpmzDf4HxueZ3v/cPqqcs3jUSvrHKPw6GcSEz2d/WizsixiK49\nBev/H6cJj2JpDv+PnPxXtyN22KlVgO/1c+XpXS85t00GUL/oUXmipav7VTYI\n7VamvRsQikOpE1G+ZIdcI/kT7O/bNKCP0zIWZknvt6Puj2jOopRBSHxv6cgC\n/rJdrJKOzvtTVr92hAQPN6TvAY/EpGrh5/CDIg9UB8GhwqV9vM8iCPQxvwpq\nSAEqiVr7PrnQRrjFMmfPjGhGDdsZlyOedc89VnIrV55skD/UhbL46t/AgW6k\nktKVDsl8klJAzNwpSGY4m/3WLEhAkuTF9aaCxQilr+CjUt3NLErOkslvVPBr\nsFslp7vB2zg8ytGR4AkOo/GuKCiU0Bd4HhffhPvYQf31ENUndGJDxffY5opr\ndnMj\r\n=7/45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.1-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.7-rc.0_1545433155186_0.6718938293910297","host":"s3://npm-registry-packages"}},"0.1.7-rc.1":{"name":"primer-popover","version":"0.1.7-rc.1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.7-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"698fca04b3e5aa759b960892e920e8a9a855538b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.7-rc.1.tgz","fileCount":9,"integrity":"sha512-2JYy0Weqxf7rulRYwO8MJN5867vgX1H+PtF6Oyld/K//I5kU/LGj7lqXTWpXuKet9hY6kFFwQFCb4iIzCU+rbA==","signatures":[{"sig":"MEUCIEoUownL3wIGPetbt1L0OMqZLR1QcEIRYGGUK+pn7CRxAiEA27Z5I3QD/KIpMS36WfMF8ClQqR6nx16VhqZY3C9LBEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHXIACRA9TVsSAnZWagAATjEP/Aw1FViFvWCOAx6gr8QZ\nN/IC5VzqkkGdC49dNHUhP4i1A8416b7CYVZYzoRYdTLIW0oeIBIi3bRRxDnc\nk8bvV9hTlos/qGJ/7eJFBTFfMrTx8alu5V6CBCJzTvNj2LbADgE/6Lcd6e5l\nJNt7Iwhs9e0FR87yfpr+ASqh47mZpf2IS0yJ8Y7BB9lGrR6RawXjyFD+0yDb\nQkMcx/QeeAeKBFdcfPYLsGe2dX/s0/Y8bE42LyR+u6s3gxZ+RJe6TnmtqweV\nN3fznphwfemFUMuKLvmXnIKNBRAwRSDpfCgbmyM/6c8b5b58uiQfQ5vDiQcP\nUYKCUoZXTppo4GXaO54GLgGi53uKwFi6YywXZq7C1thGuWJF4Gzh5Yq0f8Cm\nnEvyJP4IV+CvYq2a1QU3fJKWrECWVhJzAWe5ZWrCGLCiOqNuXGq0S5tXpvTp\nEE/S/D7wxvsBGTjgvk7wFZB/Vpt06TNrhqmmrCgZgJ+kSpFFVMm7ZumnEUMn\nTh4V/YTPv6l6jlH4DdAsBL3tljDkGWL/8mMd4u9tXPcs1J0pjf7NSnjceyyA\nO+SGCfJbxqyyYq5BaJVc5TJLQplCnQMFtH0+NKzJRP1SC3Skq6xpJqzbbxT2\n3Ga001MIZGFuWJmAtXmymeztp+qnPs79034cSbsHUmGw7il8iLvoH8P7IxN/\nkH8q\r\n=llX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.1-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.7-rc.1_1545433599648_0.6818937609211646","host":"s3://npm-registry-packages"}},"0.2.0-alpha.856f95ca":{"name":"primer-popover","version":"0.2.0-alpha.856f95ca","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.856f95ca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"79d0f2aa1e809f4db6dc13fe29b072c9c4b2d3ac","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.856f95ca.tgz","fileCount":9,"integrity":"sha512-5VO6D8JhjETxX1ZFgF2swmwr2mkYGqYn49wXJe2Y+P6GATAG+gG9IVh/wKM2Y+jtobC2xsJY4FM+fMiKt0Rd4A==","signatures":[{"sig":"MEUCIB9zSv2L3149RUCaibrmytc9OHeeXTK66OAbX64Gg7QYAiEA9ZEH8NnebTWgeaoEBiVF2pWHULy111lTwBo2XXEO9B0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLVi+CRA9TVsSAnZWagAAOQ0P/2Oo+Vw6zOx5dxgCwrab\nUrxceG9+jrPjNEBYLRUcz/ovn3J/cR4Z4rhrmIA652rLjWsjA4JYGJZ8u0BF\nfDsTrHNtXbWTKoqY7clKyfZE1aIL3560r4v/6ZMg9umOIj36pZfIjrbG6Oem\nqlupjsiRkaSx4PZP73+6aGlYvNdqU6RZcTtpGKzpoleC0d7WyirQMoP8a74V\nZiLZvTi8g3X6FpKoO24lK0QmVyAGaaX/J7U3bt3uICXzTD/HRU5kegEikQsa\nBlxfk/Q0cCBTQAe3jQka7CoSTAc41QTShiRpAp5max6InSQY40XFtHrwbYK5\nNOvSRMIl46YCh67N2ZnTHT6mFIZnGDgZp9XmAAoV+yzsHvTKeT4M5J/e4dT8\nk4Eq3lRRbZ7bzlB/t+5BBtA975peMQ/pNLZVbM0vJolo4wNWk7AB5hNkARQi\n6l/QcCjB4WGf2LJuKXzhOvLP/J67oL5SJ29DnWtXyuSUwum6IbT46w4oZubt\nN1mi2CD9WgFDW/g6k5bk064/C0g9dDAnHaU2oopc/S2mFUZKy6bvsTZJXiU2\nzL8EqN3M/4hrQMtLqYsgteMshkzjcXAF4wiRZ46WUQKtMppeRn2i38UOfXKD\nCO/TA9LYnnq6yKAHGWKJH3CyvMuZcpF2jxGUtAIOwbmSyY2j29ciLRs0+ob2\nY8wR\r\n=Xrm7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"5.6.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.11.3","dependencies":{"primer-support":"4.8.0-alpha.856f95ca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.856f95ca_1546475709601_0.4822907872276707","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2bb3a027":{"name":"primer-popover","version":"0.2.0-alpha.2bb3a027","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2bb3a027","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5dabd5d2edab8f14b09c11ac6b17715f62d847eb","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2bb3a027.tgz","fileCount":9,"integrity":"sha512-BggrySJC/MFOl5ri3zsngkijwTDetKeqK8g2wzWmIgCY6cyYYpHNuk59pbL+AmuDb5PO/uwLWbbd/eCWtVpmpA==","signatures":[{"sig":"MEUCIAzOtfuBPzkuZQFiRsV/BzhXDCYmaCOVG5/ck6suIYDaAiEA3wjlDn82RIHK0s7RnnnNDToM9o364gdSsBymgG14E2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLaRwCRA9TVsSAnZWagAAUHQP/2S6mjyC5yeOB2k4Ynyo\naLAwbwu43xaC1j3qkMJGR4g5QngsELVVSQqKCNfE5BwgoXUmMDpPVICbliC7\nz1hhTQt7vzYq2Bhv4CsNdL47/C+eQPjMsa9xdvCqwFD+KGVwhOytf8N1GKoA\nVu821ZUq37CDuJqgPpsGuVEUHaPE0F31hSycW4UXDvKgqSVnDYgIJiG+dkO2\nztXlmbhNiu0ozfR8piVxTnlHCONjlxz6wug0P7av0Gv1aLXVCKYrp204pe1f\n08mOJjsQd8Okwj+sfVXbxePrNE12Q8xXtGjfwmO2foOkPN6WfppBZKcNZlIx\nP2YSwPZDQrFOs5Rc8r+VKZKqeQDCsGFFbFecpiZosc2tGdMnBb3VNKuooqCG\n3JaVwi1VhqnYlGkp9/3bALKVBFRrvDdii/5WPv4RzCyhnrWO3uqnyYueoxdD\nHD/ATbGGCcU7jSMAtNJ1L4irvfJWKiU34McVC1JumGVlGcpDuOCCNOwifp7M\nnkywpP+1+Y0qchgjohnoh/TgYKL5Zl6aXrk2vGK0ay3gvz8VUar5yFqZCKJe\n0cQlkHtxW2HXuBWk/FEL4YckkfhbsB5puDxUNKrx5JexiHC7qutFmCQwW6yq\ntn0QgVI2hf45d+Cuq+DbZICPZmccDUIPUb97Bj/WM194bbmmoP7h1LpKs80l\nl3Ju\r\n=SrEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2bb3a027"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2bb3a027_1546495087445_0.9701940006787744","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5862b25f":{"name":"primer-popover","version":"0.2.0-alpha.5862b25f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5862b25f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f00ad1de3d588611a5b9fc74a43a46fa7136e32f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5862b25f.tgz","fileCount":9,"integrity":"sha512-5GvxSy0gS8RFCLa6OxMviRXpSjF/AUrwWodFkyIOJdnKuSQnnDdNHPEcDiv2Vlmo09Q0f6pYEFDyraLVh6zEcw==","signatures":[{"sig":"MEQCIEQHMCryiuKQUvStz6slR9u/6FqPIdB63248aLYz7aj6AiAXdX+7PFkQvSFPAAh3TodnQ2EC0w2aeQadCKGFJ1KHRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLaiGCRA9TVsSAnZWagAAJwkP/12rnXZYaSkDZNC3fEi/\n7KhyUL8MQXua4JQMZ0af4dkVAHt5wP5X+4eSP258V3bS9jO7eauA2uGLmFGn\nvlpnsdXg3dg9SAUprFSrZLsQs46ZY+nKw2y2BwARxt+Aegr4L5JslUh9kw+B\nGAsiETa4QxAESzN5CJIC3A+aT/vETh3a+zcAcrSZ2G0Pr9RropoIlU5UUUip\nb0GHcM8GGOHb8E2xi6L6uiuMbSdJ/mO0E3EzUIyTshEVQxyRl+UFhd6TNmNo\ncPzPWC0AKIcsl1R73TvSRtDkij6CALN+vmP8zdMNWOyq6OLjf6oEWfVspr8E\nAeDXkwHgNhshj6l4tnY7mvNM8kR2Ygp5WObZFC7QUeDxJ0V8ja8FAsVbtQWg\nH9lBV8P9+Cg+BNdTIyqK6619IhmcWA+mr90OzwcdYj/jEYLrt4T0eAJz2Ohh\nrlf6qxvDGb+e0A0OHjfE6rzwxmQUEFN9r6cAA6k+JcPaWnuPuuiKi+hu1/2h\niwMJ/5f6SZB2VF0/n7C5k2BktJp6/gRttzkodohRrF4J3oUpHTlKdYmpGSZR\n9rBPdRelVX5DgkSGznxs/QB2lLD3XyjhtwC0sypm21KS/tqLFyDbLoUj4E4T\nVCL77osHgKIUQx9OPFXMIzWIOZ+L1DbAGf+gAv0bouvXolaVDxgOwDIx4Man\nzHlk\r\n=WjRj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5862b25f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5862b25f_1546496133523_0.4955154044477499","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ee297c75":{"name":"primer-popover","version":"0.2.0-alpha.ee297c75","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ee297c75","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b1c7bf87417ceaeafd88eb106c3eed9333a6e857","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ee297c75.tgz","fileCount":9,"integrity":"sha512-yyCcFh4zK4nQ2Lvv3ZIkfUNF5W+oyYR/U1P+Na9L/8VIzZ1gTsuiEkpaSj+Vf0QYfShAyvTi6ZJp+DUvzvFw6Q==","signatures":[{"sig":"MEUCIQCZRBiCOj74dycx3Xmt3QdTrDBS30gGbTYpePsXGaiK6QIgQnB6D94civcmJW2ytYozLg/gnt/zBL4RTo/DRvf3NYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLbLqCRA9TVsSAnZWagAAZA4QAJDKQXHjBZJAexWp2PKp\nbX9rWCfEZ8Q1IsMht7eenb6mHhcecWu4/B5NGiRppO3xXtYws5d7CzpBwMGZ\ne1KDmtm4Ap9rci9+nD6aFHifKLGAxqaQFmAbj+N3/ZcFUDpDH/pqNGCq8fk7\n9yzA3EhzBMHty0UQXv0jHUkd8wK9zE/w78x9kYk2Mgx72rY8ydR9Ji/cbeDC\nwA91GpdY0NprinuxOs/A2BJnZ3V2Td9yQzOT97jA5cb2vyjZS5CWwSuq3Ts6\n+XdbmEiHCxvhnDBXD2+WcarlV4ZJCTvgFdCVkWWI0X7tfwzuz/kZmFCZV2Np\n52nn0pXyJlfZd28Zci8iVGZ+ZuSHep4Jd6PbC1VM4qJ8M90LumBsSXzJXNs7\n0Pcy01kdiJMQteuNHzFd9e+6ILfC31LsV80szVIy1sjVAW/u8MStAo48eKxb\nj239TzefO9eodzn3y9NRChpqH2oiZoJrNrJxoxhCsw8RthOD5AjAYohAnVex\nZx4JdfUFzP2WhpcUHi6V/qgzqPG/V4YD7ANlBdgg+pV3K9VBaEEQp0vZ5aWw\nq7jokvtAFI8GgvPmmg+qDKaA6xQ3QvoB54xBIzmZEtnKOMGzzpVbS/qMJMxV\n0syU1MQwmCdGErcwGu+2I9jQJJ29sZRcryJ16s1cB7AhD46+rRlV8t8SnXln\niBnn\r\n=HVs/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ee297c75"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ee297c75_1546498793817_0.17173995794283403","host":"s3://npm-registry-packages"}},"0.2.0-alpha.413e9cf2":{"name":"primer-popover","version":"0.2.0-alpha.413e9cf2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.413e9cf2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"94198c6705e1665391e118939cbeca1b10fb33c0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.413e9cf2.tgz","fileCount":9,"integrity":"sha512-3S+ME0byyh1j/CqVuuzI63KR98zrTd0r5ro2MsLVHktdoPMpxfYsZWzpywBFNorGFIqk8yqvRjc+z7G/iVLidA==","signatures":[{"sig":"MEUCICwGBiZB2z98qDRbrnIzUzYjW8eOP32x6I+nhD+ib4T7AiEAtDeQV/c0w0KwI7Oju0YAqQde4GsQs2ic2vIhH5pp17g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLimzCRA9TVsSAnZWagAAWI8P/1waoX6LiUZjWMTxyDph\n4WhIPuBC4HUVsOLEiyPjCwPZAFmqEGbXt2mD3UOaTqxGm0Qsc7m5l1EC+/jc\neWrmOO2+NGYTn9Sgr493UeRkEuixN9JTKtqO3FWsUT14dOfwm9UxBuZvh1VP\n2bDI7Hh6gJagTtAiqQ/UPCdKgj5a3MHIpEn4wGDSCSeTrAXFsRbbmrZIcwFw\nm3qio68tsC86KSQa68lnxJlenk7jC0n5aRymY3x7CEMMPVXU2XqGxPNxqCqg\nTobgdmBCu3XRShDT3vZhMbKdPzxzJFXDAo4fhhOrfiC0HKKsSdiKSYrYwjT8\nZsTzxEPZI3pgxvjJJ1f/nTHWJNK0JoX4TDm50pQxaDifxOaLlczAP/eyFOAY\nMmRqdy2O5YVcy19Nq60izkdfIcVjFL3szhLBG8pBapwUWPKKfu/gHLQ0DvbK\nEUVAqroFPY7qwdDSRJkorhokmNhxmgcdFBP2KCm9qnRdqzBA8ZUkJ0aBmXtb\nsu1+K4P8WVpt/yMPvXkiS/ALw63bzqjbp1elC+tTmtOOOLy1VHRtLp1TbsQK\nVaUouQDOq8SMawhU+TejeOU6Ilmo0MkW2hOCGsk62M/xtWkCEWIPOoEEigen\nXD+WMYJhfQXo4ST6Pn5kWTL/dvEQ5zDIHg3RnIiw4qkZ9HG2jno9t4rAP1SU\nbMYA\r\n=J6Xj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.413e9cf2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.413e9cf2_1546529202878_0.4116819489115153","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1092c5ae":{"name":"primer-popover","version":"0.2.0-alpha.1092c5ae","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1092c5ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8e2ae30d4b3a5d3b10a850fc8577890ff43fe755","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1092c5ae.tgz","fileCount":9,"integrity":"sha512-WzebGHEdZV5tA4r/8xjmOPytf2qKeo3S2nvVawOQTO7LA8W3lcfNSN92zcNgw+Y8HmIB8Q5uHsyillwgFn7Uow==","signatures":[{"sig":"MEQCIHIJKDuNrLmDmTdRfssAt/jkb2unaSLcGNFL2JMZVbLDAiBKt5UGi+A0g4sMU+uauPvnu8l9VHMbUvGvHauqOEv2fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL6YzCRA9TVsSAnZWagAAdaMP+gI8R/qppKSR8Zjp8iaO\nwkPsTZ5v2mn15ZlDJwW2xIbegc9SDKKqAeSwEbgZBoqRqAjPksRO9r86EWcK\nSxTviloLvqoApRyC2FIjNcRo8uenNIgnKH2fe5T5rl1tIQGILg1tCp3xvohk\ntlD6wyk6jBqxI7IsuWIFajFZ/pWi7NSXEOYmAlyJJcm2cumcBj+de9vqgGbD\nMq2t3HeO7jF0kCKX/ju+Gm3zMD7bI0L1ytPhbA4mJCja+dS5EWBULSqFUM6/\nGDTzkty61IcSJeDTvDcr+XP+X9Lp6K7FQyeOguxe4IAIJEbKZT013uCLn1M8\njxFZXn4ppJ4XDIYmWOhrfVsTCtLqwGIj9C/ih7T9zIcEWBfJMzkZbrB300AV\nYGO9/C30XbN3I1vS25/RwZPImo6ji/yRokHVDbsdMg0tzqVyf/RVlJjgc7Gc\nkddkZ+qlyHOOtQ7CMMQ0MahnDz9vZoT2ohEh8TUHkAxMKwjGe2NVtU/fxuEV\nvvr1DwnfNSnm9gY0zLoP71qwa0wN2FoFnDS0C7BX9IRE1KpkJrHV213ssua2\nOpBaPUB0r2JKXPqCsO2caEfkaDWPQcnsGVs3p1Uu7T8dGPLVjmFPWvmyFrD5\nDYbq+5/XXmZn9r9g+CjfY8JFAV0h/Rtivv+xGHv2rKDhaCu/zTsp8hFQU61g\n63HF\r\n=nYuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1092c5ae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1092c5ae_1546626611108_0.5934908512182027","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d2790373":{"name":"primer-popover","version":"0.2.0-alpha.d2790373","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d2790373","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"705061e4de3fcbf0c1b00441a19f7516f0966a35","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d2790373.tgz","fileCount":9,"integrity":"sha512-X0CyK8KO/gPmGf7oG6Pzu7cXzgHVWNkSQRQLuGrx1D7paiZGvQODRWITQebAEL5SfQ3Y1PKq2A7//RlJokpcZg==","signatures":[{"sig":"MEUCIQD6Oqvw2O6aaHliJVmUz3TgspqAyEApygrIg34u1WJ7jwIgaxZZ3PqSt9jmjEI1AaTMOqz15DefgPxSQCx5+5m4J+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL6fECRA9TVsSAnZWagAA5XgP/3Yr2g19nJI+GzWKRYC1\nQmj86CevR4VubnKU8a1lwqH/N5kRimvTG5aYHk635SO1+8EIsa1/o4qnJshC\n4kGY4HnCQpNhaq5hU1n8leiUIye0GlUQQGh/QmTqncnJSaSECm/U2qbu2bh+\nYUg6HO2mAKvVBPdyNhp9Idqt4od5o5EziKTt/PbUk8547GeW5w3d2twphXFD\nh5HaiZtq0hcMnu5Bn5YUE24Az0iQNt6+2Uqcp03W65/82h/+snsQ72TRYuSr\nj8enRYJDHMwaN1LgoGjOI7UOKSrOzl0+o71vI+SkETtBN8j5/fhzi91RZKJl\nD2vy9tuNLC/Mexk+FNZM80dKNUlZ6ywmqfvGuCeEhwMyz3GxNqMgC0ffIg3F\nMFGWxcHYqEOKmyEhLvU70pWEm3uVBF8mlCgypXnBhfn6qPfPE5wIVJda4EOl\nBDOP12+v4XCW7CQ+MChoBbH4W49+M992RXuqi/T63X7tLKkcBfsZNiVzsQdO\nZlMqRaodnTJ0HbFvaKmIYsvNbGow1kzG0PRiMkuWaVGcFEow/xbYvIrZHlP0\nnIaFZauh0AD3lV2DoNMPtP/qMBYNk4HwJFX7k3T4uMG+k42wpz49mWwPH/sd\nAT3+4b3EaHl3A9naRRBGNMYMqwUeWzLXmdCJ7AdcxedEFfP4+0W4iY0v8uPo\nOH/U\r\n=L6N0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d2790373"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d2790373_1546627012471_0.587287255052322","host":"s3://npm-registry-packages"}},"0.2.0-alpha.f83c67be":{"name":"primer-popover","version":"0.2.0-alpha.f83c67be","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.f83c67be","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ccc4533833757b2241d28e0e49a7ea4cca8a8e1a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.f83c67be.tgz","fileCount":9,"integrity":"sha512-2XvHAaZl/PJZE87YfYd/PWKBmGK4D035PkDvj+nflIGmRtUw0IE19nmcM/dBsSAkT7qLcq6M7k1iLDW5fef36A==","signatures":[{"sig":"MEYCIQDoIeaPGIYIt15ef85m79Um8vmkJECSSos/wxeZkye63wIhANglqlmvpQuH0St0eyzWyiXrWdHz6P3Ay6anFho3U7eD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL6u4CRA9TVsSAnZWagAAEcMP+gOpLJuX3HAXtRIRj99H\niejPTNND/yXE/Zm+PWd3UCdivqV04VPTr1+dhgcdyVeU8zCd86UBA+OpxikK\ngz5IJMmNZu6B+mUFBVG6vnoI3tw6XGC4O8VyxLiSU+cken1U5q+VJpglwhG5\n/mluKSb5MwNzpnE0vTk9T5HTZZ7g3jcHP4Hw8bsCLcG5wyi+WL1QGV1ukgi2\nKgCfo2/8thIBuOzBILLi4aCdJyjkKaB0oZnJ4KC2F4RbcbyzzNuc4GExOnn4\n1duymquTrzo3rxISArGcwIQLWxNrlK/jUJ3CoJ3jLB7xUQKdlPHXyo/CedMS\nblxKafhReC7OAPsFkjnA/9gT6G8hTER4i266WSUFLTlww03NXnrZ8tdGzfze\nGw1Qv4MQaYIOMrVVlESiYaive7t1npCXY5aYilDvT5APKOiqBDqMLK5P3aYG\nP8iDYkAHgac2+XgQ6Mm89S8H462TIW1yRd9otJ0+/OTdLeXezPia8Mp/BddV\nWhUjcGpgfy5INVVcj5lSVco3uZNwEgaJT5g+mo4RnMXdQOPmwoiwO2WmFxIn\nGiTkRgCZQqT1e3RBTBoItarzZmodDTCQOnrcMiodktcIVSBQsnuTgaaj+sYT\n30Pd8XEAo9Pbki3d1ef5Zznyz5G2q9C9Lpwm5dVeX6Gctp3gZulhxUu2xEaL\nygEq\r\n=qoYO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.f83c67be"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.f83c67be_1546628023328_0.3188577674152213","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e7242c1b":{"name":"primer-popover","version":"0.2.0-alpha.e7242c1b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e7242c1b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b5a9c027161c00222606c8a6ceb9507fac2ffc7d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e7242c1b.tgz","fileCount":9,"integrity":"sha512-wNl9+FvPLssgFHGE9K9y3DG4hAG4T7OjuY+syW482jDTyq0OjmWRbR60ESXWS/8GgvgNDIyPlJ0xCTQE3E9s1A==","signatures":[{"sig":"MEYCIQCCHsnkKNWjYqNyzJASwtybTin8ifStyoEC/74FUNga3QIhAP7/c8U+doZVktTwj7dU2SCkgguVcbDIOdaox8MuVWAE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL69iCRA9TVsSAnZWagAA0lMP+QC0547ltJ4pK/R7Fja5\nBr4bzlCvGHIFRe9cW4QDM8cQDZ7RR+f75QyamulfCAN/mbuRb38EX5asQQIa\niOlY3y4JMktO1VtdpwixN2CFpZ2QVXJMw0FGHrBXR+x7HKWGyvPh69tTaIOG\nl8+4gHd44X+PtRcd/Ncm4vTvLyFZu634XWg2gTvkzUmklNuXeHlFjM2uWt2i\n9TS1LirvBBijRAE6rF0vP7LxmlJNgneCvpT2+becPTgIGifIU7tTkG8FTdyX\n+inWneH+j8reAL6JZZZd17drtrm8HDecBCsXuiAwyg9kfDfzRlM6UGjN/IhF\nOvskayp/Xh+bcyEb/gUPswiZcEzXmt6TGjmvXG/8ub85gzCpIQI46s4U2h2/\nHhY5mrSkw5O3EyM8Ju6+rPKiCp+YAt+UnwIpNYVqjP8HHNsZfyxAr5xcmXpj\nEnv95WId+eOX6JF2/bP1T0YPSikBo7/u44lOVahfFoih6ZEDeuns12DSckxF\nMRjCSIjRpGjlfBrukIpBpZSddigCR6m1KArtPRxkDTv+JcmTt7dTWFU8G17P\n1C23iwR9oosRFexOyx7RDTzuzVSAWxsi2M6AJuGEmkV8xghRrkcQ4b2YcZ8t\n2GPTobuLRx4jSV9aveNuLpXhdkcLHrXMwdKBSKkKf+ET87THwV06SFuQ9Rus\niLfO\r\n=L9Cc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e7242c1b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e7242c1b_1546628961230_0.36050581491268274","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3e5ab64a":{"name":"primer-popover","version":"0.2.0-alpha.3e5ab64a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3e5ab64a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e454cd888aebab2c6c00969b884e9e5acaa7754a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3e5ab64a.tgz","fileCount":9,"integrity":"sha512-uB/S7hTO8FVR/WQmDGHG2NGHn4IV5brhGQWvRMJQhPURRxNvceO760CVy8kOK3E/EMQHsJ/9rvVscCxWCeWEPw==","signatures":[{"sig":"MEYCIQDgBHhPPZ1U4flhZcRph27GWZHsQycD2hP4VCFmHsN0HwIhAKqybwlEQiYKfP902lAEdYn0l3dnGH0pEtET1ze3rp8K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL7myCRA9TVsSAnZWagAAdtIQAIhLUTW6A1K7wWgz+tUF\njtG0Mg1xVqZpCV3vRgdi7xrH/jbE0jOEz+LAM06goraqBcnN5TNEiPAENP2L\nz/PsTOvbuV38nBVQ/qsO0HUN0cjlRwAtGtPL7oaMygVc5gAA585sqSsCfcqe\nzOsalcLBLBpBj2tvP4ZunuFIS1oKvuxl5fVhhhWUshFzm5sPBIDNAjOVHa8m\nnwmWg5+rbGVD2sYsTb81qCQwJOVaA8d26JocntLmHlLv5bhFXN76LajLghg2\nLdKXiQhKIWReJui1BSNLI52PutB+ekYn8j+jUI2byS9Up/DATSNrBB8XUGx+\nAY+Nf5NgDpifLfRskkvvCj4rt3ywTlSbgybH1IlfCYG2eCY/gP/7wMn5jsMw\n2govI8MrDJ+YvRuosY2W4qZwlh+ja9CUHQrUOKrKmE1HkUZizvJG77ekoGCy\n4lQnfK7lJ824gwWWSLVBfITWCKA04wGENDmYJ22tQqPisuw/LUOsP+4Q6ACK\nVU8r9ihTQcVqeSQu2dpg0LrW9yxEnd1PuB/OV5N3U3pZS8/t0a9wcX+5auS5\n+CGIrfIyhctk0ikWp9hJ9XoMslXb7RFKnmwYnpvLm0BF5l/f0fczqUG2WFkd\nymR8VQScfqrl8sC1u1zS5u+ATR1dYCp/mJG6MlobsuGLVFF6VKeZx4aAKGJy\nAhZS\r\n=E7Z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.3e5ab64a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3e5ab64a_1546631602347_0.45750871753104216","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e7877054":{"name":"primer-popover","version":"0.2.0-alpha.e7877054","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e7877054","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bcc4f155d5658e014570725a67e5ffbb5de6642e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e7877054.tgz","fileCount":9,"integrity":"sha512-5G6Aon6+fNTefBuNyOU6518X6rT3l7zwUxObFXsUv0pmqiZVWXwxNBOTqgUeihpeNzKE4gidDR5OgfYhFgV8nA==","signatures":[{"sig":"MEUCIQDAdMq3SiO4DygCK9MWm9UnTeHndApO5CFrbKJYlOExXwIgTtISWjwbWFId8dG0ZT5z64cErtgNNO/otsMOzIefgLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL705CRA9TVsSAnZWagAAim8P/1mmKTIkTo/EquhTFd3i\n6W9Y7z/puho5IPpZ8tJoG8fF2OiVl9Kde4WagGcGnzL4atVsjxhLXeFulReB\n1B8ani1O239fQl8N1xF0E6qXR6ncXj3RzgZZ2YZ7krX/tbuck4kqDRajMtjK\nSYs+FaqwL2ksqX1WSnQHfrxJpKAbEZ3FDg+nfrp3dqzTC0WkmOwNu2mxNKsJ\n4qXlVnno+xbrNFdMNt4MC2nz/sT9/Gqj2ew50Rw+N0c4V+c5dYquLzYX7ezQ\n5dQLIcCho5VhOLV2oF+vLsWwCZPDmu++uyi9hY+RTIIQ3cRWPbj16wMCig1Y\ntGd01EgYOY4neuaistEFesJ+LB9Jzzpu/ZjazVILI8KHmh4ZBCbUWOSs4x4d\naMgGx3yENuXvvGZAtk5deL8sj/KURLEwrb+TMZXlGI2PIV1jU87Lq426iED8\nc8EWDWLfmR7I2mQ05Ez4Uk3lsq5im8l6dfy/q+ZHunWHGD1SlA89YllFQL3Y\nmWV24Vr7xpRV3fjAQ+NtPML0O9Kglzw3YJ8qEW76FHHAuG2xgyK/Pkf4dKKk\nfffVcY7pEHj6tJsQBImNEX9XhdSu4+YuPT6B9p4VmzifH8DOdxiKiYENZRo0\nG4/gmWXKLU1GBM7QbSjmED6lDDfYS+pL0Hmu94TiONW0y/TKm8NzecO1fdmL\nCPKO\r\n=oeA/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e7877054"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e7877054_1546632505266_0.572144859669597","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0b0648ab":{"name":"primer-popover","version":"0.2.0-alpha.0b0648ab","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0b0648ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d87db18154df15443d02d2dc924a687b510ed0a8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0b0648ab.tgz","fileCount":9,"integrity":"sha512-I1LOBQipRhl480oDmUbBhOVbzGniEmQH3UvLwXZW6lxMcHzLRRn6/wbc8k3lYZ508m33U9QPHsvQcHy4dOUSUA==","signatures":[{"sig":"MEUCIQCfeUa6hQZU2EoVVcvEPY85ejQOsGJHY9CEel5OHyNkowIgBu/YJzzJbbbtaerK5Ivt00tS/Iy1P428GIpWHmmPseM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL8xoCRA9TVsSAnZWagAAlocQAJHQNGHourSoGhYwtScn\ntSScQBHPzaQZwCDwEjFt3eFxH6JkH3OInl2JBlCyOCzqmH/q1VGr11o3fIpB\nLafFHifXaeV5I5fBOHDj/G+qMCLcGbwFNjlH34glTqYsqMBAkK26hhMxVhne\n8g2x9nxruBo9SOa468gl43HqcVnmJ8EauInJBgJ/qX607nSBsFKc3NLYT2aj\n+ZHV04xOY51WpGjYwlBiIOerhGJV6EC4Cf5YCugaHSnLB6AxOq30np3SGSDn\nSF8utvCqU7j7yPmC1evzaAjkBClLStIzEx0RidEXFGj4UyvrAIxdSwpfJ4VQ\nJFrywMcx8lBXqltY1uCN/oHOEwqo3kuw2wbxKDsIu4Zy8xPNLNCHWUzD9fLw\nZMTP0vmTLWLQbji1pfsKve8QRN2viVgl3wJoHMX4n2DAMqR89VYNsmu4rI2C\nu7+qbUJLG2Pnc9pjB+yaqKw/YDJEiQzlCeM3x4D+fRkyXDSByhNl3qc8Hrxb\nKVIM/S22MTkSvV7V0Xt5x9jfsCKSVgrfpBhm7YxSYYdFnGqsweCL9zg459Sy\nW3B2uXDaqH1m+tsneBJ4Kd5q00n1+nD0Ol98xNYukzcPb8XoFzQy17DjzQIL\nmKxnfP7WO/a5Y06oYvWhMSToDYP4VqvAH52YIlMzAFwFd71rkCfwsgf5K0H/\n/AK9\r\n=yOUx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.0b0648ab"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0b0648ab_1546636392172_0.9784599123156428","host":"s3://npm-registry-packages"}},"0.2.0-alpha.955f170c":{"name":"primer-popover","version":"0.2.0-alpha.955f170c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.955f170c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c32101e50dbb6599cfd8f414272d6e101ba1b841","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.955f170c.tgz","fileCount":9,"integrity":"sha512-rVsaK5Qzzk+zKoucGpC+ZvWrm6xCNY8UgIt9CjuA4f4oi+UG173pZlfjDJ+mPqjINaUZEm1mJkuRWAuIZ35ezA==","signatures":[{"sig":"MEUCIQCczXVRuuI1NYyaZnkmdh6FtdhB5tinqf3yLIzN5vKZcAIgEcv3mPFXiXILltujhb93KAlkl2obt71jA7BVLRtUfU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL9YZCRA9TVsSAnZWagAAGLgP/3tEC2rISkORh26oTA9p\noj2i+9X75m3Nilmu19SXi8qdxTzDKWZVFIAPs4Wtngj/H7It2EmaLqTjv8ED\nG3Zm++anDGSi7/k2HJ6dbbFYQxtxdMtgZyYBOugTGxj91nhOWVXBWvmQgO5d\nqW5T4/HzKXryIU++C6kepFYAEOadXXJaMVKKtYGzmUGOiUhRO9EUmqjeIGtY\nT4OT7MnbXLnjymPleUSFbsgMBirHFUzf3a+4cCtU7UF+hmtxyxZhDPJ8K+id\nVFX5rBq08iq2SJNKYNmhPnJN74MlYn+tuIJL5JfG2DSmMtZyxac+cDuW1Xdi\nZlvj4+WGrxEBp2GvmuOlVbO1e7l86KgkA/tUKqGCxxTsMkxXOqDhFTSLHvrd\nA0miL5kd/Z9TJKFkeqq0nmYA2Eetc8yRB4owqfFISZ8O/TY4xe6xseR9IXwi\nVQd6qH0a/AeLhdw7Jcqi7iSkfk1/hez0a66g7wkC6KcErIggE4h4tu3nS0RR\n+VGFR9HkJmALEG2GRKKJxgVDTxOAuzSft7NdckGobYx/eyVJGMnWpJ98dMHV\nU88SusO49q5n1gnJrnrViR0MgwMD+3CrwtVHihoQJ+QY31qyeiDI4TkDB1kl\nkiRKKo1dAr+aApfTy9Gkt3ElfMQAk7NejWP897SMANk3smupGSogKnKsegvr\nbHxg\r\n=gL1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.955f170c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.955f170c_1546638873013_0.9794605803239009","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a5c1364f":{"name":"primer-popover","version":"0.2.0-alpha.a5c1364f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a5c1364f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5ae5eb41211702ec490724cf3dc43648bfb395e9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a5c1364f.tgz","fileCount":9,"integrity":"sha512-QFqwzbPuAM4bhep2N7gSfMgZ8M6EP81NVfnoUJBd1XX+gaVaEHi/8qhd4q/NywwjtFOjl3mOY/ozlek6bts9yQ==","signatures":[{"sig":"MEYCIQCNdmZixFfW/ygdS1Xhzo5Y2/t0UdfbxTtLnzVVDxJm7wIhAI3sw55a3JvC2s2PkXv5iTa9piWQ/XbUgZwJVhYHmxY4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL+jZCRA9TVsSAnZWagAA0cwP/2zsTLdooToFyp7kpsZQ\n3lGylUCQ4BEU1LgXq8dUdT5a7NjbYNARqAP0JrWs1pXRftj4qWV7qLQoO7ch\nJbGU0a9IUew95gWGsC2BZCFooX8wX4ZcglOt6GBh1p8JtmprjFvQ9/cDChDy\n116qJBgWhp9iAN0qN8gKbpdxUAQQXQ7TXR6dZ4CVhqpwtaVkiSITQGw61S3K\nbJKSIQGWQtL9RO4UdNfhtYkGZNHEuMN0VYaxcdloRc2CYcLW2p45iq3Tsuhc\nIYo4yze9TPodTk58Q5udSnVGEXDSjFFpdjVwSfURZkQ8mhm18UtB30wn52OZ\nLLeucz9NJQzc4Gm5NTxGVt9kEqld6YxvKgT5haf1L0HpQyDcTuuNclC+EQ60\nl/bEGjS0GoQiy7wXbvRjxhTCMFBK96PxmvP1KeLQjVqrsHh8bJdB+BIaNHPK\nsiGMwcVxNliCdQifC7ZkGAxNpasx9ykbL0HE8FcZicrimPpYxe1yfZJHmjdH\n/YbCqL3cU1txc7NxdUCohiuH4GGCfb+spzYrjKPZ/DHdw672pzSMpEz53lPq\nH39mbrTLktlHjv5+zAnJrokGljU8xsxKJdqT8BsXH0svbphbArHQ7kwJs8nO\niOTvNrtGqNcxPwyFLdgG37LjufFyKUY1bmAzfoC787fPd2IHjFKoCs+aGSNt\n748p\r\n=60bg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a5c1364f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a5c1364f_1546643673154_0.8500351572078617","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d9c365a1":{"name":"primer-popover","version":"0.2.0-alpha.d9c365a1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d9c365a1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"25a6c8bb700d93244ef49fe9d701449e4bc677bc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d9c365a1.tgz","fileCount":9,"integrity":"sha512-NaUkvBLNaH/4gtPpzszeMszZ/s7iaRPU9VLKut8z00JYBl/LDNW3D9HEuy7jN/gH49wJpvYJXKQ/vtlOXw4PhA==","signatures":[{"sig":"MEUCIQD1rx2Oh91eqIhg1F7+pG1DA2VxbsIpNYakjDtgWAEIqAIgbx3BzY8B4lVMJARgACYipsx3rwWwZQN+Mp5kzN9e6GU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL+tGCRA9TVsSAnZWagAAVPEP/jJ517UopnHrL8wyYzmc\n3D1fTuqEfLWzTUnM59V7zHO8rfu7rc5NCJaJ+9mPw7pfY3aM1cFQwYH47XFi\nlet2b8Gk0bpnTPmcGrh532iH6zLAlelESBrgu6LeeEGeme6tMlqQTvS3aiaF\nNfETTneULwqTFvtx5/tZkOY8a4QKLtkBO88KOSp4dsREbNLOjAxjfw5cosCC\nspOnPio7X/u0ThZ8sbhltvaoK24ufmvVcDFzNGertinvIOH7xvCPe5RBzc9O\nmvqrkQ6lwzSD8f6XDBw5n2qdX3HeveTdZDshwd8E8nzzQeE0o7EgEMfE93Me\nwMRJZngUE9eZqrZ+noIbPvcQLRacBDCJO7VAO+mw+vkJPEBOXy3gVi4269W9\nDWPlIA3TNAhFE8CksaemxMLKipAn/2qBtGTbsDj7o3JqlDfPKLP4OF//CVc6\n7Hu3t1f7kBD+xHX5QzcmJMirwgEV3oSZBtVKE3UCrOFhB90wjj+/9FIiwgLz\nSmYDx3/6Fi9FiL9Eo+7o0ew1F6RijMeFMpBb4nIrJicFQ5eu5xcwqBMcdQ6e\nQ+aegg2klkCUDgsBaupLI3ejm43qE/oH1Fzek9D6qIkssEKVfk19zwT4CSO3\nNGd6lZz1dXcqm2eqJGMzrTX2uHK02WNaqntSO5vrLDweTMvLRbgUvzm+2lha\nxNIV\r\n=70gu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","test-docs":"../../script/test-docs","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d9c365a1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d9c365a1_1546644293484_0.5111313314153942","host":"s3://npm-registry-packages"}},"0.2.0-alpha.687ba691":{"name":"primer-popover","version":"0.2.0-alpha.687ba691","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.687ba691","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"83c4982b093838ec8191b4f2e0812574ed57bb8e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.687ba691.tgz","fileCount":9,"integrity":"sha512-jbN0ZA+HxkVTm8Ohs1Ap7ZTQxa6s2UH9oPPpQp9rLyMx1wSU3sP9d2AORbQTRUIImSx/2XSmLV/DJUEbjMjZiw==","signatures":[{"sig":"MEUCIC84+lMX90N8A8W4HihrJDWkMnGapDuooN+/hlbNeGedAiEAjpOaOC1dKr1keJ9cuMWcZ7RrPaPF0e55ZEfuy+/p7mk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM6I+CRA9TVsSAnZWagAAfWMQAIA6CvC1OxbNf1yRqq5Z\nRTHDRQtozSSv0eFfY19ibNTN9kkO+RObCG7PAtA9vkH0PIRKLdzYvNENPg5W\nD6TT7kVswycuRIBZ2Wf6MnScRpvN5cecnCz3yhF4/orrYqMpv/17tePvGP64\nbTtsqhvrY3DfWkW9BQn98CDH7gfIUMGpaHaFybVuIsAu8kPxFMr5xdoy4sQI\n5CNTR/3Dv4K2oNJtME398jhOT/mDj3sezdb6dOSeSWHbaEYNF5PiFQVDA6UR\nL1AI2GACZ++RH0Bstzc+IABhUjLFQ52t70DyqYNuAz40msiPD8crFg/LUEZW\nq3TOSh4meaugUdOCstM4QFdKpouANiXFwfcK2IrtToKtnQK4kGqe/s/7DKCE\neNUNFwiR/8bQvXZOcgLABhCKR+htY6wsTVSdC80wyd1x5RrI1EA+BgujKpk5\nRNJSm5JjZ02UBbI6bd4nIGLuBuAZt9yIXwFfeYSqiFNPCOsLoXpiPwyUnX2L\nuuj0UOKgtUlUjFvQx3RMydAVGtEA4GSD33t8bzDTl2ku0ULmRHW6+NDi1FI5\nTaP5T5ypZQlTxXYtji/KFhRTccj/8BGu4Nud8c4FwMx7sykDNBYNi1TWuUhp\n7DTQ+fe6fSfk2kMRTJ9Kgcyvo8bLjg5To0vwgVIrsbwGgguM/cHt16+Piyif\nGGrI\r\n=VHvE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.687ba691"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.687ba691_1546887742309_0.48191671037598494","host":"s3://npm-registry-packages"}},"0.2.0-alpha.95307c65":{"name":"primer-popover","version":"0.2.0-alpha.95307c65","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.95307c65","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0eb4c23f17440709b3f5c614f75ba3f63532ddc2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.95307c65.tgz","fileCount":9,"integrity":"sha512-eucv+1B6O9mGJVwjQbrsdTc1ubo9GuPzG2S6KzKdOUfIoPsqTrU2B/y2qw8maf5/j0l2hDKPr/MjKcjDhAyDAA==","signatures":[{"sig":"MEUCIQD7JM9jZSyM5xTJES7F7jIkUwJWTXWvz8J6oGbPiuzyTQIgPhVwV48xfHj6mGfnmD2Op53/j7Ep3eX7JSaQonVmSlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM78CCRA9TVsSAnZWagAAbkEP/3BwC6qXQygaVv7vnEUm\nC2UCt1BDF8xPKw45bYsuT3vfiC5FXAw/npdlmQ7XZ3RSTJCFI3ch02XuGOTG\nzbt4IO7zpF1S7HghwWpux85AxOuMaXFJUnDc9r+xhUZYOuSY+w/q1xnA7JVS\nBasYLHVw2GxonBezxNop3sVBwUUATyy2XbSHMVo05kxQptbMyFK1i6vDJb4V\nd4zfjtcaNL/tswCrq9wfd+voUgBTXwLicZFYCVrb5z54j3GHQgVFVxk05yn6\ns+g/PluzzLrE5h0T2E2aUFCy2XoyszMbOqXu3VshIPgCrg3EjBP951MvYNki\nvxZJTJnVmQ6pQyCGO9JpgouONZ3a4Vl5n6kGtmagmRaRZkSzxdTqgWVsAsS3\nMAd3IDyzYblnrnoBksmKizLHmHSG/UA4De8MPTLoM3LAmmUkdzrSkBh86ob9\ndBZvhUxH+udy+iOGDBavfhiuwrrpYYFH+wzXzGGcWsT0iyiJD3ncO5LJeSmb\nnLVvbr5ZqVcVftNaR2nqfSyX8p7mZpxL6+Y/Jgg6CHiT2PC1UjT2qKz6Hl/W\nW6DDWD6kLi/hoBToBS2Jdaqva4M7lM0jcsxHYDux2soW0gnJluFQRKx+o3BK\nq0E7W93WVF0iNE6uGhobb8PUrmwy5gGsMIiIalaH5CgvTOShqK1dMo5NTW2N\nf3/c\r\n=e03S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.95307c65"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.95307c65_1546895105514_0.5849728983379265","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2a15788f":{"name":"primer-popover","version":"0.2.0-alpha.2a15788f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2a15788f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4e0e0b89caaf7b134e7fdd31f61b106153f497b3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2a15788f.tgz","fileCount":9,"integrity":"sha512-CJqD9uONuia2yxhoUu4xoHiHNBMHyryWk4G08u76PF9phiEuEYqMin01Tvbtpk7HpP3RVbUqw4ejJjODhZUfgQ==","signatures":[{"sig":"MEUCIGusjwp2CEBb28P3OOfzXQr1SimnlhQcn7HYR8KuUd9BAiEAzUT8gFseikBcBj540gb+XWf11hAVMPW2t085aPxkBec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8HrCRA9TVsSAnZWagAAnI8P/0y4WfC9mCEvAb+q9WzE\nOLvr0Cw6IlISj1WrqqKzwIv2myqZxNGg2BTFtxivteelzEpJ+OQwZe+emRTF\nr9XjLxoIANE6SHem+B0ynsAjGDkPiMfpOHyMiWlW18xvyFbNFqR7OSMEYiaq\niiNyfPn1IWrVWn3UjOF22K/KRm84gFn4v+mXZTHtJ6EZh3e3tmakSb/m3iTr\nkAFv0d7arXsby9iKLM5wpmZyNgZFKBc/x98Pd/cIY28Yyxb41HKeypNyqcuF\nXNP2zSq4zOyeiS2c+yyM/5LHt9LL1qrnsUsUB7pdCDrBBo4A1+fwN4h81dxO\nE8M9xkb93UGdtEsD0Gexrzis/fF1mqOmD5c0mOa7gDGavC1t9wA+5Xz1sNJn\nnHBkiLrrzM0DBYA9ti8h1NIJr2vBcWuz0Q2ScJyMFaRfyS6UNb5TEDkXJyb2\nL5Y1mWXEblrc5z+ErtW2clEufB8rXqK7golslRUkr+2qJte08MQ4RTMrSqFI\nJDDqwye+r2CiQmbb+e0fm0PBxOjnzX9m5b9+Ksxs7kn5yBFCBd1TMZZARtdp\nPgxnu2jEeilcvrw0b0V4J+YS4eVJhq6Jpgy/lt3drhWa0x3P3pq59oT2trNN\nAYuOnMWQOJmt5IEEgb9RziaJmFkl9UrvX/Kwtl8cxXXTZVV8Vk6kD2ruKhtq\nvwz3\r\n=NtWY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2a15788f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2a15788f_1546895851230_0.7889706771894778","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7324c66f":{"name":"primer-popover","version":"0.2.0-alpha.7324c66f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7324c66f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f03c422bb126c18c676acb187106afa175a5565e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7324c66f.tgz","fileCount":9,"integrity":"sha512-4gMyCYA62lGg63DljC3/MtP42PBZ7nZOYL09uGeOaDbC+9zebe7+EuEVobWCrcczdDFdD0PSSNWYB9SM3NYjCQ==","signatures":[{"sig":"MEUCIQC8Hi0KzX+WBqc8rv1Y+gaIUckwI7gpC98uTuaFE3BOPgIgdSWYGJuuTO+Z23A71++r5SCEO5+jWzo202sODIn+Cgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8W0CRA9TVsSAnZWagAAxZUP/1xYKsR6VcVSMit6OaL1\nS5/1HzEb1wDn9T2EHuS8+mi6nHBE0KdJ/5Tt9jXQuOCiVvnMHj7GxGQ8DNPJ\nG3GOKLNar4gAWx/x4Y+PMwD0TBahswP6xJuI1wTm5CPZSWoU3f5Ld2wj3Ern\nwAcplNr8na/AaGiV+JGnY4Con+cGqkBEt8lGFuXtIZPH8B7dSNo+iQWVvU6G\nvGQyFAT2KchL6ODWziaE9tXbNl/YiZ5LaYd+/fddyavcCZ0WoQ2WUNWWO3YC\npYmUbwGpUx0XzHe39hR8b1LYDINDudRSTfM3XJrdJIU0UpvNYAKNajfUvihD\ngnM7/l0kDX00+BaHwUvAXkE6cf9+vdJO6esPANgperc07MrJ6PXyswusgXip\naZ5zEERkUwvTcYPLm1zheYTeXyLkQylQULLlgz1/AgB5vXjLfXALplwZVNNr\nnTKwmH7lKBQKbwOBnMBR4RNZrIOOZ36glx2xq0riIAm4vpRdCMQuI4r6EfGs\noaVgSNd59d0cvDOhNA8bgmel8avN4dIhZjrbiOjRwQSmt/lNl860T2xmAhnw\nZpvtlddLSkbA/dbA+BAqD1h4ZMtFQ673084mrThxIaVcpExtT10f9qE5DFQm\nQBBS0ylT0XiZWbHcYqCXDx/SVQwJyJjfUqLrp/RaEJdq80sdJUBgymUsBkLl\niiY2\r\n=q+eV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7324c66f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7324c66f_1546896819374_0.5249663130166091","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8d56c8e7":{"name":"primer-popover","version":"0.2.0-alpha.8d56c8e7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8d56c8e7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"239e2daee24b12364413dc34a9cedc59a815d2a0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8d56c8e7.tgz","fileCount":9,"integrity":"sha512-8zGK0Zo4iUo2XAOFzZeO4jIZ4+UqSJ0QcuvLcm1wK7v9q7acg//NYbC6mszteaU4Yj+07eo9RAInu661h78HcA==","signatures":[{"sig":"MEUCIE/EWvf1DNBJNhLC3qnFmiZMmGhjxJ1OlFkBWPSsYRXSAiEAly4yuCiWt7PNmdSOncYk9COUtTSX5Qc1lJPssrzwBS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8e0CRA9TVsSAnZWagAAvSwP/iKdMbfivlKHq5ubeo0j\nkyUKRk4on5D6RuM+micbFJv9/9bDG0T5/01H1ziQvoDJZZ2vjsvL+4jS+S3G\n3wYfHuDAIWcuBNdrflCGLxMwjsQ7ak/oRZyiNa4lgnGbhwjVur1/XwG5vkqz\nguJJT3wo7Q/GvTrafuS0a49AO0GmZSvI/fAQ1FhFGyhslbjQX3O5zEbNc4+l\nLybswajn5LMHO7lb9VsRywT1gtCQgbRVlNA43sL4V4JhY7L0SaRgFrS60hT2\ngDgqKsxIO2O494UPyvbFY4e/+yn92frxtCI2Y4YuqFZEJtlgMn09OjKOXhg9\n0mVGAtAcbfi8pV7pQ6UPnq3ETkCTCIAG7EfOWbeT39GDXzkIFeZZl0L5ndQ7\n3nl/dX/yGa2GFCRezSL+ydKkZMbDE14ACjRk9b299ooiWiy9whI6PdLQ66uA\nLCQY501yDr14UJamKMij641o6pWdgm9LKN2/x79EPXR8lm+hmWVdHveFIPfO\nsg2G4HUEAng78sHR53jhwIf4lW5CAV/UsWtV00v0EXx2R2eQdUFQUxi/Tp34\nu1NUORyxDNGOz+CaWrYvHhw2DFWL3GNaD28AJCBsJCbXl1ldyky7J/7AyOBm\nYLrZLMK0xNP0yHAP30MNhW0hX4LDS9JwFZyC9qMnv676Y9VfIe6JA+DCqQQG\nKG1N\r\n=uLGB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8d56c8e7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8d56c8e7_1546897332058_0.8215658415980553","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d9b3997c":{"name":"primer-popover","version":"0.2.0-alpha.d9b3997c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d9b3997c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1ce7bec869976824130ff6c1e488808ba70175f8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d9b3997c.tgz","fileCount":9,"integrity":"sha512-qyEdNZDCOODK/9zmQMe8OWipdOxOabj17xXSsjx6CJ2h6mQRQNV3ggwzmzo8+aE7MmIFKHvs5PjTaarYf1yWjw==","signatures":[{"sig":"MEUCIQDSZ1QK7vruFZSPk267q6tYPfnDew6qkJeZlDOk22uZ+gIgE4fImd2UWNh5wI8H2b9BEduXyDBBzu9Si0VhwVkRpvs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8jaCRA9TVsSAnZWagAAIa8P/2xYphDCguNZVlQRz45j\n8pytOU4pBWzG3QtwoqlKeEoLI9NULYNIgKLOv/g/kZ8rkVzknRtT3vPwY4ju\n34E7BIZRnOvSmpQtSlui+cdYerDa9PmUjZHtoHnPl37osNG0uOjbO/mGY+JI\n3VvjkPJNd/pwwOYdq0LGyoDt2VrzAop37D75z3IqDmt6d5xQ1KARbdGG6d6C\ndpgELC2ZwdWdCdzUedjpJGH3quuAhDMCfnbvtcfIePB42ofjHvCPil6/X0S+\nplusSodnFFl4EyUSLOieJE1NZlWerV2AOe9V6GP2KFU5DElwUlc+u2cEOMEG\nMo583FaU2hdcfuK9S6LSB0NBwS5HHMcnv/nnsBwQs8gf5Da/aUlwFCTMnCMj\nSH9Rr2jvwRMFzkLsL+oRvql1EVVE+bil3btX1gahqonIea4ik6kAXCdQHRa0\nqqK81tHfCEJa0wVoU/SZVBfJ+s9W1HEP3JpU+7xX5gT4/EXEZJfntQgc0Fpr\ne32p5JDTgjIsIUkVpKZouKavQQLEoa/JjsXh2+/p8S3e42SomzjFRSGMnQBw\nVLJXs54rRz441HmJ0rvcKMOl+ZrlpZlQH1RqX9/trr06bFjwyPPx/qk3AU/n\nhW4z81ceL+KIQ4+i5Q5y3K3WA7ciFTms62PIA0XSOMlEIEdudMrVpVvs18wM\nRylv\r\n=PQnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d9b3997c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d9b3997c_1546897625501_0.6992539604600596","host":"s3://npm-registry-packages"}},"0.2.0-alpha.da3ba6a1":{"name":"primer-popover","version":"0.2.0-alpha.da3ba6a1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.da3ba6a1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"950793419da9779f8224506b4d4d77b8de5828ba","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.da3ba6a1.tgz","fileCount":9,"integrity":"sha512-Xx4XmZ2fYwVVlyVJE3fb9EaJfCBdXgZN0hVnluOyHhYBUmqhYgLGHO+uxJD8DAw9MRMadTaBMdeGDkZJYvFMQg==","signatures":[{"sig":"MEUCIByQrMROBEKTLY/aLZUu5JQAWv86I43nU3imlj7pMfBYAiEA9Bd60OvT8ceKW+wYrMDmklV0vk3+eTwmGS5KpmUcevI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM9VKCRA9TVsSAnZWagAA5osP+gMhF7iR6OFHmxcAV/Us\niOIskD7GySj5tg5cEvi9M1el+bHcM8SuAHWfihK+fO3NhIbBiA0jQpXjLUSt\n1LUKGJBAwqZVxASt54yTOE4VlP2lQ8UwDiMSsjGFDbB66WbxkqxddzlTvSxy\nTDxXe09Tq8vbQiuXn1PneEVNOxvdj38nXe7xqH672nxGWX/gCXWOFKbCBc/M\nvg4UPOEQyHRXWrwIzaEjXOf1K+uCFGJt8Mv+n520cBnvRQnZF+6fwRdSzvmb\nDXM4BgFs+qGxSRui5ScBwDQTFtIyvBIK2dRgu6GiThc0K6HKPOl0fJF0GDZF\nRwEUlt45qcF1UA0tJqcT/WwhrSGtWqXcTzqCcMjIZkB2FcKcXWaiTf9EkXoZ\nbckDb0XPfrGbZ2qXledCVWFCTuYkvu28j8BgVRwn/gJrSvZbInzHRy2vCtyF\n6GeMWltw8+knM0LYxTUO9DaO9Ymvmg+YrX7ITnEg0N1D5me3ha/85ROA8V+B\nsqXi5xnMfswJGF/u5mHb8vXP3bRJ3Bjc1meeaU/jRklCmNcmEvCBUYktX03p\nqqXg7nVoZWQ8OBU7fLfan3RafJeqCkfnxo0Sb+dqyJNXXy82y/L4C4AOi6fQ\nC8b6jgbCsMAekxHM6yvhhBQLc9m2WX0La0mUCnl4nBTghQZBjJEuZvvkFzGG\n6gsl\r\n=PEEK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.da3ba6a1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.da3ba6a1_1546900809623_0.8765425291531337","host":"s3://npm-registry-packages"}},"0.2.0-alpha.426b85a5":{"name":"primer-popover","version":"0.2.0-alpha.426b85a5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.426b85a5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e4ce67edfbfd453fcd6b824603421109aef032ce","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.426b85a5.tgz","fileCount":9,"integrity":"sha512-AHb8MOSGC94402p69BKJOQTNOXD49JyqmAAOwEnpUnHqrGIp99KMXMjm46lB4d3p+BYOKUn5lad1C1y0ltwfIQ==","signatures":[{"sig":"MEUCIGTgNhYdLjRayHq6lcCXkqGYs6f60LVy9BnwIL6arJlUAiEAm6k1sqNMpUaxQjHyrP/3v5/M4C6bBXso+qFIlQSRjRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+A0CRA9TVsSAnZWagAAbi8P/0eYfqMsUf81ZMHgkQ3G\nfWFm7avM+4MXwZUL/DP3OBKuXfLlhy9ouRpadAMdyne6lI6ac3ElZyRlJMw7\ntsrmVDNBJ5Cq8lN9EH0ViKKMNx0NxXZjuFuxh3ggPtYofYaYw6fWeZswwXv4\n5K2huFNL+fQ99zZGPQjUQvj1cjIRTabPaCliRpJNJBCUArLbmBkFMF6+KPWf\n5VSVrLrWHuAclZqefih7uOdvdUs2hy7GSKMtRDUcRNIGgKbG88UX8QcK+Caj\nE3ozxZQBrnTu8jaJ2cn/dH0syMnRIowHe43FywMJ9W59hhZyTvZCE7xzgxqG\n7C21nxr1FcJyTTX/Z8V+KQgnVxKFKTXiRCWMjuqeLbv1M2gv/2P1P5fCO16o\nCxLBhBazKv8oSQVFTLytn7l5nLD4K5Nbu7LbJoFIEjeOyVhnFEF0ol0xPEL9\nino0J1ds6U57p7Ilj1wl5Gqe3G/txVSL5psvRXDIfmZr7wiaafJ7qOXEhVk4\nmDJimaKtqPXn0CfbqSOefLEOBdyVt2azruPa+o/Jw19iRMqJEJNJ6++xzXwD\ndol9VAyjdwm+N/x1xqjyz018uEAShPBwYV8hu620dI2IeKruRot6/CDoYa5f\nq9n9haKaWYa1b+P4Qolv5iAmhWwHS8/1xKfMbGKv1DVv/CzZ3BsfvfEAY9qq\nlCxg\r\n=WiJq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.426b85a5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.426b85a5_1546903603681_0.5036609878743217","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e7c17f27":{"name":"primer-popover","version":"0.2.0-alpha.e7c17f27","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e7c17f27","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e05629ae9ae11eca1d7f2dade3045a907ba3e9e4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e7c17f27.tgz","fileCount":9,"integrity":"sha512-VTO7L/H2T8+DsA/05446UoNS/q2TxnVyUrTe4JcaKUIOAlyLxxM5FzsS2muz0wJrQBS5OEV8zFxGnsgv1DK9HA==","signatures":[{"sig":"MEUCIELzGaVA/LDtOle/YP1ztS6dMp7KCYuH7Th3nE/aEC0OAiEA0fxG3rdzcLCztez82oJPAQ/xlL5Y/uvwj/RLpOlRcnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+P1CRA9TVsSAnZWagAA5msQAKJrG2fBZMbquO0mjVzr\nd8Q5kcWxut4ABIbxAZTj9UBZtiPbc9qP9z3Ac1S6cT9U9O8eiyuIt4dvP0w5\nOaQxD0ahDX/jtzVIBUyggfTO/zAwvnLJ/4D2IW2Nt11fYFIB/nufogIP+iK6\nKCLM/rki2BMEvXQ9Im/c07+VMucA6lNFoYorb3+KgLg159rFiMCrU+7OpsHY\nLXP4/Q5V7jvaOU9EBIBb7RnxoxzSQ191KRp3L5OeHY/pW41IF5pwxoJEO+kU\nt4wjKBt1JhZYnBicdDB2Ij89+QWgNOp2k2v0wj6oHLtv+O0fyBG0O6RMf5DD\n/bALRMDUMZtCma7wLxYoIZ2V1yyoUPo3Ppj2MscYf3lHRverTZK6FjziiglC\nCNoXqO5j9624y3hdbDHv2JeB+XMr9VYsZhCH+n7ENeAn1pRFsTIqT/+nWDZe\nCJ+Qre8C75Kx7Rwtg4pRulFHDS3hEqjvODPuVTUpoJfH/v+oql6r4MiG0zT7\nr3Zub2JAIhNXBsxlIWOv2n9xn/t2pgytBvpyYnrCHtuQrsTMvrojyrNz1qu5\nWUq2ICJzhYBpqD+vnH4kgIS363rO6BJ5HefcGA31d8hKLnQ0etGOB4Puacfs\nLEArsDXmve3+A8BDIcW/A4DU2KHjNNaxbguZoB5+g9mUhaQgFvGfWYzblDw9\n90+i\r\n=p5IU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e7c17f27"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e7c17f27_1546904564349_0.6796757106935023","host":"s3://npm-registry-packages"}},"0.2.0-alpha.eb2780e6":{"name":"primer-popover","version":"0.2.0-alpha.eb2780e6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.eb2780e6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"284cef2e5bd33fb661ed502d551ebf2e90226bec","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.eb2780e6.tgz","fileCount":9,"integrity":"sha512-qla3Hd/sw12G2YZuPDS8sj4fp4LtFmY4gVR0GOfj2+zXaTkHfjYo7o8+ypAxs2BDdQ+JY2c6nZc27t0dhQSEMg==","signatures":[{"sig":"MEQCIEr3WgWm8RC6CPLd84kk4uZqAYvgeGViRYu3cv6TGZk3AiA08tisMBvMJH8HKZZQ3LHf3ulFrpWouqU1b68HlefJvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+R2CRA9TVsSAnZWagAAQnIP/j1/G9nybfXKpEJ2OoLY\nQE1/b/iCPYXWLL2n8iO1YhBEcB1pbHhJNJ8BbTt4sGw0C/P60gyzL3OHTsgD\nzPlf00nMThuPVw0a4VJf+WUVybXliZ5HI6ngK+9V4DLlSfSHYdTac+FtBMZ9\nab9jA9k5t2ZM71hmN7LLWReQt/dHol8Lm6Ie0u/V7910XTV0ivKfmYd1rxp5\nXRfVblXIDNUyr9dTfyoPUDD809zrBRDx+6byaUZkygPjwnIHaphXIKfRXNC8\n8eRqdxkylyUV2hMMYNhx8rHnpEzmrM5Vq4RNwyTgoFLfwVhovIlauP+y0oDa\nbJ60WObU3VeawSH3BxiFnmXG6QfkOHxwvz1oXoWsLv8QKaIfDanwwwNxUDt6\nGojKuvo6vbgw/lh73RuxG6oZa+BlPghmyCYv0pYvjPOsMCy1VZ2soTy6VvfZ\nTZwmtYbmdA00lyWdwGi9mGbD9s9SaEMx646z62kjnXClWGn5R4HLm3rdAu7/\nDk1pimc5NE6yWzLaaNQ83TN2Gy0ebPSIWk/8zVYBF9ama8CtzhkAmlaSf2Im\nZQwMkVHuNm5CYiCRBCop184p645xmm+J+RzonTEUv1L6cVSVORXr1g3iH5Wy\nQ2Df0uzBAfmS4boE8UvKx2M6zzqBJFhwQ3b7Y3tOt2d5IVpJnJiaIxJCno/3\nvakl\r\n=/KUw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.eb2780e6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.eb2780e6_1546904694266_0.05730972980572391","host":"s3://npm-registry-packages"}},"0.1.7":{"name":"primer-popover","version":"0.1.7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4d09e8e5af448fcd928cd2295e8f70a61a910784","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.7.tgz","fileCount":9,"integrity":"sha512-zyOmliGD5Cy5An+hH29siklmbqJQh40wWaxGKP7AGFUAH4YdU+vnRbHDjcw7EUemeSUD6SOdw33DmcHz/zQhQw==","signatures":[{"sig":"MEQCICGNH74qC8qDu1oGWGGj/GD3qbeiV7bF0toKkJCFFWi7AiA/OPQDFIMMofOUdX8PvZj1dI7WKCMbPBI5CdS/bR42Pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+TcCRA9TVsSAnZWagAAFGoP/RSb76NbfkmKZwHG2Eix\nSSPiJj5XsrIfCSZiXBbQ3r75fMTcIHiGkmcaCKGh8RI8F56psLyCKUwHJ+V+\nl+mCjEYbAqKUd+sCaHVaowEj0v699L/SwKYmjZ9f2ff4qKpp19wNDUNisCdN\nP3orhSlU92JPhH8K6q5L1tQ4jB8sonIdZ3ztemcKh165xC+pFKDtiuw+P324\nSQyNN6tHnAjUpJuXfv4cjVlph3LflJv2Cr+eWFRfX7fR0XzhfIbnCOCJYBms\n8JhRaSkipF229lmZ0kL3p7locqbd47o6nPGCN+nCr2wDqjq4AHGsz6cqUOKf\nqgMJd6xEu1YzloCCvH6f5bB1HOhV2P6uruJDnNgdNIt2VCVU5thDzMuWqlcn\nnByUzsYswUdSOjty+lMWmX7FOUfuUfJiBhCZByJAMt2Tm7hNl7XM6r1r8ShV\nF/MJwoHp/8rzjDbTULJhcBh5ZXadwzVOJIqInsutukGElnvL2eYyF68zawTB\nK4c3sIz6PkQm+7omsADQffBR6EVNMwdIb7aUCIrH4Q9RM6vWGRMODvtZqACu\nhi7a8heCLzKHV9H3tR9IJtIkC/v88Wf+TXP5ZCxh6+C/P9IMF160ug3Wdw59\nNXZFkR01bg7okFuhlFCUW0g2nhDh4Qxwpw4CeRICy1d7uBHBCjRrMgjyO+L/\naJ47\r\n=82n5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"5.6.0","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.11.3","dependencies":{"primer-support":"4.7.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.7_1546904795342_0.5766976162874116","host":"s3://npm-registry-packages"}},"0.2.0-alpha.93f4e152":{"name":"primer-popover","version":"0.2.0-alpha.93f4e152","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.93f4e152","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c728f061175118c7e192a3a067e92a1f136ee221","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.93f4e152.tgz","fileCount":9,"integrity":"sha512-sy4yb93im55FrA1YHBkddRZMVDs7xlifW1GsFJCgsBWPx5LK6/kkqbtVg9mLapXgbSDXovzdb+bAuKZ08RrkYQ==","signatures":[{"sig":"MEQCIH2z36QRFSN8x/Wrh2FtaFzhYRCzB97CIIbzy94C/pk/AiBKv3ROjHM0nQ0EVa265FF3JhByCfBF9w7AfbcK5cHO1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+pECRA9TVsSAnZWagAAoHIP/2eUU7Eh/n4lreRdaT+/\n7RhAJ8XgdU6vL5vpwJtVFcSMqVAjo1LQWSyyrM+x42rIpOlp9KxJp0w2159/\nXzhHimJJ2iF8KDo/kOCGLzkWqGyP/yQLwX+hqcRU/hiKzeCGejZ94kh/oJT1\nzuoFG1vNba0UxTrC1tVqtOT61o2aXqSi6vPotnbkVGUz1/mY1JOdOGI6rcbT\n2/VcvyoI4TH1Z8hryvs59SaRVN0lO85znUeLP/ApZj2edZZLV/YuN8Blmyc/\nmv8DxZjM8YXmIQNRvB//jYa9im8oNX23wS3b1wSDauxhI78VfnwIMQFs0Lhd\nPx8L/h0K2lF3G04RsCtQwTlyhVrnTFHF0kcfS1g1bjcAaO6GaQC5iI9dTKJH\nC8SAE2fEkOZ9uDtXiXIafu3dbyzhqthwxGElSyFZzr208OD2ni/oXwsm0mbA\np/pLZpzvs9hI8s9rXf/iov2GP3Gz6LWQ0eMJIon8VvkJSCCJw+V0n/17zABF\nK+C8bUKqfJ6MRBEhYKlVAYWXBox3P3FAqIrJYwvBxlavpdIOm+N5mY+NEbK5\nXIPWkUNvDihnMjphq55BuAb10SvMdxx1SVVRIb6c9nl/BYWA1L8/4i8tsGJg\nN8lune0jt8G20pcEDTwp2HlrImeMS4J8V0DvYvL3tvYjClF/VDkUlwR7hFzp\nrfV9\r\n=2Qoz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.93f4e152"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.93f4e152_1546906179415_0.7574739741986733","host":"s3://npm-registry-packages"}},"0.2.0-alpha.82a598b3":{"name":"primer-popover","version":"0.2.0-alpha.82a598b3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.82a598b3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f19ed17dde4d8127789c961a2786b69930854318","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.82a598b3.tgz","fileCount":9,"integrity":"sha512-n11hODs737dTQUP5bD7OLfXKYkZtUHzpMwgcFpo8KuwUcwtN0sQQSsF6Vxk4D6DaYsxJUDHp7JfTds/F+XAVJQ==","signatures":[{"sig":"MEYCIQCHODt3eT3Zk7jOAoLtVi9x5IsHQDZBSKo1BuoZaHIWYgIhAI+rlO0ri1O5njhli19bDyDVAMm6D235St+t3qKHHakW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM/E9CRA9TVsSAnZWagAAsg8QAIDe7EVfhI8bF1HK7CQ7\nNg9CdSiOfo0npLevkxCUiUOd/tRx3dhnpRQVcYEXUBH3A2Day0opF4ckKzYi\nkSj/Vu6V3++Pl/2JVBTXe+8DcExhWaAR8Nk2/QhbWxpxgeV82OBLOFael3Gn\nL+EC45S8UWFjCfoDE7VnMCG28rZPJ4WBhDU2A15TEKL8YizPeH312K2Zgf5g\nuncPbSr69bi7p8A80YxaWPsPCLA5zkmQ+An35NnuLesbeetL/5iK1hEB7L1s\nhVktcOXQWfLDvQSzFq3HEPtiF96q013xKwHvfuMbRheFofzjpELBLqgPGgJL\ncy8sMXM99JfdGLyb+lua43FuD/AfFVQb6oIUk6urpxpTaNNJH3j3hkshjcM5\nwZOgGedI8yV3NufxDZu7TMNekLnSUzN3YpezI4iQv9thWa4433QutooSuzDi\nKlYfyRJC2Aww5VXaXLgutyjUm7HwSQRvhovd/RRrxCuD3kALsNu+PBl7IJps\nJTbjqzGJsoh5iKja1BwzJzserZfQAEl6akKBf+KMWYVp2GexC1vs4f5tvNG2\n0EMWP9x6PahAMMCV74+zBPBigec8spn0zphdgunRfDTlOHFn8VJU4TrO4n3o\nPKYGrtPzoFe8GmoCQ5Y6gwrwQECd1R6p6zhYAmQmtP+1bIikjSAwHqGbBFKd\nHi00\r\n=7qay\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.82a598b3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.82a598b3_1546907964985_0.14034544676867644","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ecdd8bad":{"name":"primer-popover","version":"0.2.0-alpha.ecdd8bad","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ecdd8bad","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fb8b6eb5be7cf52aa189eb66be0135c8cb284d53","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ecdd8bad.tgz","fileCount":9,"integrity":"sha512-FIMy/Tb3bO+VP+Vh1TPWbei8LDXVG+HyDCuhIFcDARTcb1Y9V2WR3X26m7Hm1+WXWhZqWMpNY4tELtFyfTGMaA==","signatures":[{"sig":"MEUCIQDB+SEaCTTL4u7d5viPyxPmNe+G6fJ+4ewYroQfNZ2e4wIgMmbN7b/NFfy3QZnRNPAWGs2pI8SpTAzhgDnwFKDx+M0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM/NECRA9TVsSAnZWagAANpkP/1eaThYkVQeM1+ACYqB6\nLBDxhw/nzOz3y1pUX3iHnhuDVmNNIgcVKSYRE7UARz9HeG86JLMMsZzY1lrl\nxYbqi4Ep5juRaKiu173zGZAXA5EXPU9ctU5MYWscDyo+US2u0ik0oUe/fVeD\n/1IKoJxTPgT9choVxZFU8GtuobPrNBl5cnZ79gNjMsT9m3ywKf6QvPg6Dokb\nImrWtQVq9Y+W4nQK1MVgZ5j88VhlXqdYtTS/mAYJ8TL/X4vv0o+M25RaJyGH\nKHggqwPcIEIvJK/omkmHk2pJ11gBE0AfKrhsfuC6H9ts3piz4nmHXlT/XvoW\nIWTLmz6KI0zb+c7qNzoa66e3uXeYNBot27pwVCu0KQSGmj6ibIAs8VPT4Xac\nO3zFRbxjAEV0fOjdws46A5HSk+TCSuZLApbMreYJoCZ3oYw/SVueU1d9esiW\ndQ74qX3JKBWdkqD3aeJazC7+BGCm+5eODhjS5td+vYilGi7eCjBbaUMXT/5t\nq4e7nmpilkyDosRytwghFsYfdcwMLkKa9g0ehaxZAXO4jlTQ4luxq8YF+eHN\negfjUZf+RDaCTlXPrXD2G9vYS0qoTCl8uw3nfYSg1Acf8rfuxlGOUDA0RHVh\nZfwOh9qYzUO+J+hky5zUHtf8rTooPu23e+XcOd7d2dlcSDYd+OfORuPvHlPR\ndhYA\r\n=VCNo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ecdd8bad"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ecdd8bad_1546908483966_0.6803965027731282","host":"s3://npm-registry-packages"}},"0.2.0-alpha.50510ebc":{"name":"primer-popover","version":"0.2.0-alpha.50510ebc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.50510ebc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"77b1e72d22760ce6b1a695ed8a0b77d9bc30e6a6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.50510ebc.tgz","fileCount":9,"integrity":"sha512-VKgBqtyxVNW/xTcKURXZPLyMmuUcXH3xo3Wv7Ckc563mQBPxNzIbCKFYi3ga4nnPfg8nopNPofKTWISolgu/JQ==","signatures":[{"sig":"MEUCIC+HKCMlvsKdltd8qPWJ/IVjXuPh33nWZh9SghaFkS83AiEA6z0+RUxtuSuIs0m3jA6qu1iL4hVI/u6mx2eO5j3xDFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcND4gCRA9TVsSAnZWagAAi00P/0T+Y2CFxPYezFskHFAA\nJ+jBx+maFiOnsY2vl+NLfhH1nYjjmpHOyAhPlpl8YDt4hu9WWvUv+3yPJIzY\nNV3WutfdUMN8ws3FWfQqk9f1a6dOAwH8+SUUSjy5nxp+zq7y7lgasWNm4HW2\nZxexN28o0UajdKwNb2FtkBI0K0+NYU65NV8eSRIdyk06D8xGtHz5Q5PFBVoz\ncpMVW1O9cpnNciSzAnRwtUlS258vPkqJxDhVnCSvX9hogTV5IMW4Mq9RRXSB\ndzcX4HKB6/vfxotYQsjv4/onw/nq+uLhRmDJkb9CjhMSj3HiJZp7n9yEkQSu\nHa8O8J5sLeVNQcZnZk7Omsu+/RgHeWP9KCoi9USc2Z8K7II5fU/X0jKfxJ0X\nU2VfSP3B3HXi9uHKwMPNEhoOFuayO2PdyRNjDmyell0QeTquwdremXnCaHxa\nVXOGtLyF0AJ9WmRXzaimhy3eEjM/HrwgY9jozcancH9a4C7JuOnjZGyRoOpv\nDDsHz7ZuMmjJMBAZ2f5aK1kQmALL/Snvwtfz9e/LtvXQ3kdRPF+0Qxjwf8hM\n1YrJDfU1lX6yXlq+jU1uQps3rsggytPkkhlUuUYJ+7zPYdiIe/SPfKtZ0v2E\nex/anMYXJOdcLrIXF8h+TCWJ86kvXNm4oRGNA2mtx2uoKaHeIe9pRBKCuySa\nClDQ\r\n=fUj1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.50510ebc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.50510ebc_1546927647705_0.34334105030673334","host":"s3://npm-registry-packages"}},"0.2.0-alpha.f18919ba":{"name":"primer-popover","version":"0.2.0-alpha.f18919ba","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.f18919ba","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"67e81870ddcb71545a6ae75c5b4c91b7e0b64942","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.f18919ba.tgz","fileCount":9,"integrity":"sha512-1f293AZ4BkejVKDeOnIPorJQEk4CecNctR2ft9rNlkUfiGUaCYFUKJ32twvmB8tEiEyniQqf0RrZ83cYElFmVg==","signatures":[{"sig":"MEUCIGOYoT0rLqAbpqCP1XxehC0Pkiltj3KWaNWAzhFAim98AiEA32LItVqwGLk6t/583W8isKTFmnBruhoS05Mp3hBrhww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNOFoCRA9TVsSAnZWagAAzoEP/16fqq4i2iHI6YY20sec\nRh7bS+qgjPrQgsZhtLdIlaGojvCIWcC0v4QYjHigU690ty5gUStEd+BIISOM\nG65kLRX9k+aeuQImvxNrO8knpGk1Bk6rJKrkRaChr5ekfBRL2sYR91ebx1mT\nVxvtlxnfdYJhcEVjUkILgp7OS44rMoaEzgH5MlDulBTRpe1cKOR8N578nxv2\n8Re4Xye2pAxP2dfVBJXggudmpkrH9Zllf6u5al+k4NwhKWrML34Rf7+v5v2m\nui4CHJ0fh3Q0xhhRDrIqfLVl+4F8Dy9f84+RuBTf6XFo4YjWvjhnTWNJ8/sk\nmSYvPf9btg1dT3urSLFdlnTGbRa+Xduyu09YflNEuHD+UBcfiRgaqeqXkrr/\nXRIuga4qUnQVwTH0CJwzDO+/sl5Sm+hTDG6U0mHiE46dyRXWpKZqPltYf/4F\n+1e7YZcsfxKw0hj2IvwIqwK5knlfPh5CsMDlxrbDNjuG6vWmF8rSi/D8kHYe\nnfBTV22JVKkZQmlj8q5/e8UUc+2R1qfOlzFsNJTO/A50T8b3B9kS+pY+0gDf\n9BqjleHN9rapKLBNZE7q8lgoX/8SCiGiaW7sIOy1ccSctSe9bWIGHmT056tt\ng1dCtxr8eQGEQ4FfDSiYiy94Cri89UgDXquux+0KVxKWvggN3DagmrBbyvLY\nsNpE\r\n=eQ7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.f18919ba"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.f18919ba_1546969448142_0.07416389096577292","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c7a3eeeb":{"name":"primer-popover","version":"0.2.0-alpha.c7a3eeeb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c7a3eeeb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2b7a1fc7fbad3dc73c22ae95b02e1b2ff14cd819","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c7a3eeeb.tgz","fileCount":9,"integrity":"sha512-cBOmdu6sFJAZeDmYlhfzW0Yf2Tr+5Kk68UtNCyQcsvqezC/XuPg6hK6bZVqidmxnMu8AOtU3J1GOzkiPZUH7LQ==","signatures":[{"sig":"MEQCIGy2c5C5JYhm9X53q0Kcha5826S17O3v6bUyPm8IAUe1AiBTD9tpn/0Fk2HqnQ7RJo/ECiz3Y8KvtH/+3s4fR4D44A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNO7aCRA9TVsSAnZWagAAfUkP/jj9NmwHDZTN7OHSKCr0\npH4O1eosn6jQFo8fG4VBeZbvTLybyJMwzYa7HY3UJNVce6+XiD4fyIjb6Rgs\naytOw5QfHPKkX6pzuKKArwHW1TEcDMJJffw2e47Ay24pQMkis0d6iQE++SqF\nGqqccyj51v3Jh7VtXZbq+4FZ9QDR+J4ABQNSVj87CzdHdrJX3VTrntrOhZwx\nJdo8ViOvtcQGISPVkMzKtoYmWKmbvpgc+cQ3bDggCHWqo5Fsr9uttXEKZ+cf\n0JCzOX1h0JxYoIfZhn+LnmMGWqcReevBdICHdObDmtRgbSvj49uNqM0M723C\n+byVVpDq6V4l/wZaSzjvUrcn/I18+TdU5aoiWW0QzswLYn8/RaSIc8cF6T2r\n9So3gQVOX4SPdJBrsG6RWS+cWLUVTJpGZf02NDJHQMF5cKe9Eb/rQhhnNJP2\nbBaSat1Pn25dpWlXIZOuS1eHSskCeat2qvZa137GCkiKAQxz8SGIelPMvWqC\nFQOLXJUjyfFBTKhuKbsknMV66e93MW8w9riZBofax6Q50Bh+ghBeBBVbDhps\nIcyg4+ZOrvw1z61OM359/6gw5xGJv6D0mv/iKT7bjA98Wixsre417VjCj3Mw\nUQsDUUItmPzxz/CTbNs9d0iyQwqv+lKe337GiFPRq27IQrQrZMwcfFH9Fli5\nQP1k\r\n=4ZdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c7a3eeeb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c7a3eeeb_1546972889401_0.8332126710169887","host":"s3://npm-registry-packages"}},"0.2.0-alpha.950bf2b7":{"name":"primer-popover","version":"0.2.0-alpha.950bf2b7","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.950bf2b7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0f0a29fa92d50b0d8d31ac1bf8c59103d5f67c6d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.950bf2b7.tgz","fileCount":9,"integrity":"sha512-W+Z2q582QtUTLfTus/ILWXc5n5WocI87r1R9g1bU/Ii9Jad9CW6TT2ksDjAyQ6sK+wpmCu6d8aDJssJMfnnvsA==","signatures":[{"sig":"MEYCIQCXWOnOfHO+e0zmcHb/x/YR2ad95yy3gI0TjKGnDMQjHgIhALFhAJgF9G4GHzHeLxxCRyiQYJxGu3MfDZClmvve1Qtl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPJPCRA9TVsSAnZWagAA5BQP/RUEhzLCZvGBLgCwxGjP\n6+6CqKG4pxK0QJeJGGHspY6vYuaf53C04DPwyX00y6I6NB7x7ZbIVdmoSMOW\nEayfaBT0M1Khz4Fv6T6pT+4q8VeEKDCiJt0o/kGuDSLMVfv64il088mDoeU2\nWvzXRe1VLz2pH3ykP4c5yxPidlXE6R15vHXwyRiXFggOqU5X/Gn4qH9D2q+z\nafHzvmUv2Fqm1TanuV8R1Di9if21jrvZ+Njkfu2RBkkaQbs/y9r5YGqZ8iA9\n56/j6ENRWnxesZ8MFhPisqZ4Iu9zpNOcFpFKbeCqcZSeT2nDxQV1jsoIeZ6O\nBpxq0GmxWGqDF4+v7PZfvjttpUbO2EjvU9o8K9LmexhLVO7kz4hUrBWjAmP4\nPIST9lJBLV+c+CXtbiKMxzjLiXbzhpddIwCFXwBmlrhMM9RdUSko293nwmdu\naU2cQoAk7uqObn+PvV3S7gVoT12cTSdmc4D1PfUf34d05YtIgGBq//BtQuuV\nLG1cyHZaQKOl3mDDbMnM+AkkDfKPI1kyB84JfZ8yPE/5RqXaE55vbrZxqmQW\n4LY8o2S41o6P7Zv6kbs1iZDHJQXBTjmFbU3W7i1pMoo4aRv0nAl47bYnmtZ8\nbPRMRS3yDritUs0M8qPu69BFkPtPx8xcBkTHFDa0+9ko/XLsNn25jMfeo6QF\nLcAH\r\n=TjpB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.950bf2b7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.950bf2b7_1546973775164_0.8064491098002207","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7c07cf8e":{"name":"primer-popover","version":"0.2.0-alpha.7c07cf8e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7c07cf8e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f9c01f1bd7e0eea4c1b2a06cda79330fc03a1835","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7c07cf8e.tgz","fileCount":9,"integrity":"sha512-03XPePtdDfxkhdb/MbHeX0PegGhw0UjcL0zrhBRY8J//GixrLGNGsMo6LAfGXQYF7AmawSkr0+8GPHl8qLpruA==","signatures":[{"sig":"MEUCIQCakQ0NwhDnzDYEqX6IQ8oC6T6E+VB//C7XhNcAkviJYgIga0W6TnS0SSTwaLTB3DEUNpTVavttb4m7ZSF32m5ZtBU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPXLCRA9TVsSAnZWagAAYxcQAIPvORTkeGXhy9Mt/SLL\nq2O/bfiYRwarqEHCjoiO/MkB+9k2MScVm6NIp3wrz6mW9zUl9088TBd2fBoP\nfp4AZ4VqeVPdg8XODxVu4/TgYHq9d+ieWmXwIxOYbs4QzXfaQZkWmZU0h6YS\njEmZkC1qJN5WZ9ocS11oaNQORAbqnYiFVneDUj1NdhVqb2Bp9h0Kspt+vr7i\nZdX3OTdqUkhW8YutUpnYWBsinhvkFMdBT30N+L/VfRmZt5cJLXK7ZyYyWmZV\nF9UdBR5s77I5JWqpyp5qUYDJkYSzokLxkYZwsaEyKQ6a/zRb6zQhHD6zAlD2\nBTf0UP2Ltng7J2EZQBwVNXNi6bujnj9hT+WUDcnEoLVcYvBY/Mk7HMIzgHnI\nof4zilBHCfzOkdN69+mhGXLTai2L+JY7b8DDoECny7/EGL/zWJhNx6Zu5qA9\nLd+SGSBnekj6/GSROMqBF/OJV6VBsycSrAr+1yFL1IqB+9OALhNADdBJeXlV\nqiax7bvL4M3MDSjPqLeTdNEUpLSyvkyeAWhUcM/PxODjJ2UBVN98AN3wE8up\nHqj6aSOp3Yw5Z7fBreKNoAyBLkDoNgnV9T6R5BCa6bp9WjeGDfs82IDT2rF0\n34X1R8N/QQ30FnB4JsRw277dfB2/uc/PEeTF/mV+3yGLx3c+ZzElN85CF2iT\n1Pp9\r\n=Iaxz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7c07cf8e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7c07cf8e_1546974667109_0.7150758359445599","host":"s3://npm-registry-packages"}},"0.2.0-alpha.076ed277":{"name":"primer-popover","version":"0.2.0-alpha.076ed277","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.076ed277","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5fd708207b70eca1810b038d9f459c14659483d0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.076ed277.tgz","fileCount":9,"integrity":"sha512-yFHuvlwAn0FP3I3hCk9ngvcDytZ+0P1Q+xRarxsnbYunAhtTDEgOrm7etuAdUJp2w5S0m/tSnpW8AdJ7Wwdd1Q==","signatures":[{"sig":"MEUCIQCM97yulVw8kSQ+olABqW6i0H0OJBxsX8VqSN0zS6omNwIgZTciw7RIs+55kEjHX0Toq+0azxlin9tL4JU/xyathLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPiYCRA9TVsSAnZWagAAcusQAJi2KfAX976pM86CRAt3\nvXzk2//gAFhwnsXcvkX/UgIuOtVJczYP2NnttWf8e9DDdvTqe6ckzE5X8MYP\n1mNzay+SJvgJZeQZzcwLfk6bcZIY0pWrxP2y2sbDQCSnP7/y0kKGk/zxOlF0\neJdAbe0PRq9Hg9DuX0zQ1HM/YGO8GIRTPQ09LhbeRh7vJc52hql/fNMxulMX\nR7vi1SLGRkPsd0dKHBbQFyCqv+ZyYWhAdHpe4O2IUpCXTiw32+Mj1zsKBUnx\nuCfO8OJNOOYMT8OlYlkYMRylYNuKmm7A6Awh+kgQor7BWzS9VSQuLAlbkLy/\nmvX+1/6Qws9Cnks6rS7w5vTnJiCYTHMM1hl8jWRBw6n01LLl2UvIH9pnNZzI\n4LAIjPB28ERTs8CbfOZGmKOuqi00wcL0brbWKNleeiSJXTMf5d4skAhiLI1a\nvsCehLgIfq3l56RE4bPDcwRDCPHw2SoxK9SX5v1fkdXHpvFyUQaAe2QVwMLv\nPm2WTVHLMa3/PciIm+LTs+ezZI5X5ux572411MltZykUecvSCy2t7+YcF4sJ\nrx7QL/vFBG8KqkSV7sGAqj3TlVSYy9vxetRhKcAk8OPN4mGVrpOIy6D0I8Tg\nguTQLJR5pXW35ampp1FlQkZzQUeyBmH7wU2jamiP5XqP/kZkchhv9ilWSNDI\n83Am\r\n=pV+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.076ed277"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.076ed277_1546975383417_0.5289016521073944","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a4df514d":{"name":"primer-popover","version":"0.2.0-alpha.a4df514d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a4df514d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"95e1992954c6a9e83a3ab91f07317a04df428351","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a4df514d.tgz","fileCount":9,"integrity":"sha512-ctV40bMMtgD8OiHf+0g9cPk6D0dT0nCtdth74oPpU4ofcL8yPtIXR/uFvlwMOaAPnR8fu1ktucLp48rHcZuogQ==","signatures":[{"sig":"MEQCIBICUUTyyEb7k8J6gucXxdMMe/5RXsexhAl7VNC7p6ZXAiBa0/P0lJJiTh4Z9aU8jGmMK1Cp4QfRVN0bo7KdwDzPDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNQM7CRA9TVsSAnZWagAAnH8P/jo1Pj7cOkGFpQashPrd\nlyYeXuF7fTOuTeQL7tQ5dYLS6Dorx6h0cTTk7532xCLWXLIXOPEGnOrdiqBi\nIohLHAJnkCI+XtLAIEEcGnbi1DyIhPUBmTH4V/DK3yK/3u07gLhZmP5uLhBJ\nluYmqs/qpkBYY3pMwKO0vsYoJZ5z5uXtecBZaZMVkcmt9YQbHhxhw6OB2jxk\nmX/1jessSW/9UKeRjwTuBmKTV6sAtSm/rqOc3QglaGdW8lbxeEpysriUOxe1\nFj6imKWXzEiNDJmiutiNLisZhk3dTHSbPuk7eJ6dFWJhhmqMJ0uM1efC6vvo\nfCcN2pZq2mNiKlWpkBFRSJPLgSH/ThVth4NNQVRbthgBFE/YFHPOGwRPkI62\nRTcpvw5K3nrS2e9HsOZRR31rycGUoTprUwNsn7AuRPcsONnWSsril2VaPpGe\ncx5QNmVKw4V+JTr8Ur91jD2VB+cq99ObafPlWSZj6RCHmGbMUNX2LNyC3D6C\n0BSz1cdNVxhZm8eYFhLNQuAzbhsGAOSJPNgw4xNz/BYRvwsrPf2/sD+XHfnt\nGXoqQbUCWtZhWdpfWUhu4SnIRzMmQn3tLAQxcTvwxszdCqpSpZ4kuTvR+Ob1\n5dmRdnADNt0s25b4pUKo4cprBLOjrTMQiERurSgGU17R7uOgtqHvlsjv6+GL\npu4C\r\n=1BPu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a4df514d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a4df514d_1546978106833_0.3450987549263689","host":"s3://npm-registry-packages"}},"0.2.0-alpha.912f1fb8":{"name":"primer-popover","version":"0.2.0-alpha.912f1fb8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.912f1fb8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8a1e2d497f5b84687229c26904b3fa403580d232","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.912f1fb8.tgz","fileCount":9,"integrity":"sha512-67NGmVWk4xAQswSoMEC3dZ9ICYGTaXOHpPnsvJ9DRzequ+Gj2fo6t5WDeKzKnecmgUWa0fCuydH+1To84Ci8wQ==","signatures":[{"sig":"MEUCIGuHbraHu27mBuEJXf0adUNA8AFSshDxQPGyMWtFRXiqAiEAtWdBliYYVlUaeE1zpC/XGWLZ+u/819ETbyCMGvPH++8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNQNwCRA9TVsSAnZWagAAoukP/0IdwxG2giQ/k+wjUZlJ\nIjrcvSG0Q9ngLzTmzBuwlbgqEkiBvrfJIvMHHTbaKjGdINy7gzhbI2u/w1D3\nxYZsz3FnnW6Eix4DxeAWNsVdyXIoFBonGVQrr/g3UHgTO86GE5htbHd8cxNH\n7/QbjZ1HHpssemT0IxLuH5R/OHpodGv086RIRO4T8u2QuMHwro/gm13WBDIe\nPfxJKfyY89G9msKTNR/WPa+EP6FnWBnZd2fJXowYhN9+Sr/c8FqUAziXSkuR\nNLoVpgmO4Ihdz39pCPkR5WnWpPETonktEad4RWdaqrgzGW/qNxDlc9mOA96o\nYu8WBrwmrg+PCpezb2KUG402yRrYaA3a4RYqPIpRu5SzpUEHCp+G/tvqbN15\nQ8y2qa1/ACc0z6i+CZEtMuYM/pJVQ2Iz1di9Q30d2b7rtpj6pPdOSY9yhESH\nW5Vieei24CXGacyUHfNQAIglsBrZldH+E9B6hCb5R2Nus9zgTP/YyUWMt9M7\nHYGz0xZq9TNlKifw2BfmA+tbXrFb/VXU4JgYf8HK4RzECEgZXaK57iOUFk2a\nRpTCqKtpJycQp+xjr2VhwE/26sPoTGpuWCoqkFZTJT/cEIB32qArZY2VOBcF\nSjy8ijb8pj6JOTcvzRvMq4TZX4uoOAAwJhKdAy2i4vNcgOnyz6A+swvGRCrt\nop1I\r\n=7txL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.912f1fb8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.912f1fb8_1546978159701_0.891826646577875","host":"s3://npm-registry-packages"}},"0.2.0-alpha.97e04ebe":{"name":"primer-popover","version":"0.2.0-alpha.97e04ebe","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.97e04ebe","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"61003e3f97c49a0d322e9efc122a24160dc3e426","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.97e04ebe.tgz","fileCount":9,"integrity":"sha512-zVsc/1un2FUtUd6bEqg7hlJU199WlqjCy9uxyV7ohJLfG6lnRg8krQY4kGeG20sCBPvwMW8rvWH9qAJLbAy5/A==","signatures":[{"sig":"MEYCIQC2z0TQ3BECT+2kVdW/fQ7nQkSY3G4DtgRMtKoHzNk+kQIhAMrZ5pt1swyRI2UQZ+XYrxAC4qPo9uAv6Yjf4oeB6cEA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNQlCCRA9TVsSAnZWagAA3i0P/jZ5/ZPHXEqm1KYv2OAZ\n0woQKyFvg08OSBThTuv4Kxw0/IdjzBrjLOcSAeGtfu3oWFdg8XTIN2wlmyxj\nj1RH//SfKs6onzJ2KVBAb7v9ZLSbWEi2kxbdXvjXUiqb/f6L5SoW6TOyv0Y2\nVwTO5V9EiEJi3qPM8MOJVqijr0h1nHHE5625d/OWFKDRlnqMlluDPlRKeaor\nMPIOIbwBHJ+rZePu/xEfBrXhOKdbyDjxUzi5MK5x37ey8EO8QM9KHWIqouWz\nhMr65EPhwBgeLKsUmRucV4hugmxyYeumP73nSp0XNAaUqvdAg4q1JdWMnMw6\n0s5VcNwScbaUv/Hse7nO85qJbkR9LW4Kj5SPTyJbLzzaE8rw0bxRccq8EVuD\nVW67ds+sXHJh0zdVwWkgy1qJ2BUzexAYrJY9BDHBJDTLr+1rsdYuzd9VNkAb\nfpnpOet1wXRGtW8kgnTCzGfnu2n9Dw++7lXp53TckdbwIvyaY5ev2GxKiZCi\nATtAMnMFcJmzr8gfMnjAMvuwEb+CQ6TE4+Cmzs8IjNdGMgPSXvpLVpHLjPqy\no0kcSl3xjTNicpYVzV4sZ5jw4urZMJSCLRvqntLJ6gVEp9OVvxRMwGaHyCG3\npmNQXZ1GbzL7OugTk+i0efVrT4+KwUGR05TGqg6YfAInB7iSXTWI23T1M0uV\nbU1L\r\n=L1+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.97e04ebe"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.97e04ebe_1546979649769_0.43161652857594235","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1ed322f8":{"name":"primer-popover","version":"0.2.0-alpha.1ed322f8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1ed322f8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85125cfa913d897f11deae4a299b3f71224f688e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1ed322f8.tgz","fileCount":9,"integrity":"sha512-4HNhyZdDuAMBRdbRK/SD56DXlPq/xVtZu7SsKVc7l7jcZqabRA+jaXniJl+N/FhxW7Oe8MC+StNh+n4wEStlzg==","signatures":[{"sig":"MEUCIE3CR96BeMAeInnu5A3e+XGDVVFxu2KUPCvaj+vOOJxZAiEA2MqW/wY3qVF8HIFvFRZ6UKwijr2P9HMS2wyamdcqsQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNRZKCRA9TVsSAnZWagAA5FcQAI7hsn7/2Tn86fVKf97B\nQN099OvwKaNkI1HKGS8L2aFVroERDWtnP4Cq2307DWxO9z4iXx1/W5aFtUHh\nxhNHP8yZkFmUerUVOZ/nw+h0bgErZj2WKQNXfXj2Ekm7u6opIao+Q3zM/obc\nqDYWHsPTd3VIFDU3SpZ9o8sv6rRiFiMuqDlxqNcE6PhiKo5WrtkHXu40u1q4\n4YSiAo8B8dFD3iGBMUPl/xFL0fWQUbQAUB2TjEM6pcA1vZfLpd86rjq9eFfF\nlPSxh5QuQtjicu1Tlr/3S3RVc00+fuqWUGl0L3baC7ZJpCHs8xfiACJUFSdt\nzFAGM89jgCYkTryvJkUfIgV4jbMD13CfVms2VVeDc+Jo9u2W9u+bnkHi294q\nfGnIatBxwUtqR91H7fHu8KNPdfsqJc7JniiVuKpSZsww4Con3yh+BENT+pIs\nTXaTkH6z/Uu+665A1NtdR8ZaIkHuyI8oAyz4LDP5bVL4xCbR6ZVNWWMCNYIs\nyBYSDeDYwRTe3/ux//PvLMUH0kxzqtx+42vV3aCcZodFg08ehCljpdQINw6/\nHyAwmlMrE0izC/9xxtEQg3Zd0bbm6IBJD+F939hC4Djgi/1AqrMqO1f8D6jG\neRH2GSBSj2u41h03fDfOgT9KcuA1GUVTiHElSkbZGV8cOF61YvDgPlJ+4AzA\n3n61\r\n=guEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1ed322f8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1ed322f8_1546982986039_0.559310681389338","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a8d2d06c":{"name":"primer-popover","version":"0.2.0-alpha.a8d2d06c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a8d2d06c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"da6c7eb28ade501ab827fdb6f79319f499d80aff","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a8d2d06c.tgz","fileCount":9,"integrity":"sha512-0hBtOZ72o+O2XBLm/Y1MCiLfYq0RqLTKdZPZBh0Hh7gLoniSK9QKQDVmMwERsLngc3sUlf8C5CYcLfYvl844fQ==","signatures":[{"sig":"MEUCIQD+4GJPeRNX7llENCeN4vPEtK50FV485OLn4dSXF2FboAIgH8Y3W9pwI/l8CsDTdtYf2i4iK0rGDDS7gpUXPvCZFvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNSilCRA9TVsSAnZWagAALjsP/iVebJNMkeUxrvdhcNjf\nqAv3vvNorhL8Uo8l+uyzBKQyTpefJdtRR9nwmnCizKNY3vqMZnGWlm5n9OVh\nVYuEROSPH7yeOW2ZqrUJjap8Ee+fpkpuoAwOjJrLOlolUstBTbq0m8D8y22y\nN10k8g0JIt7e54nLpZromXBCNoTGdg0A3vq1M79RF+Q2JXi27vNLWVx6W+RZ\nzYPsotsxF1ZNgk05L+N/Xop77pPiLJqJijyLB35u52QN/+KuM2gQ3kEBFYdO\nSWBnsskNNAS2v7+VwV36nEMzcGyNGWhSsifpMs2t639Kt5vJ4onLPh2/fBfI\nA/2XAKhVCQzoTT8fkjDfJS6whaFvDyyXHNLyhELw0l9DJuWj6d9sHB9JRU+F\nFRz/Mk/9TYDSIsT/CLhgaMagz5ypKNFsNM229gI9sTJTHMR8B8aHa2zMyF18\nJWGjD6NhxMYqZTM4xIClwwWi3BdyOxv+xQu+QESrASvAfk3OLkSK4Uar5LDr\nmaFfHbj/Qr3i6fbBn4kP+dF1jmzDWF3zz31kuTKKrJYVF3txHbUkybmd7Tdl\nIxpHL1L4K3QUCdDI9NEi+QQm9gTTVCQcDMYvNepRXDVoRzfjRhO/sUHxWgEx\nDjyUF+T3c1vlb49gih5fP45/zYtj5ayqiJg7k38ezBUGuWqjGfqGv4MhPxXY\nXYcS\r\n=5RkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a8d2d06c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a8d2d06c_1546987684969_0.10356526662162202","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4ee73d2a":{"name":"primer-popover","version":"0.2.0-alpha.4ee73d2a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4ee73d2a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1f902fee281450e0f7e00688db3389e1b9a40998","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4ee73d2a.tgz","fileCount":9,"integrity":"sha512-iGu93J3xVv4mrnlSVF6YlzjxmHprVZzDgSm4dy72PvcEe2W2gY55wLo+74X2DOAJTEEnoeengyo8pKsIaGQeGg==","signatures":[{"sig":"MEUCIQCef36vJ4oPdnQu4PIt1VpjpJFL3IJaLisQ0UIxMNPAagIgEATE9+6uaSNYM+qjTamQVnyViAl25LsMm9iz6LQJlSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNSopCRA9TVsSAnZWagAAf14QAJobr4tr0o4NiHqLz1xR\noEHsjUu3K6fA2W8DoocE2Mz9o+xUFzhQWJcoU0NQtfjqU0EEZnjnZYe2eZ02\n9tjB7lP22v5VmhU2L+oJmH8j7MuMmtvcTexua/VInG3dH+DXs0CsmTJLU8cZ\neNYJ76mt52cgERNaQWNkHvCgKSj+/PhNLNKybheprZT2s043tcAQYyPef6y6\n/ntdmdzCkx2IBZs4Ir8VI1WxNroNTAxJDxm1R6tnu5NjouDcQ3NJqU4G4WhN\n0bHHv2iQwZrdeh+vIcNjxpXgugA0p4vv2r4OuuAS8rNEeS6We9s/52mSnfN0\nGQhr8jc4F73mAaUBw/Yi+KKITQnhehhzOXXiMXmFyhqZqYa5h23PjfKWQOOI\n5oka3Ou94ccNxOyvtCBxFfr9haeslNJpTEv6qxyA5VCNHfHlExcNerlyIaQ3\nQewDo0v15oG2QXU2XiPx1AayNxjdzRcaZm4BBmUy8183lQfcFcIR9OHxzAL/\nh9WWSYgS0bNC13ZX938BqOebPVcXV5Qm0tpuxa0jDoHuSjo7fWj1RziiDSSL\nso/6BYg6AZHwxAOWUVnuA87RHwZ17H74CaMTejkDayMBi8/RH8Z8tkoZE4wg\nphAFKlXC6+6284iFEGVLNb8WhDpRt74I0mlCj9IDQJT1owIm5qlBzW5pWCw3\n4T0S\r\n=xPPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4ee73d2a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4ee73d2a_1546988073043_0.8310246403226567","host":"s3://npm-registry-packages"}},"0.2.0-alpha.36125bde":{"name":"primer-popover","version":"0.2.0-alpha.36125bde","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.36125bde","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2b1b5017bc76c69f771d2b10a1d71fcdc383058d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.36125bde.tgz","fileCount":9,"integrity":"sha512-+RzPZc5wpP2ANG7ll6r2iu8Upf4SfDmN47Z+TiD+oQVfYv4CLS/I64nFfl0pLCiXAhs002Ocb3wEGcJD3V/hoQ==","signatures":[{"sig":"MEYCIQCftepEGkhkzwAGeRpuHdmITlhpFrOhImXfb0SeBEuwdwIhAKVWOXL6PpK0f16Esh9e56pyoKbc01qSXoVdbyTBALQy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNSt5CRA9TVsSAnZWagAAijAP/jBXslDn1bK2tkbrw/0O\n0IWwzHjqjNFk9YnQLT2DPirs0/VGSTusYuAhsLLMnDPWNuWohKE/sq5R5oIk\nKJE3roEJyuRsumPlRUC6Rz4Itb07odl6wsC5y6IlIpPpJR8hhFQBKeTCdfyx\n29Dh9ItX3Eg9KGRV/DLeOxNYKcrW3kjuFYa4Jrsh88inFitX6VS2quwtMeuQ\nKcMjJs4FSeoHVlQE3yHBAKrS6cLk068ncQ4oaiFQ/TCx0VrlE/sODH5LTRwq\nkq0lT8e4v7C4h292wlvSgUlTU4s9RKHROxyDrge1nkdbTm8q/XlwT9CfQ9cK\nmHdj9OY6al5s77yCIg+bCCm4yxwZZ9PLCN8+LdT3ioV68fhxchcduxyGDZV+\n6JDvLd0JfYM5C1rRnV7e85C1xyY6bdYdzn/3H1jVTSEUKuwGfLejjG6hTi4M\noRstzrw1L2atUtHKv0J7mVopUoVoMcF9jYrdRa1kv5OygHE3gAh43z5IoiGs\nHGZ8sti2iDZd+hiTNeIjIDfUM+bcR3XkLqiTfos+D8GJB310NLVInIek3Q2x\nOnFTheFL7nuWY1l8BKjcstycUcuWv0jztZCuaPHHhwZEeWixkeIyVAbs+VOG\nHCCZ7LyOf4TkjuwAMK9PDfZ0xMRPDfxPdbQSlSBklrER8TRD6sxa9/mNsejg\nAxkS\r\n=l+P0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.36125bde"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.36125bde_1546988409049_0.11448791400347336","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6a37bfd5":{"name":"primer-popover","version":"0.2.0-alpha.6a37bfd5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6a37bfd5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"124407cdb97bdea7b791f3f5d9b12f42ef9a19b7","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6a37bfd5.tgz","fileCount":9,"integrity":"sha512-Odx+UFzOYaQVC0wsc5KEJDZCnSenj1r5gqIXOA6ZgtWem6ytjE3/WB8xkbgGFn8uMRIWMNicb7Sf0AvdHy1olA==","signatures":[{"sig":"MEQCIFKl89aAEWv1QGm91SpABnA59l4KjUkuqZEWrq0evsmXAiBOUG1K4+k/sP/h4Ao+xMQaxqygJC+0p2fj8I4+09bnUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNUgqCRA9TVsSAnZWagAAsFUP/AnEyB8OLRYkSuOHEiYj\n3QY0TQLlzZZy/TU+8Qmx9d7tCuj9K+T3E3ifWegq30wYROJb0MsM7fN9DNMb\nKGVwedyZAeaAfIU61D3ZtTu44QpoiiZ5FxG3/IlDtehIDY4+q07zET5zi4ny\nN9xM43W8MbgsofiesOy9PryV5nsZQJoV5iU1l4/V1TGLMyO9Imw9zNhbY/gw\nap5MQsQqxQGC3KkGIp5szhIrGhDNjsP2hHHIQh9uwGdPlZAbmUREWgmj1bW9\nqY3zVM/F3X/VbgBv/1ZLIFI7oYNuMI/qIMfauBgsA0DYykz+J7wbSYoLmchC\ny/s5DZAFpaXChnFX4EO7BWcAsTboFN7EepLQezypQCRp1OFw8z9Tx86/Tu/O\n+UuZbmwslIs3UDhuJuRVsYRlK30xVFeL3+zpgfKXtwqPhzabXoQmyDHW67yt\ndI0fnbWaihmh09pm/cZqDkHAP+9V5BRMzM5EngSl8SM4dBRnmA2T0h02gw8s\n04Pupmoc6gMPfB4QLLHtdlfdiuyAiYZ5p12oS1MYyKb5wmdZIlL7BEXMzk0l\nTPSJd5xKfECh+jwcDRWJ8rjgIXMDCwypvIUKlanj5kDyIe6hK5NIjcW8MfcE\n90O0ND7qDr16J80pRcPyZITrJo4TKjBu6OjGLsFG8JzyKDoB47+rca5KYTcL\nJNQu\r\n=Ftxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.6a37bfd5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6a37bfd5_1546995753652_0.28599235545603796","host":"s3://npm-registry-packages"}},"0.2.0-alpha.35d6afc4":{"name":"primer-popover","version":"0.2.0-alpha.35d6afc4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.35d6afc4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d2e4dd9c3be02776aa87c6a7473600f948b46dd9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.35d6afc4.tgz","fileCount":9,"integrity":"sha512-Z6wfO5yQVGTx1/kzEdfCEhe+4pLpULlQcTqyyt+nBmpREXusLJtl7By790HtmTpr3A8mRpL0pKpqqMfWI3Fs/Q==","signatures":[{"sig":"MEUCIQDs9oYX8sy8LRk3ThEcQRPF2WnldGJN1hHW6Pd6237pmAIgP6J4tbNK1caVXE4ZBBBHcZKDBrRMSMe0cX7BAaeAQ6E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNUwqCRA9TVsSAnZWagAAaJcP/0hSWUswleUiYfQ2KTr5\nLlLhDut0m2Crg6Cxe0QESZiFT0jAxnk9evV3CbU7uO9g/BkORbXH3dd08n24\n0X3272tiMfd0VZa7BMh2+WTk0uvHcSRs4jNQKOBsinhULJLolaQi9PPrCyJ5\nPMEAPXhcmvLqBO4KNq72lcxPyWfZZUkdJXf0yVAAe7hoYdsjaJmlT6skZ8Jv\nYw3j/sNkbe0JbM0JuywC+USJp5ncWkieOJfQYGMVlMcW8bc4GncxMfahq9aP\nYNM7C2XlZsG9Rapwu5x3MsmOIKk+nE5jDaw2b0K7E+pGgIxWvwxkyMufcX+j\nsWJY8vfQ9g3rXTFoZenwYxvj1ieUE3sZqGvIA/Kxykqupr8dVjuiIPpOulro\nj/R4YjX6rbetWnKhWpCrqEG+BZqnULRQjNel0KOCGOKh+gzGZZDd7a0IsyLT\nBapyUS9E/CW8/RIiQ3vTuARoAjWl9mBydD0fLY85wFLmXYNTtLCLRPQxNZ7u\nzeLbBiDrZ8nmrfdgVU1fjilTvhd0OHUXRLJnOaTgonhQC/0VmNWBgxaKJ8vU\nGAgdUQDEgC1IfyVeVGKhd60TaztDMfbY10aJqWh5DN96KPWw+ehysMljIxr3\nZrK7RG2SFjy2Tvze5ZAmg/oAKfSyxcwqx5fvz3cHHA2qARItGGiPwGMMjduK\nCxZD\r\n=qcgn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.35d6afc4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.35d6afc4_1546996777349_0.4933283837481026","host":"s3://npm-registry-packages"}},"0.2.0-alpha.88be8a95":{"name":"primer-popover","version":"0.2.0-alpha.88be8a95","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.88be8a95","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"319fd30e587161f8fb2ae961a4cb7f925680865b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.88be8a95.tgz","fileCount":9,"integrity":"sha512-5LSSGFC0ZNu0kkJhHgo3lTTQk53E01jOm+icqXl/fQxw+cmWFQEHOEi1bu3JsuIdhB5u/mUvrJgspmYKXvlb2w==","signatures":[{"sig":"MEUCIFvIhXS5JSvInK33ZqvOsenVdYGm1AtXlw42lZTvqyRAAiEA7BvvrhjKRThuoIvZ22f4ZtqYxd9q3NPP1DLwQ12Y50c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNjjhCRA9TVsSAnZWagAAiyMP/REU5qX0ZTyUQPVWsKdK\nkJunhsaoxU+NVvpDrP2CQnTpo1CYL05WWOXFsy18oeI1VxusYDfpO6G534Gf\nsiBjXhrPJ4jR9UaxdERk1aTiGX6Iuiv2POCb2HzEGJUk1f5QV/ZGrXYhuvzW\nWWuMgvzkDuGpR+ga3/Jgw2ZBA+vdIwOXefZ4FXo+sLfITPmncU9dCIY31GfF\nGW6e+h9m2ag/Q8lHzviVHUGEl0o4qo6zpKeIaCtpzb7yw4wlpvp1j3r/rYn5\nhAyKF30sXmJFCk6D2hpteHSEDHY0SlBL9jsnExivlfMPPC0DEXww05SJ42zk\n+jNLRtHAMulWYWthNgSTPDfb9qwtyYl4pFVKo7KBWH2qpF9H2IOhjPXkIwD1\nK1YwZ5kJjjB6kb88pn+ZQUG8qo+4L9qdWnRgIODcrAdWf9Z5GSdwtG5qcyYp\nZtn47SHrGtGtucHTje4esUfFcvy9pgJDRK1u5AXkHFq4BEbVST0CwCeWl0/M\nkJo8GGXFfXTq8FIheBmh/BXszMeqAaNF7GgwbbuxzGK+BaRBJCU+1YmUGiqs\nW4PI6mFKEjXOpxvP6ThJ00W9iUKGW99BCu4cKBMMXdhjrrFh2IFvaAfx7xc9\nua0uQlMOjqdlRoV+NCgRqHslPclMBAWj5rgQuy/84IeKgdOgeN9c46WTs6FK\nNGYb\r\n=cBjQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.88be8a95"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.88be8a95_1547057376804_0.4413364523602574","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4ab66aaa":{"name":"primer-popover","version":"0.2.0-alpha.4ab66aaa","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4ab66aaa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"47034057bb3ae3c026fec899b67ac365e11ac941","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4ab66aaa.tgz","fileCount":9,"integrity":"sha512-mJzBWsFZSRw6Ad38yV4Kgm5aOS6HEigOGmigH7B9s2p1uMgCJOQGNh/bnOwG91y/hQTr4zr/tJiI6dguTDxeUw==","signatures":[{"sig":"MEQCIGwy7KPOKRBB5K153CyQZmNKUmcz4jYBLDL3PHTMahRBAiACzfhhORe7RsWp6+6alJHnrAoOgNpfQymyJ8lS0ti6Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNjnRCRA9TVsSAnZWagAA01YP/R6udQE4M9k5FjntZS4n\nTMvUPut/b+pOPKkMAVa72GOfNfr3jW10zKh1MkugjLC+wtogb9qHTAjJIDPO\nJvJ7OVCw8BUAQ/Ue2jFsh1b7HZIGNG0UZmwqifz59dXg7JmPymC/jl+V9CqA\napsbdGT3q9o5s+VQCTwzMZUt+uLVyW/fPOHAQ3q2rg1Ajc5yp6gbbe61Vb9U\nBKMTuaOYGEwN0ZKR4SPYUYR7zk+bOku2SUEDbD76PfkwYV+yeAGF982a4i50\nQ0PRI94QXToYHfiNbnrBhdzsfhUl0B37fKr2k8mZ2Shs1w5K9Q7+iJIykD3l\n4UegWkYqGaNRVPq562NifwGqJL5PhmSVMZUeFgVMRHWjsYAGpAhlXTPxLSgz\ndN7Aez96Y1wyWxW/QdGqd42U5FM2VnavG8CUeNHVE9lQxio7SyfRhbzyJh5b\nwZzbZezA8NOOm9u4lkdKipZbSKYoFpopcjUuXo9kBB6BIMKzyc73vDbtgsv4\n6WDpfDIICONqbLg7v0gAersaxGjZpszbMofabh9MHD8mlEPZXz/XOxy76lKH\n990KWRmLAtK4NhRrmqpJLMTW2CQ+fzm+wqjJhiM8yMOLJFypMGZ2Mg/Wz3Ee\n+hp4QbrHznjjg/s7IccRi2XxAj2zbqqNhKcqwkGrejqiUtUZmV8kOFY8pHJH\nK0VK\r\n=sKBg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4ab66aaa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4ab66aaa_1547057616897_0.07982559176814674","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6af250dd":{"name":"primer-popover","version":"0.2.0-alpha.6af250dd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6af250dd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"acd0b496d438bac60124eb7cfde89e9c7fb77e96","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6af250dd.tgz","fileCount":9,"integrity":"sha512-jiKa/ayzFPfjqEufrFibVF24RCJUHABHdrLF0o0dbDfSHJ30U4lzeBOmBuW/XrIK8RU+2cecAySDFUzxsEZE2g==","signatures":[{"sig":"MEUCID6TPCnv6ow3qPTnF+O3FogplHn6AU3MdbpyHPPEcc/pAiEAn5E/60TbeEW1oAOqIdFXkGWzeamHZDqQDjOJU2Yaj8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNk3vCRA9TVsSAnZWagAAVoUP/is2v8OH3iKh7Y67A/oK\ncT7bBi+ArychQo/bq2FDDj+SLjr15GntXCidmUg1qw0FK2USnXQJak6H1XNe\n1ZdEZCOMXWIheV/9wUA4fnbPZVaWQrGLwQiO2ZPU0wxpD1dmzNfnz80Qu4ML\nERiM8yHj2hgnWcXb2xJilihb0acS3yN7z45cqi4vA6oYBxktLKValLobYWpz\nkfbnNy4+HTrbwDorbJ01KwQ02DGCcmJv+d37kkJdmci0R3407MRvEvrpixZ5\nFE7P4t/bccFTR/z6y3fsns5Ldlk3zVZNVOtk0F8xaawt9W9V4nTU7W3jPlpS\nwiDPr/DKTbu1QyMQMHbfix7vi6kd6hRFlt5tyzJDind2LmPL2DZbruI4dC56\nlV/onYfw0u1y997QB3OyO+1MoA5KCIk++948R6GrYSL9rpyQn+X9jwVbjzDF\nigtKezQVovW0p/Lzgz9PVS7FA+D+Xc5CBtu2y2W+4gBQj2h9LVtvPKtnUQYU\nJTlnohJ1kTp2H8N9MTFJ9vIQVyAKYU2W9p+MwlvZr9SUdmZbsHs5PrWuK/zq\nNzq3yaaDRuvSqeajGBVbCbsSqH0+4xvXi+ssooMZmTxPZPesOhDBc8LGa2d/\nvNExu1MOwS/xPQv6D1BX4fANtwclQJYhBoN+ny6l2QOgsjDDE/EOVpUxYoFy\nZGy8\r\n=pfnX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.6af250dd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6af250dd_1547062766482_0.41025998716819334","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d16597a4":{"name":"primer-popover","version":"0.2.0-alpha.d16597a4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d16597a4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"76d8b782044f08053f973986f358d07e17297f74","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d16597a4.tgz","fileCount":9,"integrity":"sha512-fDDOM4Jro8XabbbsdTOjJ1Ftdra2MhYj0JX4IQz4an1qXBDBwYkF6oV4RKzQtBrN/R2CEdYKkzcAZqBq6QN2fw==","signatures":[{"sig":"MEQCIGqjvYEDVV6xaSIbuI8sJ3bFkOeGNQsD7qfQPIOVdKCaAiBP/8pNHHPZhMombhGuj0f5zzMZUI32vbZqDtFzm7hNyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNk/DCRA9TVsSAnZWagAA9joP+wdklX4jzY/RBX5zbKdZ\ncDs7i5MkkBUT5giw0DRqp2dEhL2m6NFMvN0/eReQmMWuXu/wDvq2rja/Mh/O\nWTL/7HPRGFgLVBXRiE3NqOWoVN3sBLdhvfJ99Uixj2VESt+hkJwEqNNAROuw\nynyKVDmAXTRkKeEDi/jeSjryliBOmKV/uf7flR2aW08v28vi2IAo+VodlWEz\nIWnUP3Wcjq6yyJjz3T4jpnPl7ub+6mKnGlTXixT5EqRZw5qHGyQbHpe/56Y3\nhHtEOdsuQ39A4tOcDvyqdAB7hygzstQnWZwY5fsfU+d8So92ebjIFRBN0KJv\nwaTCksJGTQ6l/dcQ6Mp2u2jBf7D5lMzbbyf27t1ot9a/MS5PbhcfLKTTi49K\n26W1HSaOHNnlM1xhAxa2+qouffhYuKIsAupXuBzX7obJEuh1LWFu4Jc/dlEn\nNFVjTYIGC83tUgi1jEfV5R+9hIXAIYfMAKQl7IdVAB0rLuB83+B8V8VZjvi5\nYuDcu8RBZ72ZZ2X1UxB1I909NwcbO0wzUvzXdKulgyCSNe5TgRrlw+9GHrQJ\nvB5DEnz9WO/7dJtpsjx0IlzOqkA4+QFgRMZmD4kh8MCJg9p/zt/Yueph9p8i\np4aCrYScDlCT/K0WC60ySuHJJFlC4mYjo4Odi426owgcpCgkBBeMXvvcVwcJ\nnfC7\r\n=T3HL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d16597a4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d16597a4_1547063234525_0.11526993611677416","host":"s3://npm-registry-packages"}},"0.2.0-alpha.100c45e0":{"name":"primer-popover","version":"0.2.0-alpha.100c45e0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.100c45e0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8f8f5645d88c00d6d27e2896effe24dfef16f7c4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.100c45e0.tgz","fileCount":9,"integrity":"sha512-RWHoNPUOSTbe9a+qir77ShDRj1mk2/d4x7R6gGREGD9McE8/+wI+pOlEoCPJZDso9YJVkzPsolMzbSGoS5jfDg==","signatures":[{"sig":"MEUCIHFgyuGlJTijEdz4JNfFT86dDupPKZFll+S5P0TBB4Q8AiEAieHIOfW5O+Fnyy7GynNyysUhKGch3PgeOn0RNnHlgMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNmkMCRA9TVsSAnZWagAASXYQAIoC9JtHRnMGWDigbTbT\ntEwWdKmMusM1AU5yjMjtl0i0MqSOH7LW3/gxTBVjNXBwQ0AA8XlJiuQT5Y0p\nO/37SiwteorImxcdoIS0vMADYNnDEvuGP1M9cPnq+CKClUgNX7t8my5scGro\nli3ha9KyH+7SJ7vfSrnZB0yiJTastEKsoKifGCK7HjSRzwlWOXo0ZTa358Zt\nveGRaCjotkJm1BIPaAHDu1gUM3wDjn5c2iqL/b+9ezs/vuPtop74DARi17fd\ndAanmPPi1jabWQBn4rvjTeVqyFGHu/mU7iASmyMg0fR0cq6M/SyWsHHGtRyg\n5sdeZszRt5tAe6nW8o9/Bkew6GW5ojnci84vXt/idZduTG5nJmFQk2GbVTXU\nMXvoaiSjjc/6F5B5SPqTRf7i0hnXuxsQfxyE8MHxNv5A38ccdb5bZ40LyT2B\nZwSfyqaTLctxBAQy7hDGH/1fbtNMN/QSU9uap57bliVJ+k2pk9Vw7NLVbBdj\nzYhw63IuAYzW71J0HgqW401rC+VhlkphbCKwyaemfFkVeqNgnF7RRJLUFkwX\n8uCKGet2sXb+usT55IFtqrdRxPu2YVH5mSpU12sjG6Fd+oklnagGwHmd1t7O\n8+DVZJmQkhSuFpWbtn9pkIahnB4abFVSDxwnZewBnpBcwwxgPuHff8V+ldzt\nLLrb\r\n=1B1O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.100c45e0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.100c45e0_1547069707352_0.8072638731041732","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c5a475ff":{"name":"primer-popover","version":"0.2.0-alpha.c5a475ff","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c5a475ff","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1b385fe25f9a3673d79c75bc84694d2b6110f4db","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c5a475ff.tgz","fileCount":9,"integrity":"sha512-l2NY58nPBKBP5RYCb4D6pLZmGJ5pWoT9HBR8xBWu6Owwd7AkwZbKWR842MlpOlgvyRzy4tJPVPGy+kAB2txL6A==","signatures":[{"sig":"MEUCIFLK8XIelCcCwyvCPaXYcgfESWLr/Zc68fFVpsxmxPuQAiEAiR0NgqVDWSNTdoqj6t9fSIfbcgDVVdY5eQI+nvnu4bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNm51CRA9TVsSAnZWagAA9e8P/0veKYM+fdzlD28HIPbm\njcrMIJE6olo7kI4Hk6aCsAWjTbvYjL95QIkxB1Xhp7TT3+7UT7gq2FY1v6af\nLxienMqKygMG8DB68/cd/oGnWJZLTHkg6US0Pmynzral3DfMm0IlPq8OiLCy\n0IZEC9my+2gfMrhxB+HHblaU3WJqnP/X0mKWhzsdHZXHNRNSIwEAOUmPoZyb\ns7XSHckGnQd5qzlfr2zby/LwTRtNuTMqfmdEgBMXQ1kGhk+TS70Fjb2VVMh+\n/NBoQPCRJ4NM4/sAKzzDy4r5B/YdMBsyw4++PzIML6srWzcnJDG3ZS/S9NOY\np+sMooCWHI3nM5uFJ6LHYf23LZ5KNyXU8MTiW7WPdm8sIXY5T1DPfT/K3//T\nP5g7eFfEf3IweeX0E0+EcEoCVWlRc310dt9ApnUwXWbfUya43y3jY39ruYMQ\nK650w+sqfNVb+Ig7J2ONcSj9MXL9WSJ5YrEl9Rqd69ldZbC5qndcp4aMp61L\n2AQVIagVp6wlEX/e5NKrDrheCKiZSvkoOt1uiz5RrPvqVGyPClqCP8wmeEY1\nQik1QNplDAvH3pNLJs9BxmLh6IwoPgtR06h9x9vSY9IDJfTms+N9XQS0I6Uc\nWSS/2L6d2JX1rh5OFztMWj9ScjuRLigU0wdqq2gAMSVB8Rxm0eeubeyr2p5J\nMlKd\r\n=gjRI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c5a475ff"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c5a475ff_1547071092704_0.13839067672858163","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d2e6ee2d":{"name":"primer-popover","version":"0.2.0-alpha.d2e6ee2d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d2e6ee2d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"27c8ee1a1772c00732067f0cdaa2e48fa0ca8fa5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d2e6ee2d.tgz","fileCount":9,"integrity":"sha512-DpBedWLL6zzANE6ip5TbmBZOeu8eF3COqx/FchIO+5J1ay4pDOE0Svewf32viv2ndQgcYKPUSB5xcQbgkE/K/g==","signatures":[{"sig":"MEUCIQD+WHH9bIezgQ6Dz/1JmVNu+I3zB5DMcBz6KxoVAaBqswIgQOABv2vhrd7E2xsE99qKh3aFpv6CI3IJPtmmAWgU8oE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNnEiCRA9TVsSAnZWagAAZJkP/185y042lN+45H9OtczK\nDpv+oOdgPUcSfsviXDU+hrNeyv1gHark12chgenDvxXx0pXYi+2DEeSzyCLa\nsqTKqd5Vp/UUPIke3iC5xdv61J58gmPQfXB7M2PWaYEbo7FDl28esqCDHeRW\nU95C8GoSmxw6D9oaG9w/3ZFlx4sykgMyZS92B2hcqsXVW89CU5LO+eEDPsYC\nlcvTLhTIJXaSMTYYsutsk2NGHh5TGJ0BZrqvr3lhXucR9RZg6ZKah0zYkZR+\npOclf3yao0b++SGlS/6S6T3BwsEgh/4y4x7kUZxBZRSnV7NoqfPrtw2IlUcD\nSg5v9jdw1WjT5w4GFcjfzEuLxtsrjLEiirvJtFKzbpTqS74Yak4cPQwFVio9\nmZjsxzLttjx7hYfqu9IKQdHAGYe0XvlVDH0sZvh6BrXHaYepwQtwWHpu+ma6\npsbODmADJl/xoCbOg0EWcz7zfb8dfr0KL0pEonIqvMaX+YWIqQOtQ/Dbyk6A\nCmiVzm0JbwfYeLICyaSx5aYzlxqek0uq68ODdQJ+U7bPCS59PioGQJqMUNsr\nR82+L36H1Y5n1rkqQox9Im7H8sIKo4W1aYf5bEDrM6Hu+xoGTImgafazCml1\n1wVV1Yc8XTI7UCr28jA93BydoUdBpSYAQP4VqNKQLMhqxUY0jSKGPFBQFjri\nMKJF\r\n=4egJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d2e6ee2d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d2e6ee2d_1547071778314_0.6295409587532563","host":"s3://npm-registry-packages"}},"0.2.0-alpha.3bd3259f":{"name":"primer-popover","version":"0.2.0-alpha.3bd3259f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.3bd3259f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"281064b4648b335f92f1b9510a5dff24fcde67d9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.3bd3259f.tgz","fileCount":9,"integrity":"sha512-o5SSL5OWjGc0k/RxWFjsEOut3ks60o1R5Y0+Tvj2k17CkEHpTTkeLMclSjmqpMqI5u+F/0IBf1/FxDqdr+M0Cw==","signatures":[{"sig":"MEUCIDGnGcjaYTCMdG0OqLdL/pULbPA2xq0e5eur9X1Do1cMAiEAy5buPpfqXNnaWLt9IcZtTx2w0uGWa+EBRX/4RtIkNqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNnNTCRA9TVsSAnZWagAA0c8P/2FN/mSJu+0Z5EkohNuO\nBhrk3zr4PY+bpsF6L+YKxxWQc8eeN36ggQAPPaQHa/LaTrJ7iHUTL+7mzuSx\nVTGKUBQAEXVdlFuX7zoLBJMXsEQoJUqQDkthDho99T8+2tmHb86xaNexoHEn\nXV8buEcMFieV6fcTe9AIQ4/BEhRjOfw86OEDIX5KSZtwBnde00/1wD/6OGXb\nfZqYF9ieXuLbCsc63KvnLlxncTvswHtWlAXpgogE44gNoX8HkxBlhWPZ/rG2\nvIKiHOQMyLNo+Chls93s8kRdtuvutm3zyegIEDyhqPV5Sf/w50txAgq4fxxE\n1mNLmpUVtNQgvcR1HRieoUpl2aPydlV2HNhTzt3oSs1hGuR7eauUp/LcsnVJ\nYBcU6oKcnLOR21ypJsMHfKU36KAHxL/wkKr9oFCEbkSuUurBZsDgGMFXV4Us\nCH3sXFZl+eNvJSqJko+oKNmHnLuKB0TQjpox4ZsWzyg9Rt+km4RNCW7mAo62\npiFCrYflZcoEQIViS9TXWybQ+wrSXe3IcuZEnhksixlsP4F0Zm3zFcMgJmrf\nx2Zdkfa5pSJF5cdlTcB5T0HBwLkgfl39LDXPcRx0q5uDHOrtfrbHiVJN0WEN\ndVZD66HQFhcjTftnl9CBv10YeOn/5QsJUh8hrEtd8hKqGkBjyaiBEez0uB68\nxFZ9\r\n=Z0dN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.3bd3259f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.3bd3259f_1547072339104_0.353945963835697","host":"s3://npm-registry-packages"}},"0.2.0-alpha.9798c944":{"name":"primer-popover","version":"0.2.0-alpha.9798c944","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.9798c944","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"48505bd4e98793841632426b4fd117576ebbec82","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.9798c944.tgz","fileCount":9,"integrity":"sha512-Lif3xqqSGoDftJYJstkBtN+0DCpofxdMNz3ShaaaDSVaGoimDbPHwYqKZ1EnZ6FtnVdOETo+UR5X1cxHzbUfzg==","signatures":[{"sig":"MEUCIQCZJXiWNApzjzNw5TukM4jH0KLKX7BiMOuywY9eVEa3UQIgRLu2cDuc5opkyE27pxTAHIQHgCLjZKSUEsDrRkX04CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNooiCRA9TVsSAnZWagAAFMoP/RVXbZuuXehEUQ3cv93F\nWoGeRUvTxEyB5BM8vd8RxcARdNllrZ/Rs/Tmy/f3Bennto7grwQRV1bIbrfn\n9VDwU4eL2CCHIX2+ZzFnfL53TVExYL279gAMa/l32p4scu9Ij8gg5CKEzc3B\nuu9QHJpu6R75jJGLb0vtWdgTDjtiE9U7pHSUjHsDhRj/GMV2YYpC4t8uVYUb\nQg9iJBSh4BkSnVsb0U5fQoWWC1sNyUBqB87zbRLWPI8ee6QUORPG6pDtXEfo\n8YO7xaSwSthOf6gf55ab3NoMcGPpZ2TW/46U2Vu2nIO6zXm4CX7k7C6kWp4j\nSLlu6+3JvN4vGoemh0Jy2Dcoa5BOEMFNfE/Atjb2u82m7mHFz6Cd8AJ8c+1O\nS5ba+YjbHIeSJM06BJK74PVdwXjxapz66synBXpU+SNQQ7j8i59xG61xfoul\nRTK+Ips7HcvDf7SM2rUdHStzLjRp2rHzhUlOZNZqHipL7z8nEAJc7awvx6V6\nSTJXOtvYOJ1L/vwaKzpEgKBASRei93QVe09b4XHgmaj6GOA5eFODmSRrK4o8\nc1EVF/jjLyAbA5m8J9U0gcBA+DKWvt16/K8x1j3kEMvDw1tGaZewFR20G+RV\nRTAvTPikmx54R278U6qGsuOLiJfZBcoy6AOsvjnfHv7XRGt9qr+tN8nXhKtG\nl4Or\r\n=T+ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.9798c944"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.9798c944_1547078177736_0.20933279131865423","host":"s3://npm-registry-packages"}},"0.2.0-alpha.6f43d81e":{"name":"primer-popover","version":"0.2.0-alpha.6f43d81e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.6f43d81e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d044437c1c8cb4738c87578ed915aa718475384c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.6f43d81e.tgz","fileCount":9,"integrity":"sha512-XrmGbedZzmxUvUkEATAffTTyH9WgHoZxuLCqhqu4zwMtQ2GY3wQo0sun4WVORACR9/Fyq02OoAsEsszhu0TgbQ==","signatures":[{"sig":"MEQCIEV8sAvCn4lMTCtemlNMqgfY3D6Fiw7Lfec5Yxftdzm2AiArZX6EWlICFQ05CXFTnGVZufnoAAgW2SLf5W20XXnKSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNo88CRA9TVsSAnZWagAAxhYP/1RfspoQntwcL1//Qntf\nY8ZNBt5f5auW9Fc1NW91SYTYyNppfh5NnvZ7dUVUIiqxJU+GEkDBUe0W4pEK\nPQ65oO6vBdNfMTzbm/tLsdt4LQKoWyHXoIsydeyv+VQ6Z5SAnMzAzxSkfT7z\npjDrz4qxsCw1idYUG8LtsvgEgW/1QwjkZ4MDpZRdwLSTIuW7eTxJXbpxsVIh\n89/XGhxD6dtoQqDrxv6dkIMHMNqfQoNqh4YPOZi6vImInsgzENosmBNqcyJB\nofG/BTnxetuL90x/Y1e/wRnXjBCbXzVsDj0dL7zPy8ABQR8aq6deCG49qu6w\nqUwNU+tLiy/Kn2yzufCPaYNuevyvRRSrpgvy/eT4h8o8iOZPoWflxv4DftWG\nSNndZzRF4i8oLfUQoLBsJk5uMe8Ac3FV0QdjHoCMufcX5fYg8BpUzvugDe6Y\nzGcxrtLUfUTmpmJL8WENP9ymba6YM/o5IBzrU9aXY+bA+C4GpIHx5Rjp0/xV\nd4sNqJOJv7EKiRNzBteqzMNysDGba3oPAUxk+5NDcQ4HA2ATDrNNRtVvaeLM\ndrBpxLP+DQ3nXDUwIIr5fL5/IWZK8+8mQ+qhrVe8shh5qY9jgIW9703QEHVm\niN92SaOsxpjqq4CJPEB13i7s229lp+kIrGEXhx2Bgi9xwY/NjvaSQw6W7Puw\nFX5h\r\n=meM7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.6f43d81e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.6f43d81e_1547079482008_0.37618931277299095","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ef34ab55":{"name":"primer-popover","version":"0.2.0-alpha.ef34ab55","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ef34ab55","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"07fda147cd314205c6c73bea61cfe48bf6421aea","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ef34ab55.tgz","fileCount":9,"integrity":"sha512-SC8XL23TrwkfAupsA2o9qNeimsp44Qe0JfwYOUZe5A4cVL5cvR0dITF9jkkOJHJeDe00H1HhvKaXQgfmGaTU5A==","signatures":[{"sig":"MEYCIQDLlMlHUOnatE79joJziv+/qMwHuRZKI+iwH17uue2ncwIhAOOEyHQ+K0phgNDDnOjVge58iBrr3cZWx4vD9chkXSiR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNpEFCRA9TVsSAnZWagAAVcYQAIkydiLt79iJ40icWEdH\nljgPtQmxufxHCVpufQEc0a8hJzhVoJ6Pwt5wt0os5N7VNgB+CLRVaM6Qj6AX\nsjp6HF2uqjF/q6yVqK9tv8Bh0BOESRJpZuYWGJVZfTwLpID2jhsjcmAMB18u\nJ47mbWStq5Ydrw15yQ01tcT7mkGBLGl+NbRdOemu1MJNSgoi2XLK+BG4Hb49\n6+kASJNXIODij0mH3oNNwe7U3qI5QSxA4I+SdynshT8tjb9O7NeK6Hd2DIiL\npTcyIRBgVXS4aKFbxRy0E36AUEZqrBk9+eb3IhYG1xTMbVzlONpGNUitndga\nEdWZBNiSlN4FqciPqd6F24j8HZL34gMiLaieqQmhE3FWIgLyDt+9z18FJfcZ\n6DgtUySmruGjrtnVwPHHQNUr0wwo2oXEqo6UU9DBQbEZdiu+CPVEUEXsNFBY\nD+VGRugzbMwvGreS+Gm/stUJ3G/WHOLo9TrYA8Yd7bF1mZqQeyfpmn/U9uH/\nwlO+SjQksQ+FHsF2LVfEHv+HZtocZLQGihQz0GfvyT9fE+BS4ATOXRU451kI\naP5QMNWGf+goO9bchjEsjcWny17/CjCqHLRJbvaYPk4P4i94yTUEokkBetan\n9Vf9xsLA7lB2zYFV+PRog/V3UAUIXN3pkVJFn9Bmf8RTp8ALG8JH0lqMNE5u\nESZb\r\n=/qnl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ef34ab55"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ef34ab55_1547079940351_0.2852856120448777","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a6cd7ee5":{"name":"primer-popover","version":"0.2.0-alpha.a6cd7ee5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a6cd7ee5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa0c19c5e13738673c8ba1ae3273117d8a7a5f43","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a6cd7ee5.tgz","fileCount":9,"integrity":"sha512-STIwvTjRa+CDVohuauS0d8NlQVF9tTjN/FYYYPanryNJuc6jQsU4Umf6rJTypSjPJLIwxytQpggQghvIjQMp6Q==","signatures":[{"sig":"MEYCIQDQWYMvEUADaYuZJq7uEH6G7bLxjpPPig5sIMH6g2fKJgIhAPQB5dMtEFHJ2B2gPkKZD5dvAUL7wfbBcPxkMnMFDSCn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNv5eCRA9TVsSAnZWagAAAOIP/2mC9LQm/qMW471H/fzL\nJeRjjCZU4iMh1dNPX2wQZf4cB7KqvRzSFBHw2RYG02mjAMqLb1f8vB8y+Qok\n1y8RbgZ95wWOqheUtCcPnDMRKsMnfFXdC48tGggDcBz7zLFHfFt/RxqSO0/W\nC0w+Lh/GV03394MIAL9SdAkw32RmYdXHV4wokuwVl4/4Vwuq0vYPR8D2Jdv5\nMf7JmxNaOvj4REyX0NoQrZVX/V5FVS3I8Qu8sKjUeKNXwLKPBhtkOsc9RTy7\nQfF72ckLAbhZ0+B3VpyqKI6JWk2ROSWzWJSBw15Ii2Y/UtSbW+Yxih966v44\nQBfLOEuMe+bc6O7LAr+axhcmbQ1K6Hn+tXBnRm5W/ix/zqmo0SBzkLTzVQ/4\nF+rq7bFsawTZt8SKOrsKb1cKQ6BPBAfLJgCljtQF7dM0lisWUNlB9GW33PXS\nose38gvs48wbB5ma6tAJqTDB0wyJKT6Nt5HNKZeVsP8pti6B0wRUnTo1K3ho\nPgSGloG6q/tc9TgroMDpTMKFuw2ejwEcdOqR0Y2FwpYKH3xX5Tm9G89MR8MG\nfShB4S+ubaCJq0e8xu0spXVsqzyikqmhgxDmAZDE3i3dNyiBbcUEdtVnsT7Y\nIyzJ7nHaEXO5TNzThqUO1tU3v404ZFVnrnDslKsyBtRd/Cl76uiTx8kYOGT/\nE5CC\r\n=L9sq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a6cd7ee5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a6cd7ee5_1547107934258_0.46596756459890276","host":"s3://npm-registry-packages"}},"0.2.0-alpha.45cd0ac2":{"name":"primer-popover","version":"0.2.0-alpha.45cd0ac2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.45cd0ac2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7aa6cf967cd13e72d40ece2438c0ede5b53069da","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.45cd0ac2.tgz","fileCount":9,"integrity":"sha512-Ug8Q+ixkOqDIgQ6VxpO9ufN67bPs6VyJO8Pm/WlYd5VWdpY+jt5xuxcAo+c2Kzpa6RVmKJrX2gn0I9enwt05/g==","signatures":[{"sig":"MEUCIG6n57C0v6NPJeMEoEj8UHEZ80AYt4tgEcX2XTtwuRZ/AiEAxtFJRTCbiDhIgKnfDqeZg+mRu2IQvuMFHU2pDpMlTfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNv9BCRA9TVsSAnZWagAAPp4P/j/ye46ERm99DqwwcwcU\nmh8BL9RVL2QQz38YZpbafCIrgDQcGhqKrZqUVQdmkLgyY68lqA1ButzcJRSK\nvQz+TCA7SV6pal6e+OHy+mGs3u45clc2Q3NnHVu8xfV2EdJXSanN7XP1hYoF\nJjGvWYgfl0wc5BuZgFQyw577tJ5VzEqQe9qIqrWqcAjMaCCBOKRI9g5WFPOc\n/yoo1CT22J6RFbKWjP6px3Qzre7q+QnfR250cN48MG3uSXwM9/Kyh9lN+VPs\n0e+rUnD8WS3MsOEeGbqArEK8u7/YhC2/YGcjTqFP+LycWqLjaaoxCozbs/yL\nzQXYQc3H2orr3HQqyswgmw0jrX4R+wErfQ4fjAA4Kws7+8Jc1o6wGfxlmnpN\nc0Jz/G8QAyu0cqz8qri/PjImEwKY3bZQ+s/7QqSDeutsumxzHnbL+5K74tAN\nxXuANNyvTKasG5np2XBDlJJ+kvRx2mp2cN49M2vx4qmyX+HeDEzi7pIyWg6n\nX8SnNLVeE1EedlBZIOhEPXngveU6pqaI5bvISqg3M3zKnTN3k+r0ibfU6XeY\nLVjo6x9E5ywCyhMpzStFCibzYltUOtpcHtnNG2MvYMSJEeqhM7738KRXJuK1\nDpffM3VON+qDhDBmLCil5VGtgL+AsCbPYn6usJylz+ju5UQPBo8aME2aof35\n4B7r\r\n=1CfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.45cd0ac2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.45cd0ac2_1547108161354_0.9532156000283438","host":"s3://npm-registry-packages"}},"0.2.0-alpha.9db56652":{"name":"primer-popover","version":"0.2.0-alpha.9db56652","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.9db56652","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ff153778edb824842d63526a1069580db1385265","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.9db56652.tgz","fileCount":9,"integrity":"sha512-hyfefsMhRyraLOOGoeYCg7/x3fxrtsSs31WPbujmbNU61eGyu6XYVVRCObN0o6H7bRFsed0+KpdkflPUI01lDA==","signatures":[{"sig":"MEQCIG3m7tdcRwNmpBdSwTei3sdbLJBX0aYZpoLvF41C5HtuAiAakbc6PfwdNg6Sz7KpTnUVBvS6px3TlgKzobS4bavOyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN8I0CRA9TVsSAnZWagAANzMP/3jl1BnXqkspdgwjh56k\nojMH0CkQXeeULW9u/J6pcSAGVl22O/+t7yB4wMzyS9ymKdpGW18dyhNq5SoH\nTjhcm75PiUgWPxYQJuiwh6YHapHoYu/aZklI4hSZyaShO6Vt5cQXDBHGjeVl\nMtQ634FPyucy5CXyH0tZ+jLZKSqpNsq2QW51VZIZl2gKY+IDKHt/KC005/mw\nTDV/zuVQzaqKdypU9DmtJurOwjw0ANwyElHnFH+YLEvOWgXeic/uxXpnwe03\nOJuHf8zqF2ofWtZ+QuJF5zYV5++HNQlBQ717q/QlNk4rfYYmq1hCDhjL/327\n0yx3TuaEdOzrtSM2mnF76k9dLIkqfkFhRiD8sKjmBufBn5pDi/+hpfU9yl4b\n0L3T6H7yyMwG1p6KkeFC4U2wldCTPdlepgzBnzS5YVTVmar6VOU1wkQXr6Ya\nQ5GCrFNeMzOeWtACmWkL4nncCyW6WjE4uHh9Lt+/AAJNpE5TLyedAcb7Rt0S\n/7Nv7pi7dPTpiYJGbePuPF8sbYt5ZRXgLWhGBkzFRAPKPz+auweDDRPVsdBI\nodYsv5v/isYbNO2C9veumYvwXXbuIZR30D3PyfXcs0EUHKzomo9YgNpLlclp\nwnwdYi3UuUV2qTRmGLTufqUnDxetpAul13iosIYBeKOjNS6UQA5dVL5MyfLJ\nUIdp\r\n=0M64\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.9db56652"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.9db56652_1547158067792_0.3758043739977599","host":"s3://npm-registry-packages"}},"0.2.0-alpha.629938f0":{"name":"primer-popover","version":"0.2.0-alpha.629938f0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.629938f0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"90ff133d0e2c4a934a0223a39d95f3004d980191","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.629938f0.tgz","fileCount":9,"integrity":"sha512-ak9ZRHJPALAKSYocPqxK/Cd6om2KjUIaWueWrK1+3PBgZPIgVZu6wzxdgAtmhYaANJjmLmU+aF6rp1vYBL5u6w==","signatures":[{"sig":"MEUCIQCJnFI0ilZEXoMI9BbZ4+LBbJ0Zxz/7z6fatSLqD63GFgIgWvUTy/fQk/1OOUcLuwJM53wwVrJLFvIBlf/TfqVrXBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN8RwCRA9TVsSAnZWagAAeuEP/RPFqnNF4CIx02/05vE5\nVZ2q5Ar6++bdQ06Z3426oB6PAqDyO3geu0whJWwC/5qis0525Zb2aS8XWUR+\nKmqXxXR58pM/urVNagN5tie3C3is7t7MDc5Nkq1h45AGiG6t33IQQRO9+pQM\nCQWCy7p5ZPFQBgfQJ1BZio95fEpa2eCbSo0Q/uzVUPlz5LpjXmAQfeyrlBS6\nhGrmN3Toanvnwx8TTqa8iWa8osJOGnq2CvhujRhMRpZRqgcY6LAL1x807OxK\nK14zpG5VYE7hMtT014FFvlFUSuWOlaaPNzAjR0xu5mmFFaEjeWlETXdQnaoS\nkeitwPcgDjC9NPNy7rYrkoFhsvrgk/WyKK7lHYqXSQC68qp/ZDaw1KbUynuJ\nWvf6NS9BjejsVtpq3q40eZxS03cVCgI7zJ65HVoFYMnsme2q5QF5kVu4N60k\nWKO2V4HDmYoPwhbihWoGpmCEyGPsH4+qkcO3S4eA1sM+Fmd5LOZNlfW2T34r\ny7weDue943cXpJdCrU2oM1v9TGc+k56C217mBn93Ydrl5a2A7Tg5W4aI+OjM\nhSdVqscfXuamcXajVNDQW9PI0vc5QSwj8IiOe9oaW/N0kVfFF9CFXAeCR02I\nFSRM18roI6kBftx229kgEFU7i0TM7FRPB6WeOOLHuKDRbFU7LKzp8Vhrg4gX\n7LxE\r\n=RzJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.629938f0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.629938f0_1547158640206_0.7749137928713863","host":"s3://npm-registry-packages"}},"0.2.0-alpha.de967b8b":{"name":"primer-popover","version":"0.2.0-alpha.de967b8b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.de967b8b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ff125a4c6c09b240d41f9dc10f5271b9cfcfb131","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.de967b8b.tgz","fileCount":9,"integrity":"sha512-65JNG2T0qKsCsFLlZKXGPFq4UworVLdDXo0LlQsqKbLzoGRICIQmyR/9wj76KpWVb3AQdfWKxP45PP9AIi5xtQ==","signatures":[{"sig":"MEQCIQDW9zrPRX3EOHLi1p2h6iCXZxNZwLL87GAuuKZY4JPJ6wIffAX8t7WPBAGe12m64emhdvCi6ZFy2hOf1Pt/BBnvXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN90OCRA9TVsSAnZWagAAnjoP/jN+6Ke2aQKcSEgYuhoR\nCvy9dzRkA3LH49M1BanRckOaOTxSfW0wGLHOf40GKJyCVoByTRBDaGFuQLI8\nxsY247udZObwuMss8VITPVCSGjTd3T8grTsH2vwbb62csvEEdrwtDKjHgvOU\nmrc3maD0rRGhNac7DOQwDtcuqHSLc+3iHYzGIq9G1W5urGVxKQo8PQZqi0aS\nr6oGRlhTVzuDxMwRAR76P4mqQ7PCUbuIAJiGM9EuDCoGZ9zv8EFmskN44tdY\n8kel5H5CaxKus08JvJF3rKwjjKC0ayMcz4HqoX5VXppOgHiRppykgFSLjXWC\ng8J8qUJtbVAjZxyJS8iYDhWUlNhapEODsGwc9mCpVdC1N8j/xt41OKujmLMr\nQpqIbb44AowzDVaEDcE/ww8p90rNrufJrFoWSHhaayoTw4y9LHaiWJzlLVVR\ntYtl1t1bltltCrAGJYnc/k2kCP9/f5FXIEyHa7YIkC+Tj75IvZFDaGBjWKF6\nA88r0OH9UuV9Bl201wAZMqTe2xd6IH4kvDM8ndKrZkRArNSP4dy48VQ8nmkQ\nzjZuKNpEwJr5bhX1j0Nx+5uWM3+NLLmOvF34kpy12PNMgyXrzrXvipbU79r4\nGBjNQb07A8eT3/1UOfTi6bDkTAZk6iq+ChCycIX+uXtHsj/jC2kIn5ziUi+L\nyRTX\r\n=o5PY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.de967b8b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.de967b8b_1547164942079_0.01182503619937525","host":"s3://npm-registry-packages"}},"0.2.0-alpha.197cd065":{"name":"primer-popover","version":"0.2.0-alpha.197cd065","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.197cd065","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"979f870cffac4491358f803dfbad0d789477bf0d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.197cd065.tgz","fileCount":9,"integrity":"sha512-YMlZQkDz8trMeWolJLsqOQxDfVrHGXY6FEOdHB1pC7XypjZ60mp5UjK7fZtAdSMZvp+sP0ZJ14O+4H8ExVMXAw==","signatures":[{"sig":"MEUCIGaLT9CbmNCd9/fBWx3QyZbwplQUPRGg/My09tVBB1nHAiEAuEuedpTMm3xZitSPyvXI5DT3EM9iyOt1Qhx9OiRxW6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+JTCRA9TVsSAnZWagAA9H8P/iqaWs7yXhsOB5lTKUgW\n8bMQTNcE8Ip786PCwjhBDWmqTTTpph3vgWZsL28mM+zIOh7wY8Ih+fUiUGav\nVsEWg0ihGvytsgCqgd8oZbc+GSQV0/yuR5Z7w0sUFfgiEyz+t0WRTYTxNOZi\nzKEnOPMIuvKljLxhYoOdIvhN4eE/1rI/86rgwCKRiHomesxgoSNkwDKQv8s3\nN9Ym9UYfMLwoy7QulVOUjOfh5NRey7bQ173Nb8/iAOifJgNFCY+OzuzLa8wQ\nU61gEB09zVNpe/DSCp6Ybgxn3AoZupv+D1lGj/zxvV2OxILznElpcEiA1eI5\nFPj7lURDRoRmSchA4jNMD50XpfXHeSXJ5lXERQHg+RtGdzTz1og0mJ5Zq3HZ\nLBoDxTh4FERfRaEbydLNh+DV7grP8AW9XS3FcRVqU1bWFEHW8SQBCOlmzxBy\nGlMWNGMryx8M18N919GF6Xcja4aokMk+Fq+LFAsM/g/nQZ+8u+unJiO5Xlue\nUmrA6h8yqW2GjwAUUgFfvpY/bSjYGIdeiHRhNJ1YSiU3OLgZcNwjmmwXb+Fi\nOYSswiYFSswJ+v8v2DcJ6uKwhAxrbx2dL5HNVgoLIgEwV+TpYYimLefPzOxs\nmh/0t4OBVtTg51WWCcmEQIlXsPDR+0sRJecQu9JIkeKhugLJBeOA9UJ9hTng\nVkF2\r\n=9V44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.197cd065"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.197cd065_1547166290734_0.411063154580392","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4cdb2f3a":{"name":"primer-popover","version":"0.2.0-alpha.4cdb2f3a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4cdb2f3a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f7d2a90d1017edea5dbe4027ca16efce58a939a5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4cdb2f3a.tgz","fileCount":9,"integrity":"sha512-iOHw0N83W6UzPKziaK7mdw6opA4UBPJGM0AFS31ctTqgrNWojSq41rKaaoA5k/XDpy7NNceiop1UgvzcseigSQ==","signatures":[{"sig":"MEUCICnbZ5e8WJ13Hqif/tCtLkDgmlnXJhjLn+5yRCpK7Th/AiEAuJvbTku3SFLsjME83yh40iv1D3n63FYo2IfHwM6V4n4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+SoCRA9TVsSAnZWagAAio0QAIDC5IVUuyEqJdyyVC7w\np1gSRfz7/uB6QV5Yew/1xzZDwKcGxDapyKf6FsV4A4rS4bLoLZC9wyLXkpmg\nItiu21EjltC0ZFqcSUPee7GOviVcw1ySowNuSYRSODQ4nKXJR4pJdohvQ53V\nmMk1Vt7SwKlNfQpdIptz7Lonhy5hRFrXYLXhM0MWMNpNJupSqnLZdsMICOu0\nJZmz7/mOFQ2Bu2KwjEIZiAhe4S592gE3gMZUKqxWS6fexkw4UiW7hjrnCmEG\nUZNUyu3M5DouBGYUGZcFu9RoRraHAHlptRzEEtfN443kpYo0nxRodQuFPlEL\nJrTZAzXlmuHH7WPsRexyOSPxErn7j4gBA8c3JngLd6Pwz8TrEnmGwtoK5hnt\ndEVyQCzw9XvzN9clEx6rHwp1DCy8CiNJbk/zq1ZAUrMFSJa/jTL4XgEarBUA\nLKK7iBxhBMA10hcUM9mcM2wTLuo0/VgMmQ7C3eqZ3HqoK5zku+meb6uizGu0\nyQYHXoPJARZbK3flBSJ+3RShOsgqvIqrBdYtlmC2sJWxRtnLI1u5fFxynF0i\nVJv2eP/6O95fB3qNf4iVacF8PvlSFnaQimPpCsh5mBfOr3IuJdCMDmSgG+3I\n3jENac5BqvhjyNfx9fDF+reTNg1GhJofZVWWcIBebKIHrMBiHpXgWpza1y7q\nCyZH\r\n=+m1j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4cdb2f3a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4cdb2f3a_1547166887407_0.002571597085128774","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5d2d2289":{"name":"primer-popover","version":"0.2.0-alpha.5d2d2289","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5d2d2289","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"27d3bfca90e7cf9ba0bea9182cd330e0594c62d3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5d2d2289.tgz","fileCount":9,"integrity":"sha512-k00j9vfWMiuwwGe7KMzWU79GhBv4bc3dTVXLPyAnKorca308ISDzmzyGeSGLwj68FtkJvNIt86v43a+2f84SCQ==","signatures":[{"sig":"MEUCIFsCt/yY1S+JNJBf5LYv5Hm+d4xiwMjG4+XbGgPsPDbeAiEAk+s1X6gKB7kuoLBhsY2SJXBR1EyyIHgIfZeTwFqW6Rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+S9CRA9TVsSAnZWagAAldkP/30Kw9lPMtf0I5IFKVwI\nDPuzAyDA8/ZWAOIQp5Ly/TpeCQVvbVLjUCGvRojXjwijZ7QjRfZuw7QwTIAI\niqSJrPfmQ/fPksp1RFNN59yvi796wb/c7Aqxv/a00sa0PDD962IJ98LXMjXk\n4rTc7efZ1XO/XTJq4BzZlgBjFxs/+51UJBaliD5E8eRVg99rRcrbHU6bSOqL\n1+pg2lxg5u0hYk8r6XNacPN0PKsLGBArdS5HxeHiyxVBUbuJmQDfDJuUP1CR\nSHrLTGjNz48o8Y38Bayoh7ueOA66CsESgllLcxAUaCBYlR+SzkvUkhGlmbW7\ny7SNTT2a1byuG592NknMYp8nMEXgT0Mi53r4pATP3V7kNvbTf2nxiXmn5TXK\n/IHSrXLUPNxGbLd/S+eQrPqtvFf3Ul9G/7j1/mTyG6W5DV9YkSMAnBo4aVjZ\ngKHx5RHXChFBHZ4nG8e1EZv75YzNu7Stsqa08A1AOAzvhKA/5CB40pECOX/O\nn7N8XuyW8V0ARL8WgLW4U0gtnd0kO3rYK0N3IvGDWKzJTerh7PKUFhXx5q/m\nTp6/xpzeghbtc27EmsEksrWnGD5++UqFaUBi+KLDZpSmAuSyNqjgDg+o7CaR\nVz1OzDwFBHkAPnobQEpC+tKRWwBw/66qBH9HIWWB+nTB8uXdRM0VJa4TCHL3\ndpe1\r\n=qhrV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5d2d2289"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5d2d2289_1547166908150_0.8755498563219339","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1811653a":{"name":"primer-popover","version":"0.2.0-alpha.1811653a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1811653a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d28ff5e281906fd5d28b279527fd62df5bf75aa0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1811653a.tgz","fileCount":9,"integrity":"sha512-rIae7tvHUCGHucyMF33dw7hyZ3A7ERfULCGW2g5aMqD8mQrGP5EHGRdYfjpjIVcjtO2C5dLzyHQNn76a+qMcuQ==","signatures":[{"sig":"MEYCIQCWHrHoehBs5lOcbGyz8A37Ko+34gvm37Q1MWrApKrTAwIhAPbhsiyr2KaaQzjX0+E3V59/Dvjxg8wswknlNmBOlUHk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+aGCRA9TVsSAnZWagAA+pwQAJwJJEMtMNWheqkubL9M\niELfFI5/PF4I3dOVNI1E8jYxIbU7L57w6NaQ4d5icd233Y03jQff6Ca4wZmM\nDnms8alV7bP11WCChlC9YoMafHj9yQRKutRr1lfV+96lbOY/k26v4OTD2TeH\nfg6LxTGj7wYI+PdrEL25ZAa01jfMmWsdOYNDyz+b3bagtnUMz0OyxGXXP2Fq\nBjSoHF5LimkiScTKNXnmmm3XKm1tGfvrREAbITk4HbTRUsTBYnHo/iIcv6FE\n+OAgrnw+CWpkpNypE/Z1hRnodQhv5inugfhsdihImNCUfHzOyn9bGO9lw+jI\nBmJV6nATJJgi3OtfoSnGU0oqrejpvcYrRFPaupNLJJ9fVHxJOP9/s06fqPRf\n3lE2xC3j8/pj81pqvJ7nrC1VFjpQlbG1zujI/l2aCqTds5VTLi68RSsvJ0Kg\nNIVTTmbQa/0xEBVXuDPMWQf3SBhNO0belqz+1aX9B2kfOYUmUEZttAwLbVBJ\nQ1zBuDQ6KU7+IHXMZSnUvDjWTjKo5auNiVAuis5hVKfMpyLIhhECxsEnjY+0\n4Y1XYB4pFefTiShCyT4o1oPVnA9GtLd8UXHrYDk5lUKrBbKfS0xMrausFtS2\nNkEV91FDNWiuzJVlqQ+olf0y+i2phaXD2ibsBzRo87Q6sH5ZwuHbphJBRcRZ\n3bGC\r\n=gTRx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1811653a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1811653a_1547167366244_0.8444760427629405","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ec171b46":{"name":"primer-popover","version":"0.2.0-alpha.ec171b46","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ec171b46","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e8cb0e3f666760ea7232eca0661fd89fa9a450ff","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ec171b46.tgz","fileCount":9,"integrity":"sha512-lnd2fWwShTFLnd9k4x58wt/XA0tSTjdCGM1sXiW7qWSOVeUP07rPtCd1A1MR8tCSjLh5Bh8bv9bCfw/ZBSckQw==","signatures":[{"sig":"MEYCIQDMR2aVgf5/6K3f0xySmh/ETeZFuNvD+e4yzqKKk3C0QgIhAME1eropNEKqV3Govp89uki1SW2WQSUDobz1ZgtWoNQb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+hFCRA9TVsSAnZWagAA3B8P/jCsocg0sNAgrTNiKx4j\nStwa7RFfad5uxEA/5vPEMxawWTdYxnD/M3o1VOkgf0wLhfci8zy4oheFHkZU\nJsgjtg+hqIs70GoKHp2enObfkb0pKJ6VFs9+Stlg6Zv4PhbWviVh5yJjZ5N/\noUBvr0pMyjZ0oa1tNhPKrvx0vlX1Fmpe+dq8AdmQpAk4qv2bncrX5w1k2sWx\nzkU2L0lpg83ID2TifIOqplwBlsBEh3DzdUF1jH7ETSGMhTFcn73/wm+iyl7n\nWNLp5/Lb/iRONRfNG5Gz5IoH3PkBnmbYfDNZltfH0M36UB59loFtt/7UeAgg\nM06gIVGF5BzWpsat7uuUklQ9nN7U5Vet0dRMgl9nPlrtdi3uVzNxB2xS2tEI\n7WgEBHghpXMCJ150xhbzuPGPRIN/4E+7prAu73QGtZq6yltCIYT6z384zOHj\nsYyt3nAaM4EjgQRxPXcpbk+r+SsZtRlYqwWphAn32DNBMhD/C0VAFeEnQ5q4\nuaQOIXo1z1HYouhMDqdObVNDx+dT9MxoY6e2VUA7UV8mrEcN6B0CTPuFzGyP\n6QqZsofWLrtYcDQ6pssjoGjg776AzE3eLKS2sTOQxyXbnSp4FMdPfYmwuWwS\nQl4hm351WIB3eLQRUQYv8decB3d3lDXQYvvRjdazP2nIE7C75GNcZRKcvyBT\nfWRr\r\n=3NtL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ec171b46"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ec171b46_1547167812441_0.3235975704830458","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4f621c26":{"name":"primer-popover","version":"0.2.0-alpha.4f621c26","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4f621c26","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8a0ea40fa3edaa70b8286ec6009391f870e9fa36","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4f621c26.tgz","fileCount":9,"integrity":"sha512-fvcULpN1JAr65wNEBe8Nybjoxtc0vf41+QYJHkDrVgUhbccoE1Rvd1IAtltvKnxN+vjLtGGXbP3RiYvA8Uxhvg==","signatures":[{"sig":"MEUCIQDxVDknSAAAfpGPAWqmvjwHZn1A14baQTJmGODmYz105gIgYDCKD+oM23uF9LuUU1pWiyZZmu5g4U0L1SpmJ0Mw+5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcON7CCRA9TVsSAnZWagAAJe0P/154Buwp45ZoB88PJgiT\nPdkEbQDqmpO+/z2Cmf+tzRVxEjersqgA3tdtWtUz3RJCqelbM1FYVyOVNGWJ\nEjKHzpfAP5FF5P+KZr8g4rM+huGScKr9IEi25lgFk7NJUxu2vRI/TQ3QrRQX\nLKNSkQPYtn+BthC89wNPJX+dfcX0Uw8J00+xE94dnacrJDR0eRl+ZqSmzv5s\nSAsIWHvkLmjRdCoRxb8hbaV07I74N28Fnh9Wrw30IR+FWuHBr7E8bdtOJLqW\nZH76lV3tXVx9lT18pElrhJ2atBIskGQ3fQwrdem14Qv0sHxeAjroawbhkBfM\nvXe2i9KBXtssSrNQ1RogGKqTtAefP5Ww/Sm4DPMnulrE6APFucfnRVYnDjJ2\ngfCpNVUou/6ur8UQ16a4C9QOZOQP3cQJk1Ic9zF107sJHqWnWqQGRiEldnvt\n3dWgKizcf5C/tTu0XuobpytikGnRdb5tiHCb1ClWxaFtbcVPuMkkKoxdekds\nDJwDahbBlLN+SoFRP4bgqB83L8b5Wu4v/GTTaMoFJ+fqHvmcK/rtA5PK11hX\naLieFIfCEiB6XNqu4H3ZHHBy/Reoirhrc8ulhryNxGrY5juz/esU1t/0RBDc\nJNk63rDS8sGgSmv04jWKQiMQFjQggMVUw31Xnp80FE8Eb9jJFNA0Z/0Gjb4B\nlZiK\r\n=rN1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4f621c26"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4f621c26_1547230913862_0.14542136947037965","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c71b51f1":{"name":"primer-popover","version":"0.2.0-alpha.c71b51f1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c71b51f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b0eb475f630c1e1707d01785bfc33afb83ab959e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c71b51f1.tgz","fileCount":9,"integrity":"sha512-3sT3SfhB9rWMd+ddoDyOgKz3Y2EJjPl26NN06GQ4ajjgnV9duaijqqnknDpyORslnnEPcekvWNzHkZjDcy3c4w==","signatures":[{"sig":"MEUCIHTxXRV8Xa2KrE9OndMuFUlNXbMi0ZIO8yWr8glZhW5fAiEAiJhxcPIcH5nuGY4chMN2PpFhkJz9W06pG87QS4Oj2S0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcON8fCRA9TVsSAnZWagAALxEP/ih1OZ+IsvZhd76TLO7V\nwAqQ4y3dE8XqfO1z26wBF8qzAmlo2Qi+OVpukgLPQLb0E3eCAt/SkDLtaq1L\nHRTaAn1kyFjECYMqAcByANJ5Z4/L7eie+BQ8sKWQYAKntAcqQheIR9fOk50y\n2v7I97xvgXnf1Z29nhfvvHXsritV7YLyKqAwTGSFoRuHyFQ/+ON8YHYRyx36\nZFZpgZLgYoRj2/1WCfUo1HtlMexn9BmlDLiE9I/GE565x2Hfk8bLH+E8qATM\n3/4OSymNp9GVhf0vQ9Jget57tc7H54oryBkiyyEEW1TtNK8sqTfQWCBkG57n\nyVxKSXJgvgdxOjL5YX3RnhKXGQt9Xm+pmipS9Hw13dTLmHgmXM7SXwB4YI14\npChNXsdzr0fy0bmeaWlcRF8PL0pd8J/poLtO1Dw5UI1CgwTxp9A3Xdf7paAX\nz1WC/loRyGd1Ke+RUkZf6aHspfljjJ4S8WTw7sUiwo1oQaBW0wcnsnbWH/wV\nRZC2R4sqyWQvNQyP+xJnx5y4q6CFd9QSvr8A+fuJOB5xeHx1zETMUcJ2Q4M8\njVUEBu/BmQJmpU66tfkWVngfKBoOvmn9KaIxi7ynh2H1T9UvxiTXGJ2sl0gc\nLlNvJCU0cOMPwL+erZrZS+9Zt9zRq1CAkaSrCx77CcpycAqKu4AeSOrv9Hum\n+gIA\r\n=iQ4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c71b51f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c71b51f1_1547231006557_0.32349814569910795","host":"s3://npm-registry-packages"}},"0.2.0-alpha.141d2d88":{"name":"primer-popover","version":"0.2.0-alpha.141d2d88","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.141d2d88","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5e1f3aa07a44a4b6a0d9ca1ef63e66236ead39a5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.141d2d88.tgz","fileCount":9,"integrity":"sha512-Eu3Ir6NQmCfXbiC1UaV99j/wUvIICZVD9lOfZp09KO7FhvlK9tIvKPAOGZMPg3R/tv7iv0m2XXW3x8EqL8sbBg==","signatures":[{"sig":"MEUCIGfk9nlLIDtEHyP8bh56ZLntXNIE/RL/w8xOdlP3bYM0AiEAk/tfaY9+Ne2Uz3myZ1aC4l2xnx8WBK60gLvDFAgt63s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcON9JCRA9TVsSAnZWagAAFVYQAKNWEyJ8zHaUEsYMZg+c\noJWgxD95mII2Hiagbciv26pOofwPTtzW1CDCfAgbPHi/LP/c5toQVyPOymCP\nsi7/jn9jOnKifwIfUotQmi4Uf3WwP9q22bi5iyxk/LccEvxLs70fn3LY24DJ\n89aySIaze0Go9hepDpqeKpgjmQZ91X1M71H7NXp7NRtLIVbmgpBdbhsBKEX9\nw9CKLgDqUNWKCy3BlGEP58woUwbHS4fr43Sac8xnVS9YYpWIKKOO67c3kMjk\nzcUF8sexXwyPNM1fGVgdVWu8r+CZujpOYXdjKg9JE5jqUosSCVf2ob3S5zzk\n5BN30SnOVx6yi/qITp/33hmtk2YM6Zpu/d8q+Wt2pcjgj96UDyJqEM2Mb+qz\nagf98INq7PJzfpy8bp57GhpWdwKlDpFh9xxC7zN4BCiqp+mcd3B4ir/Iq6mB\nEStF0zrRmlPSqXFsJIYqZ5GCh51hQHMwLy59gvYoikvBE4Hu6c6WS7As6Gzg\natM/7lMTGQTav0ePk/lYA63rMPWn4LP66qvUkd0/ZPVnmKJfLcgisZYJ2ga5\nyivYCmDQiqF3Tjgmx27iCL+ST6umcvsV2fWsO2FjEZB2o7khW3KLWlelwx6B\nbi/8axPqe2/hmI56Pjoh3R007Aad8oDeayLLGVLJ7iOpcl4riSif3p1LhWxk\nInvh\r\n=Mq6C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.141d2d88"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.141d2d88_1547231049052_0.18266261143669693","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5eefc7cd":{"name":"primer-popover","version":"0.2.0-alpha.5eefc7cd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5eefc7cd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"764da591308db5812106192d986c2c104b7c48bf","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5eefc7cd.tgz","fileCount":9,"integrity":"sha512-QM3Eivb2xlkaDp1t16UgoxPandHag/bhoX1ZxiEj8/ZpZYILIKe24XZlIuK1YUADI7axuQE2Y5qXHwiL9hb61A==","signatures":[{"sig":"MEYCIQDZoYp5pD1VVi1FrUVNuC/dFKrj6V4N5WQluYEe+dGotAIhALZEqG82U4j87PfJe/Q3F1QFn8vjmDZ11dJxhKcsN5jH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOOqCCRA9TVsSAnZWagAA9q0P/A7cbFvGBk8Y7WPCstMl\nGwxGjo2OxuEtBB2gfBLJUtaEgfMaJ3+uzcseLO0m0YaMd/B/FSygzg2Fzdk7\ngekePaaAAERS4Y4Rhrksq4dXtK+YNQrocytvdLH8GL97UphSzXh6Lvg8FFJX\nUxypackb6rIhKTIcN1FRORevH+51q1kqoNzQK+t6vOUcvpeg7rt0Yxps7Po6\nomaAnOEx3SqZoq71OxnzAgTSNKr10kBWLtCCC6bbPZpOvBic6IvxxZ3Unmky\nVzBQMZB6uaXYtMx+jb/kbAWX3Mko7tTMl85UI9JxqoR54XfQoCUSkmPj5tP8\nuABO0B6SaOdV9WuxFLXi47Pi4ViXCUEwvfPNhRCdCW5uuSH/JG94xiVPvI9N\nlWbaI/YxTtP/bDGnFrQidKiQaetCfjpmJyAP3RKGYXc/Xuv/mD3qpgNxaS7C\n0Tki/o58d+S+RZ8E0khCFOoCLyerKULH7n8W59rUo4+Z/ePd3SkUn2SLjWch\n/GpEZpNgVWRiqvatSSpdz1LdZq4h/K1dw7ZnRaIRMJ2fG6bR9/EyHZCAeMhG\nS2AkAx161/MckLCZW/30JhSsTyIE9gmAVLDe2wXIV9ujhPTOXZwBlwyAxTj4\n13PzF70WTd+ZL1veUz4Wdvi7NM7dyJFNZv7bE5yim95/XaIy5KDMS85IpVe/\nRbz3\r\n=zJcs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5eefc7cd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5eefc7cd_1547233921542_0.5642143777488755","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2d2ba632":{"name":"primer-popover","version":"0.2.0-alpha.2d2ba632","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2d2ba632","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"09dc1fba023a7d6fafa6bd4288cdd57bfdae58d5","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2d2ba632.tgz","fileCount":9,"integrity":"sha512-oXw875a12CMZgrfQhgRW31jRExpML6juZJNgbMOyq0FZMVp3GuC4GVdVHpgiItIdkEB89A3lr9INy6s4HdVIrw==","signatures":[{"sig":"MEQCIBhezm0XdBBVjccCJrkkGzn3MIMliLWu2FbovV/oEPNXAiBafkv1lH1Zw3JtHVSdYAtts731kWOvzcjr7G7dWtWrrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOO/NCRA9TVsSAnZWagAAYoAP/iZHiBftqVTQjCUtqLe5\ns0+lMqXIfEWYCrXdNXNnfXbAEZKETGhCQhOJjmBxo9gYHd+3u7v20flHEMBs\n2OwBVM/4f8p3ey29K0671NUC171ltBesql3qCtKKlJfVNhPT3t31ZdWnYxA9\nRDioxLcFyR9fbGUVUW62jgrIDpxhSZOGjgVLA9sH1uq9dFcxEvyjOEbnSKUh\n+YABrItYeL85u51fXSOClLqxzNvHLUEHYb5cCnw3wEq4SRHzuozJoAlLMjEK\ntT6tkhDc+Mi/G9b7m6WRgzEYp/V1LyMRHe0CiTk0RnH8wZ4u+54OqgVI2lWO\nT4HZLkUkbP/kV97/pa8+M9KgsSdxc1bb6etf5tcX06uxFyj1S/Le63vtQE1d\n9QbPhzhj0AAF3kY6HC4ZudhtnjSo8cyMFtWRvi3/ZChDhvaT56+2veS1854d\n+GvBOM94vIX3QvJG+O4DWnfUP+S5bl+o3qc5/VFn8SpxtHpYTXu2BOPYKosa\nX+RB2XlgqyL+jvvlHh0dCroF1MaVAlIHJosyFkaRZI3FMelRJYwm8C7vQYyK\njPhge00St2BpKbg9q3pwElsnTdFDaIo1xUQxq1gTe0wq0MAqgzhRFSiYPdM5\nuaYXWAaFRjSGw+epGV7IR7M9CoH2zDI7sJeHCt+ODfVel943xAmpAuxi4+1y\nUnn4\r\n=NctC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2d2ba632"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2d2ba632_1547235277155_0.4030949955026566","host":"s3://npm-registry-packages"}},"0.2.0-alpha.cf5e649c":{"name":"primer-popover","version":"0.2.0-alpha.cf5e649c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.cf5e649c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"60db9702e2dc5311ab8d9767e07fdac0abeeeb8d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.cf5e649c.tgz","fileCount":9,"integrity":"sha512-Vtk7L3cnBv7MzXOK1byNz19g3WCEY0YpYFKKwyeVquhIyJ+J9DR/1QTkljswXVAjW/ey/PJpc9I5AxPHjfZiNg==","signatures":[{"sig":"MEQCIEzUu/OFeCQlAFS0MBUV02/kjADbwfpoJVpTm19eEkKRAiALPpT6xVwAKI0Th23O3+EHlCinlgHVxMwyCTxoiDC6eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOPHsCRA9TVsSAnZWagAAHrsP/iiQCghAm+sceUAM/6dB\nvMgir+0sPbTiHHr9vRpkmevjjQff9WwYc4JpX5sqflu5Tsy5uN2+SZzb3XhS\n/6VXgVlv6x1CPA+NsnQgqmEfxmQsytjwMhpl2ngh+O7sTp8wpsa1fjQS8QH8\np8qS+tVuK1v2fNscOP7AqjKvG6+vqGpNaUiZl+sZxOkXtM9PiKhvDFOJZtxi\n5bUfsz4Bo2qK8XanNh7ugysjV4TBiEgofhhvGDqxdFj0GlUBNYfKrogOs4er\nzB93SD6aciefDO9FGzYq/q9TOprQlEfrDufksPeeQKgpQdgDHg7F4nTrj5+n\nVG6NiBKpn7Wj3k8YR1RdBqrmpadHJ7HKyLlqsnFqVJr4mQ0nHN7cFUIQfSWW\nOiXaVIzoTyj6au5dCn2WHw0ZRjvtvHhtIQgq7KH5pmyGFw92Bezb4kHYEn9y\nebCYEdwjplh/jJxsMMXPr1dls/jofPwa4Fa+mBRPVep3LCFip+W0U4fDAeRY\nLPcEPdKlaZPeZu7qkNdxiy1upkxMTptxyCEg/f1lfgElD44CW94bW4gvBrx6\njvXKHK3fBhFeNmNJxfn+yDXrcFPOJkNIWbn9KxinIrM3snV0vxGlxVwERboN\n/ycciKY5laVOLG0KFfIDM8wjFVvub4kyg/BP1S4zp+F1T+hC+QRHINyXG7od\n5UV2\r\n=hZ7t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.cf5e649c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.cf5e649c_1547235819346_0.14218601499007644","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c098d806":{"name":"primer-popover","version":"0.2.0-alpha.c098d806","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c098d806","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"072d2b80f6bb632b8c16f19ac568847db9790b7e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c098d806.tgz","fileCount":9,"integrity":"sha512-wN44cQIIp+QxsF194YHXv2kSYXiFc4kiQp/JQUqieAH7qeKPEo2cqBBul+EtKF2t3gVulmvAcflXltpZ+OaEgA==","signatures":[{"sig":"MEYCIQCHOnPYOWspGxaU50bJuIvhNeACByKTJpjDk5VwOCdR1QIhANv7dpR5R981Qz4eVXvgQrI10yV9E/I/+/utb5rYC2jU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOPbfCRA9TVsSAnZWagAA9PcP/09GIbsOn61zxhdVy8sN\n9teEADBcXxfKPlfIZKfm3c3mH2GXRF1uHkDFejODzmjT09BXFowyO37QbF8q\nxqd3GDh9R/DyfRFASbJRr5i8RZjrscP8VtErNlD6htJdJtzD/IGJsoyKM4GS\nXVS3mz8jNx+NcRtHL8WqNFNHjfrvfFL+cJQVeSh1z5k31ytoaEfg//m4o6a+\n+r1YKTVR4muplh49WzSMT840jeacBYsiQa9A0aqckgnt9PPT62Ymas/PnrOa\novb9PzmAmE6RJ5l1X/5AGP42m+8zgM+6sSxgD+JVqCrGxlMnvAQyQTHWDjYe\nrfMws/m2zStA1PCZipOQYlplae7q8eV6nPsS8aqzy/4Z8amHdnMYrqm/GORC\n+dQYYVGRJMC4homTGQkmSpZYAh96M5FwShD77CLmXiQ6/Yh6MDClBfPpDiQc\nf0J7jRuwozb1RhRwBiiB5j16OLidiWBCxfzh5dqQYrTtX8fQpMg+50ycgWUL\n5BZ4I0jKNuRb7+Y47KUTaLWahtQMOvv5YeDM03W6c7NvHnu75CGmoDQIoruA\nt9VfKSAFNxl7OEWSepLa7ZuVC7dqpd/hZcA0Zy5mwUEXg9rOaX30dVsEbt+b\nYV6vdQFAvGyoW/VgkNMuilGsvL+lGHHgx59eUeJ5jLPePC/6eESpSmXjaOnZ\ng8WE\r\n=K/IS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c098d806"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c098d806_1547237086430_0.6154680961784167","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8212a1d1":{"name":"primer-popover","version":"0.2.0-alpha.8212a1d1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8212a1d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a07f3c213811008e005e440f9bdd79d128c4d771","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8212a1d1.tgz","fileCount":9,"integrity":"sha512-UwrjKUJWaSPzpl/x0hqpeoAMrRssS7vP+IHssnPzPjBgshPf9pU09Sn8j748lvcRZ/AC/R6pfoTIMUPcFDHQyQ==","signatures":[{"sig":"MEYCIQC29232P91TCSIhtLcqGAAa4VRqlx0ilZnu7PiihA3krgIhAPl/p4eyAp+SuANj+//DEMwCmjo8kOmxUjFL7osgk5Jw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORmVCRA9TVsSAnZWagAAiicQAKUO6LNdl8Hi43HBwEmP\nYnpcY+DAnq2o+X3vPCeO7SGsYUaor53cdYF19QApShY24aAVoyzqqokOhQ4Q\nQor7oeG1/0e6ywIxU+5nAJb656JL88VXpKTtiuRApTUvwhl0lgESy35TTAk5\n13FC4y9SXZ3wKRGzbr6KgGwUzLN9Ou8sVA6dFATUgLjbmTrafqCefpeM71H4\n2r1yS32mPlwSlHxFvj38MR6e6lMzFfm+USeDGpD/rtYehSXQY7gBXlMAgNuc\nBq+MbSeBKtpYHEDEPfMC3ynzN0TQvaVOXrmC/8d86tWUdtsVoDBadqzF2PGp\nhrgAx7o8MvM9xiKVkhB6ZYuiQR0WYAHd7oW4R9L0Gcd7lvWpyT9/RFcQbFFf\nonmx31mSyoG9RGTvcdCsmvdQyCxjd6Wq60pB1t1n/LFL9b6KtkF77HaYeWUf\nR4GOriQpC3HMmuLpZL3SM31LbHbs8xiz/NzX8/y2zzNO8x7CJcEFb/q6fo2A\nWaj37tKec57ufrNYUng+Ecp7Htsdbm2YCycnps/LtKhrNxO/WiJmt1JFkxmO\nfVLyHYUr7F1cq9nIJ7MwDlr0gdG1WamhMCcGe6rDeUgbSfO7hs2FNmGJq1sA\n+LStHv/tmJ4voFa9BvJ0hT9VZqWXfBVpx77BbA+TMrRa7lT0YEf/VL5d+ZIw\nqdja\r\n=MXNG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8212a1d1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8212a1d1_1547245972376_0.8357181089552361","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2d744d75":{"name":"primer-popover","version":"0.2.0-alpha.2d744d75","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2d744d75","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5ac72f27c6a4f24344e88bdda7f6f91e16823325","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2d744d75.tgz","fileCount":9,"integrity":"sha512-aMHc1MxhAODFTtBQ5j8p81TR1FBGqdJ8f8ben3gqkFMvRszd4cO15DgM5BFIdnz04gNmr+9qM+HDKs/y2d5cxg==","signatures":[{"sig":"MEYCIQCn+w92Y//xKMFG6XXshla6Fg58OoaHJhcnK46KBNOA8wIhANrFc849LH5Ng9vE74Gm9dBZDiAJJjBM/cWUasO6NgSF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORnSCRA9TVsSAnZWagAA5rMP/3/o9UqWPLqM1adqmJHv\nlbf065zlR2LxCpD4cPR+ewPCYmV8D2gSXjjEQ5xlrrtaNgKL5eN1v/F6v763\nORaQMn9o/AyNViA2PUJ2uH9wIJkfe/48dOLnzlO9VqHQnLDqY05RND7X2A05\nVvP9Say/XODL4AJ0SyBugV2rjH0LbYm3yWKs+jCrCveMYyYvRdHg34/uMXf2\nxUOVvsGgbHBgYxBdwZI3LK7d5qfIrHHa8vyjUGlxvz4PplKfugL+it2nPZpj\n6uuIUPb6t6gmhE3Z7lb8oaVmyaCJEr+tf1mh1wMLCnQEwuQyEAw5zC/RoT/o\n2S1hixDLLVjyQKqmSrC3xlnYs8JVQzC4BAC0NY2uhz915js9Dpo0Klu7dvlD\nF2PErq9fReWTjy9HjDVmST4L1KjJTV3oAf9tURSmcFn/1fEM/8Irb5OKAZpT\nBcnLl63832paYyhPdM72fnW89OP0UxUb0KYejZNGk4R2V02PnSNxbckx7CBa\ns/29CPcH5xuqe4kE6VwXxZA9/6TWUoCviQes/0Zc6XsQKltXudbsf+cuQuQN\nTCXK7G68Z9jqvhCJDcIOuxtewy7c/D9t0mkKZ8JTiJQSHe7fgI0wopNlHdLt\njhkInJdPIHZ66YEGaRoNFMBEUyQ9MMe+KCN5bO2rz7Uf+VFfec4XPA2RNjx1\nsxOi\r\n=ecfS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2d744d75"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2d744d75_1547246033485_0.7947326763712175","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7c2e8750":{"name":"primer-popover","version":"0.2.0-alpha.7c2e8750","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7c2e8750","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"53074b26078f5758edaab9661a1349e625f508c2","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7c2e8750.tgz","fileCount":9,"integrity":"sha512-FDe/MnPk3/2LSv1P9wSiEQfENsyLuPkDpa0VwwgT8mezgHx3X8TBUpsqfd0yB+YoM3dvn3zfpSo7tPDQiy7fFQ==","signatures":[{"sig":"MEUCIHu7yBLkVbBvYQGCIjW/RG7dw1ULQ6u/8czjhFTAcstMAiEAtWBQb3ZuzE4T8SKK9zb/ujt6R08Ra3ONPmQRG1K4iQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORs7CRA9TVsSAnZWagAA6B8P/RJsj0IZkd6lPWSVdIHT\nbKZwpqXxvSfKNvk198+HShfUtrIfUSP5ohpkafgPD37fHGbq17w6eRagaOjz\nWiMTq2LroG0krJ7NLFqC8+B/z7W6t4IbgmAokSVjZKzmg/ZUmV8vf1WeEt6c\neA892Cd/fjAyWXU+oFZF9D0Q7c4mwm88bfX4UpL8LUGXwVfk7pQoNoMFqsO1\nDY6lwBDtElGjmqx7KvbjnS1UrzmBHnKCNKAENFn+jF7EyU0E++52Ejrv1n9q\nucTGP/8/frq6XYN7Yv8ffroy49cUpbXHrnrdj8fE5BrQMB1fR8sXpjlN2eI+\nu08UbO/MYyy8KnCUoXEaS6nMbqI8hhv4cw1YreyY56RswW3xk+NyTTZmdF6z\nLlbBnPrPvZX2CrDf14/OfwKfdbbW5E2dkWOJXxlEvP8oCUUNpSwhWO+uRUsT\nn/2Sdz15AzBL/dc5idPOdabAuoLCRVna1dkbSf75jVHJ0zRcy6pQAW0buv27\nTCuxhyFLgd74khQLyBmX4XLO7WCk7UjpDDchoT7xXXGT77O1AnTjJbg9FbJS\nFKGnaVoSS0kxu8HiTMA3M84jxVUARayHTxaxTI8RCC690YlxWOgjAHkMLkm+\na1GhZty/0wkyAN2jWVPYbDDWmGkoP5XerduqnbTJWPumu6kWNWU7XLxQ4R3S\numIh\r\n=TZaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7c2e8750"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7c2e8750_1547246394816_0.8536054625887675","host":"s3://npm-registry-packages"}},"0.2.0-alpha.14293137":{"name":"primer-popover","version":"0.2.0-alpha.14293137","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.14293137","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8dff7ebe30153488eb65b993e55eb6e5dc3f1279","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.14293137.tgz","fileCount":9,"integrity":"sha512-68CX7XK1Vcw2MRr6/SRT+e7tiSvaxSG/MXg8MFgwh+/6xZoV0zWYqkYR+fDPYB5JEKR4gSwIDt0Oq9DiPhd6sg==","signatures":[{"sig":"MEUCIQCaEb0mRgl+nx67iGicq/V7+7kE5O+v/fdP829SyksEDQIgBrql6ZhMuuPIPzYTczTr6lTQiixYXDHp6CVR6ynjfP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOR7+CRA9TVsSAnZWagAAJ6gP/iyltzW1adURBlXk/6ea\nLuIUEnbUbhmnhhR2Dy3hM0m9QStWA5hoblPDR8swGNjOFEXueScTcBuE6Dv3\nCV+A+0T7VeDh2CiRz8Ck6R9rLt/01aGZKJ/T+kcmw31A+OoQYoAqq6iI1iVO\nzgehpLAsbQzZoYnNperVqRyHZLqmciBP365kO3v7SzEX19vOiNtGXg5i4EcH\nHqX0tSBYs59uieZEG3+n1eUrQeqxPHa1QHIaW+OHYltepvvxI49n9Qa9hZ1Z\nThUOKI+yDYrgRnIsZV4vl7lEHe8uIHV7yZ2k5UKtliO+2eG0ko45vOa02reF\nWXEBNi2RWKGvEvlenjxV6xaMA0R1IBJTc1hYXBzUjxizWjRcheRB8tVfn8rh\n043ZnQ46BVXtaPnxQ27JKXffCt730A7fp/pu0l7FS9FVH8nvSiLmVCGlNyyK\nvo1crLYFg7/ory3j6uOeAj5JCn3R69AZA/DO5/VF2o3MZTeOkIjatW0V9cFv\nt0Ddb7ZWe7+VJhn8KY/Sf6TR0GiNOuMP39G8rV/fPCFlvsa58bMWTs6L9s+n\nb+ySdnYflhZwWmRzHVEs8BCJc7MACXH5bXsPlhI+PXyS7XSQJWf0fYVaXR5U\nV6iI+ybufmY0nW7zqcarHsz6Gh87cP44dtb57CfTk+N85zqrA4m6zVUi0eFD\n1qbU\r\n=OEUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.14293137"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.14293137_1547247358022_0.386965669869499","host":"s3://npm-registry-packages"}},"0.1.8":{"name":"primer-popover","version":"0.1.8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.1.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b1d5ce1923c7d4a0c6a97b6a08568aaddaf77d89","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.1.8.tgz","fileCount":9,"integrity":"sha512-9v07joxBbnoY7bbdyGmuqqmRyVdAwm94Ek0SSuJXFX93UDtWQsgl4/61ko57WOZw2U7A3nMfY4uISIw+VPh2Lg==","signatures":[{"sig":"MEQCIFv+g7ksUiax2CsW9khn6/uLANXLqUOF4y0JM1Vb1kI9AiBcEatrxV6OPqClT2Q4wCrD9jKozIxAuZSOKTvJFpxZHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOSHZCRA9TVsSAnZWagAAGU8QAIXeybT6Qb1hVX6QCxgI\nlosz/8lcssmKjixyYF/nWeZ/8WWfNXUx3URI7B6KMVbvVwqHxdR4sXnUDW1x\nLkDB6+oECQoPp7W4VMI2jRcSEZHntoBYqJ+BqNzj6URvx5ASKZr+EuIDMZtD\ncLPD+1uPRuUSRoLm2xBT0W1XmzIXoPJmen19wq+jnhSAhEBE+MvvyzHYLPTi\nWBbZuisC2eRP3rKYWrU/3463OOn0389CKO9HdKgnEFi1xaYZpfuk0LUBAJFy\nyJKkYN9Qrb7b4GsIjUxdQmsN6XXvEb9DUzwet+I5Fea848PAyHysGTSdDIH3\nWobMtkhinNzyo3F7yNHvvnJ08mUZOkkw/7ibTQM42l1viiTDWifCkjs2cXAl\n85FfrFwc3BN7LHP+oS2XC1LIMhHMLf1dOEtr/RFcggEq/3Bo19oPuKuGm+Dn\n5uV7ljlqCe8cWZ+yJAK4+F1dNTe6UpaTt8FyD1x49x2f2vP3jltCXb5zwgPg\nDn7B/k7xo1AArhJb6+IS3Zhp5sIuJleCzJnNtqP8aFsQjNA1sDI3ZBRn2FaF\norEbN16X4mqVPjRNYLL3C9FwFlL34KBa0DsI2dUkSfy2m/koUU/vz25xhFZb\n6veRTtypBpwBsmc8vPxCSfzv4bfH3df+HFuK7KjB6bWa4ypd0MdebDMufYuy\n5MSN\r\n=VwoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.7.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.1.8_1547248088229_0.8454632399118196","host":"s3://npm-registry-packages"}},"0.2.0-alpha.79e1959c":{"name":"primer-popover","version":"0.2.0-alpha.79e1959c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.79e1959c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d4ad160e39ffc27e317430e0beabf1741dfef1d3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.79e1959c.tgz","fileCount":9,"integrity":"sha512-ezAPCXguG1vntrvJ2Bq0U+i2ntBBWuYWduVSfXQE3OpCVV8952yzuqx8ZWTjrlGqcqBEmIkR/5epOnqMVFTGeg==","signatures":[{"sig":"MEUCIQDKjvATA5trqzh368kXreU4dANmjNLkzSXIRfHZRVj5zAIgKCuVKaH0zEIP/u6zJZQ3fA0t98SeMnXRKCTcUPT+lNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOSRwCRA9TVsSAnZWagAAF00P/RzqUlizS+KlXoTeMtE2\nEX4IuRg0FA0JHBJV34sTaUkj/4PAzSpGA70GSyuUxY+BYN56Ta5e3gBu1v+O\nVhOfU3gl6QsTZL8IQCRaZ9U/SB2QSlVzdRPETDTQTFPpKsU0JuHUCEYyjLEt\nV9dX1nAMD7sLU4fiuSlQ4ZODf2s6wotUiI2jRuHPZ5tvSeEXyL3j/NqnvBfR\nPPlgj2ZPRK+dB+SEqwK4YLAgmdEsFqf3yUpxZxAvyrTl1Sm/LtL+uceDyAQv\nSAXCS8BdlP0faC+SekWbp0qlykdOjSKk5Y5+3JAppAT8GWt64p1VMrwnnCjx\nJz6MvbfnFHaQLHEZIlyhFy/Hzeb5KAxS+NGfwEmg8M4d9nhfLeyC7l42agg1\nIgaF3Dz6vsc+s/3eTGgnZbBTj2GETJFrZRdE0fxPXDi2UGLaILKeetYll2vs\nbK1r20WuqwyQZH1kR9LaZcWctRxrKYK/8aJs/52kPxRoWcf0/FMmExqqFlEB\nnrg6IwsLpwfO/DTa6//V2nv6JRBGjRxxY+2KB+TclbVlwImlUu6gKUL/Wf9F\nnFm7y5KhApbjOiIL3JtnfImxo8RfS4trojq1udMw9HfpS4CCZhktwi/c5HPq\ngy5woskX8xMOuZEvr0G+bO4CFsAaSZu5s952dEL88j8RAjyndu+0tyu6NM2v\nQmkD\r\n=ycKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.79e1959c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.79e1959c_1547248751205_0.9332556770135714","host":"s3://npm-registry-packages"}},"0.2.0-alpha.79aab1d6":{"name":"primer-popover","version":"0.2.0-alpha.79aab1d6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.79aab1d6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0207d0299800f7d2488c7041df1cea3307005e23","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.79aab1d6.tgz","fileCount":9,"integrity":"sha512-XqXR9iNiy57ACyUV/xDoeOlsRLqgDR/1Dr2js4iOqBVKcstVk0QQpSKUAwbIEZNnULDDg4f1eXiHsv3KhECTKg==","signatures":[{"sig":"MEUCIB+I1uHmIcMP6L7kya9F25ftlpGyuRku7jaMjeD+96i7AiEAk1pPrZOVySF8AFGCPIQ5yu9maDbl+/N/lusGdc6606Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPRGYCRA9TVsSAnZWagAAyEQQAJZE0Fe982/yTe4310TV\njP61Mmzg34NXXGbtEdArbx6GHDC5Y+Mv4U0OVTY9iETdGDlxpUxqmQvnyQtG\nJrD/vImGsvL8/N51ZxAP5x0/WZIr9Ne/0xZCB0NWqO1BnXJRGewe95EbaRLC\nUv3b4Wp+xKAfhRlt+253sN3ftPa/JhJtDxf3e1Vtji8iuNUtU71r2rurChWZ\ng1bKEQPw44WFFbUcwnLFd6zsWMaTDjnJScK4LLU9fxTalTFIRqV5PMjNy3oN\nnPqBItOtR2CDmQh5lZSjR3rOoM06+lBcxZ+drqyuycb9d8HhEk3/01FsY83q\nEHtZ95B0IVJdkGQ8VGtr90+N0i5vlk7ajjnZgKLudqTsMQf+48vUCjvem5Ci\nR46VecamABq5Xs+TnM6CjCJRlqCld0LBaRxqD9s7NRZ8RhQt1YZ3v2VJkxq7\nbhcyzHMRnLNuI+ysTS/SvUR2GL1dc1vn2Ye4dKbO/KIAsL1lixMR7YsAjehh\nX/dI58qLb+Ymyav1kKeudcIa5E9iCArGZuQOwuxAC0/UaoTlmSEHxMXznSR0\n1GoIGKIlNNUFHGE4HqOxA4Oo7atKxt9KNBVQhFmBLKc/rc73xiiYZ5OTQ609\n4z5WVYNH/U1uFiQCF9XHrCF79UbKTXzh3lyy/qnZBG+qEtsV638XiBYSnG/w\nxXmN\r\n=1HWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.79aab1d6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.79aab1d6_1547506071542_0.2949131318118916","host":"s3://npm-registry-packages"}},"0.2.0-alpha.f2b57801":{"name":"primer-popover","version":"0.2.0-alpha.f2b57801","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.f2b57801","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c7168334c35f4b13eb528d90e93e29465b5459e0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.f2b57801.tgz","fileCount":9,"integrity":"sha512-xAee9797/xKg/wMKWHg28dzxe3piwednYECxyzmGC/LRH2ruhEDUlYVt4Na1yrGDUhPTlZ8jrHQ1f6Lr7xdeNw==","signatures":[{"sig":"MEQCIATMKWgtLMc1RsrVZ9Zb+1m/h3OHAePEdpcIpXHrAZ4AAiAaJNdF5Ih5LOi7b2am2znc95GsFH5i2qZDs3CsarhGwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjXBCRA9TVsSAnZWagAAOEYP/0EByWTjTnJgZsCXYpFM\nUEPcG7aJkRJoYfSqg1oY7jtK/d0+yzl6ir9xcIFzLQ/I5/zuSGsiH2z63xr/\nRy+VAqBtDtJ++yaUAsSaKNDju2oWgQGOsevb3hw/wxRL9n7KVkwjGN9EMAI/\nt1JpAUSKK+yq1Vg2QowkDmjhyvkn02oyjg0qV2pAdk7qLZr5LaD6tgmWjNR3\nxJyiXkAS3ktxCjnxQ4M8xY37Tgy6/dnYrioYCW8lXVobCnPnfxyyOrTfF1Hg\npYsFaoLcd8RkoExWFDJmMPXFZCGlDsvszJbZDJh+lMG+GxKxCyRHpquXLFFM\nGmjI55L6xERqbW2eeEiKgnnMuODeT9b8Ea82CNgxikAqgYUr+lbrFcsuqaNS\nAIPlMwd51zOE/B+0adRZUXLvtnxZjIrHOfYyw/93/An46+p1WolOv0dmy3OU\nAnYCpxbdqXnRFTbZBXGlVtgDMzvT/qo8b+6YMUdJHNGqD7UT8YDREVXhJaF/\nYsNttR13fUHd+gyn/2ZrozlnHcEQF3H/I7cI3S+nBrmlYgGBT80/DCx1U3vE\n+RNvT757YQ3x6Mo+shX35g8Q1t0H/nayCUYMH9/PuGQrMUZg1GMTJcRjEVUs\nglAcOrqeJrzb6rV30kxIpXxHw8v9WvRiWVqPc94ltWWDkIe6eHzxclDCsBgS\nPV1N\r\n=gOvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.f2b57801"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.f2b57801_1547580864961_0.3088152501108419","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ca348b59":{"name":"primer-popover","version":"0.2.0-alpha.ca348b59","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ca348b59","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a394fc0790a60cd68ad83f58f6332cff7c81852e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ca348b59.tgz","fileCount":9,"integrity":"sha512-RHuf31jH3D6hHJS5QhVB8ciNQzhpa6CkOjh9U8U8Igxj9SptPBF6aY7NozZxDOIFonlS4xiqQMOXgNGgC2YAXQ==","signatures":[{"sig":"MEYCIQDfixuz3s+B8CZbYFsn74Esym+Kfp7qA6HtRW3Y4MCFAwIhAJvQUMiQyfPkJKVzCdWFmBqGt+YcwdBUM18z/4PBJcpc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjfECRA9TVsSAnZWagAA9XIP/3QEonFPgGgmF0t+Bq+L\n1DIdQNPzt368xTqMqvqQeKuAB/OjenZhl9iUKyjJgri7pchwpu8kuQyacqix\n5qan4MItz/jxUzQUU7JRTM9mzfCzaR7JBvp5YydpX7ZUIqOCXWQmLJuMJl8+\nZ8bfDaxUzT6BQ6zHesvCGV/CfXvQcKWHQFaVmdMxkjD4xMnzvtK63tnb7+zz\nIGOjrvCB3njdJ4h49lSz97ns6hW+ZTWh+YLnLa7Z8j4bLaPLyxskLXoH/BYE\nh62mLWkPasgZMa5QsFrDqm+dch3UE9bUBidl/SbKzquLEatz5/lLZ2dpFipN\nJZZzancyoIZXTZGBtvK6v3eKUNQec7XEr86dUW20YAvXoxnrVQtKZ0MWwlsN\nBSHxW/nS3IhW795unQsz7lXIMtPKkv4AoAgDp+A4d8xI3d31I2/2ukuP0iJU\nYuPRUqCR1z5VvHyo+qfied1xUyJQZjzkSVzjHeqI97Ha7f7ADBA+g3PC2W16\nQD2PS2qF5h8H+wVo7bv3LYmfrsLPYnvfiD/w06sJaEkkqchLNqaoutAGsj8v\n4dY8s7Wnp/XWUE4dwK/LyUkQcaQeS2JnPSbSfm/A0oOpfVDzCml7a25K+AOc\n3o3jxo3RNLG4SAKrBEYzE2ewf1XCnnZVM4ZqakJujaMUNh1bBlQImQ0HDB38\neCfF\r\n=lBzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ca348b59"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ca348b59_1547581379732_0.465196005486324","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a5658d30":{"name":"primer-popover","version":"0.2.0-alpha.a5658d30","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a5658d30","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"737970afe7ae7540070333039a94c397f5009c6d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a5658d30.tgz","fileCount":9,"integrity":"sha512-BrM7L8nohxK1roJQGR7KV1vIc2+V9XGgT0/UV1I/MXBSbpy2IZ9temZ5iBjJdffb6oWsczS+XFb4cIGtQFFzOg==","signatures":[{"sig":"MEUCIAZ1vq/FjvFfOXrV3qTCcV7TV0PeoKCAJaeU3DFTpZLeAiEArrznvfW0f0CttFqMApbKfAggc6vjMB3sLTSpgE9jZF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjf4CRA9TVsSAnZWagAA8PQP/2U5DjyB+NYleZzhp7CS\n+2Kt8hcUUSNiJGU26vAREuG8rVNjObWYW/4qI9iWLguxC/1friX0ETgSkO6e\nHHMgnBoPkKz57d/JJGL2mReG48CXnTlZ+bXiJalvco8GBNwxhjyTbzNkCQFd\nPBPteSsaaFM5sbRSN6j9VArSRgq4q41KxCWRbILqoApbwd+ATibKz1rhUPTh\nf1Gz6PijHuxRnP51mzHL592U8lFiuk2S+K4+mQVo8+fStDdWFMTa2mtFODDp\naLtqLrSEmwx76LUjKVK+wUOqarq7yt0YLWC29j72x7d9bficbvVZRT/BL9f4\nOyEHXHBRjMDS8Mg5C8V6FaGdIwF8/RsF0FedKY+BqFFQTczdOJ3mez0qKxgO\nwI8fqgGEOKPRMoghT0F2/3QZlk0qUzJTxmwaHNfWkna7gmz9bn933DmJsta5\nZBRKiHAuKB81UPM20o0Ge/HgnvTz+gmc+8VxKdr5OMv0v1RpfyPKtEtJR+d/\nIyadD4WUaGSMnzgVmJgS795oy0m7rPh2h92NjP5l4689g/avckcSCVasn/xK\n3hDIZQkGuHBijzFuLqOTbdsQ+bne3iuJ+lhDs2pTIeCNu9jWmdfAYNdcZXGA\nzO/iYu0I26pP/zyyYa7Xvr4nLsoK0/wEqULQN9jNT3fpKXoLhX5ePKGsL7Pr\noxJt\r\n=bgXI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a5658d30"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a5658d30_1547581431722_0.6222128478525668","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7941d537":{"name":"primer-popover","version":"0.2.0-alpha.7941d537","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7941d537","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e48efb31edb227074d2bd33aba4908060616549f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7941d537.tgz","fileCount":9,"integrity":"sha512-BiEseqGOP3GhSXfMJCnF6ipPjQSyOweekunLn7EuEu11lgDEtTcwuGMHVaGRwUeN/0QwbMbXA6iK/dfElvRn0g==","signatures":[{"sig":"MEUCIQCRmRMA2aJGuhnDmYWpnv6ZBBJ9KIMz7Td40bETK1AE0gIgLuB5RFtVq3dCHnC+RgQ/1T/tKCs8o3azUouO3Ej+kMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjrsCRA9TVsSAnZWagAAODUP/2hbqFW9ZqcLSSwzzqoZ\nP3+UZDglDd9V4Ho+G+3Vp1JoHaN1zwQslRBwriAzTYI+n1VwcAtReVmSiD1P\niV7mvZfBALLWSu7U9ZY8yqsOSNF4NIrAHRpHABa7N20EXZ+HED74VPnVEyJb\nB0RVeyriGDnogrzUdvHPjVgkw2fySYwOIR4G5zkQWOvYJ+nGpBkjfKtZow0y\nw0jZS7OHeFPpcSwNwdfZbZsB86XZjrCBvrS7OuXLeYngzfieNUQcGfe4LU6/\nRe22Dg4KAO4FjCmM0s3SVMUUhr3uehTvAKX35mqnkDs5Xmz2WPpyUuPj92Qw\n0fISO+CtJyYB1wMPET/36Kk20w54IhUmYq1XR2xeBEFGYDr8ZAS5BCjcvjQA\n8MjPvrrjKNUULOUkt2eYBDUZzEnbJA/ZjolohAZLg12aznW2mV3en3vFWqiL\nJq6dTrMwcnl/2wGZtuqB3Mn9DjzvWAidj7NJBO6j2GJA3QMuDcGsMHeHpL4R\nTfSEeHxbFuoT4vYHIpm391YbqCPbINaavI+PxnRHCD1BNSPbkU4J52DGEDUT\nW4Oy3TCg+t7Bzr+sTcTlwnIPJeNBtMZY/7tKlx14rj2/EAewSrsYwbzeHQB/\nDAxRdjbI5PULyjScR+yIHUPLI3zZq2bLk0NncQyCz4+ZQD7g4fXOFoJb1Zbs\nTsU9\r\n=+znD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7941d537"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7941d537_1547582188146_0.9204568081825777","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7a0f07a5":{"name":"primer-popover","version":"0.2.0-alpha.7a0f07a5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7a0f07a5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fbb5b99efbdf5965656cb744167d45f0cc804a6b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7a0f07a5.tgz","fileCount":9,"integrity":"sha512-Nm9qdZNXgEnmdCi9kgBgIw8k1ca26JySvqyhfTk+/1FaAB0JdNLXTWjex1QoxUFlwVq62Z7glmYMWv6B2PcfVw==","signatures":[{"sig":"MEQCIFTTM9VFNOpM0VCClHRVXqprpcentK44iiGjOJeL7fIeAiABmiMm2irZacHmiguWMjVrLQ/FDUpOPTZGEUWBKpNxEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPk1xCRA9TVsSAnZWagAAk3cP/1AJcojuBqlMFgoZGc+v\n+RhaQ9ltJRuVv0YZdjCcEcTqXy1cRNAsONoxGvV9ONqhM+F9n+cN5hAOkmJm\nysbC4qKxCfVzk5jrSKByo/8KBFrpjZulrNGb0zR/lV9vSt2yRJmmNziEH8/0\nrx9n8ltPCSp6c2V0gUILXcxxJerJGdwHw8C6UzWVukxnQiOJhNpVOVQZ7w7Z\nGRkZ5ie93zy2qXtg7jUUR+KVNg3M2AqQ4KWNiasJl2G0ah3W3D2f8NNTYjsT\nTcO6HtIMme7uf1l9+Pq8WXEbky1YMyHqB/9DypdWCdRRhoy3F8xsL5cxwfNH\n5V7JSpIHMPCSVk+IZKJs/f9+1SJH14c1Rs1+dQeDva+ADQpu1wkFojj6YIkz\n9ngatgvKu4oHDqL20CHvdAzVT6JJxLcgjE8f38M4BneOkBl+VmOQFzRNV39z\na4T0xpz7Ni5zondbpRBD0piTU7ktXLUvlS3P0rHGq/BUji4tLHf7G84unncA\newm9YsbuTZYxdIMxcL1wNxjyfjy6Wj1T9Y78GRjkenhKd94iYUa8UEZCXgcg\nbY5jxwE1T0UYRaZeTS/OpN68B5oswE7vnyVXoz5SFGswFixJlcRG4NfTDLnX\nLHA+Gjjmj3XWshI8f8/XQTF76thgZ6VUslLpfzA27aUHFkYHFW+tbHI7XtAi\nty/s\r\n=kzRL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7a0f07a5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7a0f07a5_1547586928605_0.11193429171785052","host":"s3://npm-registry-packages"}},"0.2.0-alpha.03430b81":{"name":"primer-popover","version":"0.2.0-alpha.03430b81","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.03430b81","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e3550f4c447a721c4f2c2898fc2136683041a1e8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.03430b81.tgz","fileCount":9,"integrity":"sha512-H39U1DBAyKWww9pGzsv1vqlWXcOp3PVSO6jAOe5om5ccZwMkgE23/IACHfnSTlsagzN7bBvZey2ouFqwdZYqBQ==","signatures":[{"sig":"MEUCIDqDllFztZqUA5wMrcLtPkRnXQD4IHdhRBgtMI2VwEMiAiEAq7TtfIdznavca+ETwd88tIdZgQZ7T5dVIDGDrut/RMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlGWCRA9TVsSAnZWagAATIIP/iOeta/iizLrT1Tkufe4\nMMpvZOrC+cQjSPzXvNtukV3Uas7gh3MZ6WKkn7uxFIGtKlqDKRVaRFvYyhVC\nDx58CxaHCmep69AxFT/eIdGTT5IwXmK+d4F1otQnCCWTIa4xHaSUTc6AoDVe\n4/UPJAZMJftgaLpfYfzlO/GnHadtmkaawvl8Shqiw3AIkOX2bKTdHLcRYTcL\na/lFtCoOmZO+Obs+IP481EUSAjOhmYYwGxz3kFTkYSZjI74gCB5UXAdHcDiI\nYKkaeqOoDf2Un0O54JtPyR29/Q5S2M9w+ZHWJ8WZgWBHowUPCclZaj4uXCuq\nGh2m0DnM9iRksy80opCBITV5AGoIBc+lv/0WFfEFgcSKHMoonUT0coK4/GCA\nkZJGVw4s3Em9rTyq233nTjhEOxYatawVEPQVpQQ2Vr9pETUdnop/veASxlx3\nm6WQbvWoPk7v2V/vORHOVo01mTrSMJm+odrsqPnKgA8hjwXyHMfEgRQp+wYV\n/tP0EwpXN3i4JoBaJP4AMnvC6o1fLbdR8ZZL/joQVykA4VO7sOTbLQCCu0aL\nPc3ow1rspHg5OfG0w3EYOO9pq5syFBkVBANPMCN7Rjyop8QKT3T/nH6pBEt6\nTzlhfclNLH/XJ3IDi9uVapkg2+si6v32mldfRdoAh7KD15JdBBlBezpuwtVI\nULy0\r\n=z7gi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.03430b81"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.03430b81_1547587990416_0.8385488482449641","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2aa63435":{"name":"primer-popover","version":"0.2.0-alpha.2aa63435","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2aa63435","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6575748ba19be52dfe3ac24c6dd85d3725f07072","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2aa63435.tgz","fileCount":9,"integrity":"sha512-S2wXaTGEtBrnPBfEFfMPNC9bPw8Wpd043P+KkIeCKeOLYHVf6P53buEyNUvYvMa1bJNFb89gloOdpsXkSwZTfw==","signatures":[{"sig":"MEYCIQDmvetYHLjI5sVknkkDoaoPZsd7JroNmJPu6WwatLdVDQIhAINd2s9K6OVS5rT9i5+wn+4/DE04ItmeazjoAQGFz+9V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlNfCRA9TVsSAnZWagAAmgQP/3jWZMKpMWcmDMlYbwRy\ne95AHheCKhxz7DjpQcPmdEviyp1J4dVUBg9gmaSqElwqofgbJs1tarp5/fZL\nysgoMbyqRudVYitsJw+uQyNgdrh2w40EzeHmexlim97zlYPGziayUMU7tdBi\nYNUfZSY51Kv7eQgbWQ+tDWlCVnfB9OcBQiX9COywKvj5bnZFutPwIsHLV2wn\n+2vNqY+IBtLSq+RIoPopqIkyKHKT5nOjaZSUonHBLr2uwwHChKi78VWfl8Ei\nsoFFFVBNB/bTeCmEPrMWL8vhnePVuSDBVy1HiCoHwRF7VZjO+xlNqnGY245n\nwc/yAG2t1IS6nEmL4wq14bIiyJsVFTLepV4HIzQioPc8dADqp1iJP8BMix66\nCGoDZzsRkS8cWgBFP/T0QM0Z3uXlqo4u1w1EXkF8g+J2vdtGx50MwDdNYORg\nnbAEQ32+8eLw8G7GoqLA5BRpyi5sai2gzGEJdT3Fo7eVPrEyE7H2XvA6DY32\nUyE1RFM3S66GvAtLWWUtW+I62+kzyX3Ie5tfKcsbcgP6fmTfCIGB47DG8sFf\nsP+qWcfnb5kCKngo9TjaYgTWXOqs3S2g1gxfk72EaDHfPJTTtPUQG7vZXwiv\nTpHXKBbpGdV+0g4cF1rd7ro0vCSPd+9aS2PuW+L8f8LanxW/z1C/sjVFzMKa\nqXYM\r\n=msDO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2aa63435"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2aa63435_1547588446988_0.9164050278985905","host":"s3://npm-registry-packages"}},"0.2.0-alpha.51dbf9ab":{"name":"primer-popover","version":"0.2.0-alpha.51dbf9ab","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.51dbf9ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1e689f07bb46de9650f0dcdf1605817bf0521dbe","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.51dbf9ab.tgz","fileCount":9,"integrity":"sha512-MDWeYmdPXoUnTmCkxuFvePk0vF8ZyszmTQHOiSRBaK5O4aoOLyWvJvHI5+y8c7VqtuNzwITSxpHwu22n2HBNIQ==","signatures":[{"sig":"MEUCIQD7uucAZcDAaHPmL0jRTeAsfkPUamZD29LaxwLxKgVZLQIgCFOD4GQyEgeYcna3pHUVYcU77QTf9TKmwu8Tbpq/CJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlRoCRA9TVsSAnZWagAAt5IP/R6atH2/zR9LKnNmq5vk\nXNbp0Hu4VG9vyyhgUtbcHE3RNWKzSI3EqeQKRYa7iaml5AcQule+VM2yJPgH\nmFDBmALiZTiMC4wNcKp6zrn2HEt6g9QI+Je10JYywynKi69hHgtexoKFYfWy\nG8nVBB+kL0WPgnOjB/VKlaXLrI8/YwLMOxOF31+ECtNyUCYNuTdFDQ/TpUv6\nCFHhAoK1aCVIG7ENQ9tUQNTM5TUJucExlLXrEITnBflJa/7IefurXYJrjCBC\ndpHno2a3ttseB3qQEWt5MJRqVw0/UqpdAPVK4PapyCRQcXEvROXZ5jMjDc62\nLV8UOzYhOFRUtph3nGg3OC0NnaZ4Wc1+d1WOaa62quhonap+V6Zf6sJio1oX\nEqrQ4UeUitbchdcgD/j9qbg773q+bYNh9XqM8O3PII7QqTLWsEE9DrbAb9xH\na5eocyPzpOlnuAQrJNbufZW5G3FJDcPxzNravLu2UtKkhONQEPJYsx4DrYBW\n9+6UXkuzqv1zg4iGh2Usv//49qgEsx9aUH90NdPnce/XjXLko7Ltc9jozqwN\ns3DQjzvtqULZ48r+HthuXJpE4KPZlnPlrhUCofQ5yNUR9F9/o+e2tTIvHXZn\nnbgCYYuu56Xp/rmYVkHM+IbkzzzMgdLPLF4daBlh+KqNyn5kh22E6OdYEmNO\nZ+eF\r\n=l7vF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.51dbf9ab"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.51dbf9ab_1547588712091_0.28595817000747825","host":"s3://npm-registry-packages"}},"0.2.0-alpha.87aaf87e":{"name":"primer-popover","version":"0.2.0-alpha.87aaf87e","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.87aaf87e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b469a8bec2b9fb1caebcfea0357b3402fcc9d360","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.87aaf87e.tgz","fileCount":9,"integrity":"sha512-f4mqRbkb55zgMvHMMEQM04XkkXjPE73jWzQBLFzLduMdg0USx6rCf72NC8Tqw7/VOWHeDtbUQ7qOMTlgxyn+/A==","signatures":[{"sig":"MEQCIFF84BvRJBs3fXDu+IWAHDavLHi9D25AEi6JvHeV0VK5AiBXVauzrEjUUZAOF2h38KAZaLUXqXUNr4F6Rt5Gb2s6og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPl0VCRA9TVsSAnZWagAAcaEP/1m5CbTEeg2ZV9mAvRS1\npTnfbw03R4JHoiqvjQXY0SFADtyZ/3CRf7ErW0puFKE+hWvWQIo39CE60DkU\nDMNeSFX8O1J8DLpeZ2SwVlFHyRHRG1W5sEs1IbugDzgt4DkAMgv+AW8F8xc4\nQ/trY9pj5VWz+kN90p8zoPxXK9q3HMIi6iLnnHtKpnVNimmui5w9GD7p4kZk\nCwe1y8UwHqs96/yqOGO2yXOu0RPmdosLxHFSCvxU1o0+A9HOkFrAEO6O12+d\nurd3hUwK2cXr0h6lEnqIIgo38ZGx877zGzNLYwK7jLvvGzqJd/u1/NtjvvnI\nN7omoBlvU0ylspJGVLnK/EsrCVhKufOkAjGWosk/1JTBk7oid95Oo92g3v0K\nc3alNyZJ4rUsWTI7uh1Z5BTq3LOAA56ueqMSC+ookVO7x+3XSfSDUO7QXAAX\nUG5ojen0a8/+FawpYEITAoi/Q71/sJBe+fBvk2w5FXpmNQW8MIisp3FlJWuU\niJDkeiLyEYGMbSgCCPPwAWQmTClOgu17EN4OTOwq+TfrKrK8uEDW2dTiqUi/\nO2K/oWO4D8qqTY4XcKZDm+85iefXM6VdKspWWeF1sOdEwHns5d9DD0v/nKsy\nEIpzHQJQMNcRnnsY4Nbp0SPTVmopFdds+Jgzeo1t0rquvHGm1/+pUC7WZZhD\n9EVJ\r\n=lbc3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.87aaf87e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.87aaf87e_1547590932779_0.676491426408451","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b1478763":{"name":"primer-popover","version":"0.2.0-alpha.b1478763","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b1478763","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7ef944462d8b29fb35c9e9c6e2fdd2ef8eff702c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b1478763.tgz","fileCount":9,"integrity":"sha512-3kCvAe8+nPXpz6XcyAI49Szo9fu7yTLItSbSP1sX4k1zfAu8huXkbMroJEvsNiInZ8fdDc/qRrqBn6rrJ67gtA==","signatures":[{"sig":"MEQCIFL4oOnZeWsO8bYQzsIMSFsvbfMIWyJQbkCstIRznZ8SAiBePXfmv2igj5CEHw5O0pLiCIjFxu+F0jkfnYTLcrBsGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP7jjCRA9TVsSAnZWagAA2z4QAIj32u0WqFu8DKFDrTjP\n8F4XUueczQ8McXLEyBcehLYqK+W1Km7453zmDk0j3doi6T9Xd/F8OyEz88bF\nPljJ2aIf0IRJj3+uahEIV4aJJW3AEUNAwl/3HGVI4bPB0GT1ApVYp4Bx346e\nILvBJTotqyXPb43iInhaz2NGF4ZEw1lOgbFe7PSNaDlf1HirquAoKldEIgFy\nHl9Bz0s1e39bDrVBPgVVKWwaNERoY9iTXuJAjW9soJW7dv57NJ3/mbvuh5wv\nKldmf9FnhNWkK8kEWugpC7GHUqjj9bIDFvQudBGlkHnZ1/4BG+xvYEMN8B5I\nyLYPsdVSnNShpzzEXQQJswXxmK/E0Wmdg7rEOB3mRfsPACKSY2WtJ9mOj/l4\namQ/VNBWhSCk3rNpzeTnWLDd/M7JKiGaQFAC5EiVfXUlzOLDjRfT+zWgNKTk\nE0sEscL14o72jLcQoYtQRYAdNYkisHU0AD8M1Kb3hT34bG4ETsSksCkAxZGV\npWElCd/zghPNt6wMIb7zvdINN1HusJqfAAcTds2uqDGkMuHaJeNkaYbkgNwi\nDC/SNlgSvuCbqV8ErbDh/TnLv83pgFejLs5e3cDp77sDp3aB5nCdUBYmn8dA\nb9zGEQKLDEec7zTFtHhBJBd33z1sZMKBxKWC/MWNwfqfZibc7+iOjJZR90VN\nbLpf\r\n=vo7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.b1478763"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b1478763_1547679970774_0.6819701000947549","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e41bfddd":{"name":"primer-popover","version":"0.2.0-alpha.e41bfddd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e41bfddd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bdf28b4864af806f5590cbf6bee2707c5e8d4fd3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e41bfddd.tgz","fileCount":9,"integrity":"sha512-SBBHVV3ee2l2xLPtavUmVvR1EUtQSG8WnsA0W9KQYQp7vXdUian6Uwq+sKBCO0k8jQNSfc/CpWCSVb3/UJriXA==","signatures":[{"sig":"MEQCICzKMcvKKofnhGzwZxLChASo7R8XqK7am9mWTavxXVXeAiAWejE7/v5hPKpDJA7tCrkJ3Lr11Fh7EnT6E3yeibM3cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP7xDCRA9TVsSAnZWagAA7Z8P+wVf/EeOpbK55uLOCW0j\nay7paNWkmcUnw/KCEM6CBzEMUDZESIzeKB5i1CEkHLgwfGGTUqX70l4zc+Ea\nTq3yN1nzRsSxTX9g2yoiJouHfX6YkFtCUqBFFmOXNGNOBP0kdvswvL6VzWim\n8KZB72uLcKkbHLCeBzPPcKyr7jHQ5QnJykCsTq8AK2NT7cEzt8YDqbqrvAf6\naH6XJk0VewH7Rhj2+q8/4cEJzhknA1NSAvyhoN1UFouNqf05PkXUyXYHHagy\nBErf9t5woIHBjDeYaXOfZ1u6jOGlPBY1UN0qfgmN62Saqz51tUev4UCk7Agg\nfTMlD1kgoVbNpApB+KPpjnyFBtZ/ydj4WKwuhOixZLGHv5PO4E/lCuVZeFXl\n1mq0kiC+xxrO/Pgwck85wSP/Kbm+IyubZoczXYtgXCGyhAa7krc05flZqP/2\nc5WzCKFrMm9wj+XPRlplwnVkOFygqVkAWsrWn/HO67Vx06ibp/XskbpoGbfV\n7ODm0V9SKnL6z+BpCZgwdxge0/lGm3ueZ1TgZHtkdcAZtFUf10wYmsoGiwci\n5KYdPogTB7xgDPPkBz9dmFqmB8F5MtU7n/JHwszVo8v7MgKQA5YbXYkeOPJD\nBdmw1pIEX+pOCKqNdVBbEaapTBdPFt0i0iFcOq5DXnyCA4w/zSEdcha3Ykb7\n+Je0\r\n=ekzd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e41bfddd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e41bfddd_1547680834590_0.5348622897412434","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d93360bc":{"name":"primer-popover","version":"0.2.0-alpha.d93360bc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d93360bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b2b7d924dbfaf63eb51018a2055b3480b53bb0c4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d93360bc.tgz","fileCount":9,"integrity":"sha512-afHOm+u86VdWlmeqQz8P6EOX3MLi9Vnbw4GoE5YAGI6NYMkZ62bqgLB8JetwC4DW4uO+WKKH4JR2kaZiCEZufQ==","signatures":[{"sig":"MEUCIFifjsY5gxOAFKAyLmWiIHXd2xJmHO5y+2u+RsCwpB5nAiEAh9U+3pLy+eTIVqhEo+EjczbSdf7N4tG+BEq27KRXStw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP84oCRA9TVsSAnZWagAADQAP/3NT8sj94LX+Z5hU1rhe\nZvg6yd8p0kOv2wRIfJgBMjZre0N6MW62GI2vt17dxlAeqpIROJa0TGZcbh/9\nlro8S+POdcESNnszSOu1Zcz0S4ax9F+kkDaVv0FNSICfTcZZu5nzoVCXiKR9\ncrwvw0pNcUIBy4/u1V0lRA0vptCle3wAmyyb8Tk0S+hi6NwvqhJ45VGP0cQ+\nGb4Fm86RnR7ccdJhLjzN0UzChCunAARQmCB2c0AnzusOuGnSZmhWzBOqM5Xb\nCrREWvr3n5DhG69WW49tOrNjwVq9kzhFuioLXDk67xUExspEotFA4Kd3X6xB\nfWlqihqh9f2B4iEF0KQpidof9R7sUD0N4X5ueID1yFrpGHdiZfC3x1oU8EXM\nA0BlRvFEZ+s9Q+hIK8XcpyL6eAa/OkVLMPh91W6UEKMnlNcrunJp50SR+zzY\nd0R8GmQPC1TUz6MpUktoFTsX3OK37sZrI48bauvS+tKCbaUu/dDUUz0dv5VQ\njB8Sc1D8IOjsvCay7RyxkWPhV4v//XrdXQz6MUIEXX9WmfaeahyDu0L0Z91e\n/FYxP1zRVqzRlf0ZOY1eAOdKTGMxVQoD4jD+9uK70jqAmuFXGQ00LbHIRedl\n2cxKUtWoDqV/o5JgSlLUPInlK5eMPbkysNihLiTluHT/jgYZROXpRzZED53m\nIRs8\r\n=aOi1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d93360bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d93360bc_1547685415970_0.5747310110492043","host":"s3://npm-registry-packages"}},"0.2.0-alpha.20dd7c15":{"name":"primer-popover","version":"0.2.0-alpha.20dd7c15","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.20dd7c15","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e295f0e0394b3c4fedfe52c155e87375881ab9d9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.20dd7c15.tgz","fileCount":9,"integrity":"sha512-kbHnI8+Gv8KR4w7zKHpEUzLpRFWVPjlSgsKf5Ga0ZvGtlSRbWHZyDTLqz1toQf+u8wT1EVoZq9+gkYyFg3sJkg==","signatures":[{"sig":"MEQCICRyrXYvnYdI4ECuC4yBA53RxMJHSBqDyvtg/vtR6hTgAiAoyQzrEwHs2zToWR7QNssBtRVUeIc/YFXEWIEnFZ363w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQCVpCRA9TVsSAnZWagAAxpsP/3iDKULSbEOFvRiC0NZx\nhV07XUtQ5oGEA+6mcga6c/j5FHBruBCP57C85M/S6AoNse/NuDQMeR1FIDMQ\nlweqnnTbbkw5jAYqNeukpPAEQgfkudtSbf1UZQq0FJG/PI3fPWH4Rpb1ifj+\n0UZVuk7tzTkhfA/bpGFtjOxkGkA1AYTAI9z58xnZfPaRs89/n04T1dyPUVe7\nUGezD8Rle4goJIV+WvpksJECMtHapybEabcwDEzT8/BiTiOue4ackltK6aPe\n9GJeIoZvrThPDv1K0Nm8OLnBSw/9v7e5ljdQGDPWXwti5W+/C1cN1u/TAa1U\n9W88ACl47GuO7IPyyR7JcBc1vbHDX9i8QcdL5zhxeFEiISm5jBMdvdeOr178\n9Vv4bAkaU//oPy/U7hd06WlShhrxDuv8/fNGIhlgq84gT34dmVcMjph8UYC+\n2qMBwNGyratBonbiZL+jBTq7z9X+vGlhNoBxftHcPrCGvbQchN6Vf0mzxiIw\nsJhG7hE2VQ9ook8Hlplmrj5b75hJKpcu2xeG8c85o0IpJa8pNddIM8w1GHQZ\ntj/HkK5xKvDKgTGEjsABohrWX62SaZGQWCLt+jOxIap1WA+igw7R5ua582C0\nH7bXw1quiAfunoi1H+uSELuA3VhsJOowY9nGpXoFcNa6IktiaRXAnahFCjUT\nyAHQ\r\n=IFIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.20dd7c15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.20dd7c15_1547707751156_0.735038052222748","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5c653f08":{"name":"primer-popover","version":"0.2.0-alpha.5c653f08","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5c653f08","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d5028ef5ea8849bc379e34722f91726023b0b9d0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5c653f08.tgz","fileCount":9,"integrity":"sha512-qHJwy1Ah7YP6pghEoS7siajmKitWSqhcWJPCvn12iNq7fllwDVL3eIb2g2F7AxuFHrIwME8HsdOoFt+TtwB+nw==","signatures":[{"sig":"MEUCIQCEkVyoZ5d8mdNta7mOHBtiGMHHOpuMsq4grvlyF/AA4QIgfA0K1B7Q32rcVYhe5zAUmFhTKGlrR+m3fGsZIupQK3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQCcVCRA9TVsSAnZWagAAH9cP+wZQ14TgS2VNONXJFP1a\nnLFUa3MGNosw9XVD/xHeSHXHtIiVMUm4aAqD/5s1mJgNfVekFEdYr2ktEm6K\nz4jr5DFplgvKBHO0WMDOqikUuLnBA85Mo9zIQJZkMFPHti80Xy9IRo3zXMZR\nn03zOa3cPsdCniJ1O+xc8BaOH6T0PDdya8qZ5DZ0OQl2uqERb3g5VEhpdZeX\njB1Kp4449IldxNafxRPsVQQyVl0hHQtZpmgdJV/N+uG0ySRyrKvjVzH+51Dj\nE5Y1RZsJT1f8ZMArChNi19iIDHy/BOlKuE4zgjAyEzyCvxEzIM4F/Avxuwss\nvcpzJ2qFi0E9Bd+hKWm2EspSNkdRylnW5rHeEohcGIlo7cOp1Bu3M3BDnO32\nawWiBT6eSQ3OsfpucmZoX8ZBbv2+TBLv1k0wZKfyo1IUAqvPXpxucJV35aWv\nfoOd+Pngmg/fOnqlUZiysekmOqmPE1f6N8mhNsAVVf6SXGfN16B+inhBpKGa\niWRPk76BSwH1o1OgIsVvOkVHbJ12gDTu09k6EEZv40l7hGsZFRHrELVjIRTo\nXjVS18XNPgtmR/BRkk/CtoNN7P2zvFTZp9UIINbxwCA8XjyTzLDfBfgxIbjl\npvM7y5/lNjIb1ls7fju1hPXJMwoQmOyQGec1OUKSGvZG0gFlFnyhBk9io/Cl\n0bdc\r\n=q0af\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5c653f08"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5c653f08_1547708180487_0.19969006071900997","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4d5dbc0a":{"name":"primer-popover","version":"0.2.0-alpha.4d5dbc0a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4d5dbc0a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ffe4f8a08aa498c807fea6bb1d4ff95c6da7e17b","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4d5dbc0a.tgz","fileCount":9,"integrity":"sha512-wcTWSEsBCd/AD3/DoENpKj0mEY0aV5SvHVD+qh37DD05pOppYggArHTbvnWw2rKiADy4KmsxEK3Xu/vRJCkpCw==","signatures":[{"sig":"MEUCIGHy1dopqM+yAa6XbanlKzZAxk41bfYDyMOmVZLo0hpbAiEAzCDibSDRz0jYBYRek0d1VkmYGbHliZ22vGyIEk/NXdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQNoJCRA9TVsSAnZWagAAne4P/iL3r7xinBRZhp/yGgVd\nuaeqbGQgZJaSmRQI/qSIUxSL7nKMl/XpCSkfjrc8vgZATyr2PhOtcbvM/vzl\np7cUH99I5WjOGpKnWHPpqzdWGv7wNzaOJ4XC8iha2dTjNIE0FqmrlnA2r85D\nESzh42SOvZIZYb3RV+GSVMURVqyBp2Sfx09vybr904ivVGhchGnuMbcjSNXq\nJmBKzLQI7plNaNu0g2Q/CTI/DUa39D5fd43beYt7gK0fCNLc/c1LkD07CShx\ndP7O1mSlkaqN0GyWBYpVfrNjHgsqd3LigRTzY2vkx9441l7vnOmBnjLXmf7P\nWHAeLlaE7t40au9Kl1YZinWLfDPJQkp7h6dlp0Lgyw2SfgDVW1iu3tOqvXq6\nQc70/rFXlnTKmypw7PUcob7LpY/UlGVsGZ2lLOOweSDr2fdmR9VkHo6qR541\nEg5Ac7g3nJGuB2Xn4BGpuem75+54Ovb3gcdznggnL5QA6+LTAOUdpsZPwySw\nEdubDCG5czFTsKTGM6Msah4ZgXOqb34mRk4lbug+ZUqA5j5YGmymtn1w/Tx1\nv8mQ0WV5NYG1Gq6gtzyNMn+HQqtqvXotDxoZ0HL2hjyp5I0sEbO5GUAfhaQ1\nFuAYFsxkydaqBhA645Ol/OL9WekeE3lA6IExl5D7GHNfoa5L0hH6R0KxcKzr\nT/92\r\n=a6uc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4d5dbc0a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4d5dbc0a_1547753993039_0.5795754754151574","host":"s3://npm-registry-packages"}},"0.2.0-alpha.dace91e8":{"name":"primer-popover","version":"0.2.0-alpha.dace91e8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.dace91e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d9680e4e9de65b282d31535ffd055eca24a1a84d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.dace91e8.tgz","fileCount":9,"integrity":"sha512-/PiR30xeWgHawJdI6m/+sGEEAD3p8K+AgwtwsAlJXShnskgrTYQTRG72ucSPne8s2f//rqOgXWBcpxRxwgZ8Lw==","signatures":[{"sig":"MEQCIAmTqJjXKmvBJTBgPEkaOMc0h1seH7yIbSrwOtvrRUNBAiAnKPEYVf0h7O+7t8Rs/t5s6VlldyebUHjHMDwzXqpPYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQN0zCRA9TVsSAnZWagAALB8P/jnfAZh/x0ksXIJvqaEj\npNja3q+WXqZ7OwZ1YZRkkkSnS+cEDajto7tYL0p6mkqeKBMFcVcMJViXwab8\njZPej71s9yiIRXy14NiBZB9Y8W+ixpbKKfEH2Aafp+ehypl9GxWNlh7pV8yX\nS449BnT2WSRzMwE1BnYCssHY+ClLynRfOTwoIHCXNxP22Go9mfwAjPeis2j8\nUQJOpGNL2Zknn3RYWrmR0Pacwogbu4FMIKAVD5sE+p+MjqtrmcD0EAJxWlAg\nVgkVEmhn1X+c9plQyHVHPhw8mvVB0OOCfr9ecjOBsJ9kIPwCRjPcY8ZrfmyY\nX57ETqsyAUTvGBM4F1Pmq31BG437aQVYtAVUglXy4YX8n5tYj1QEmbX1bsZv\nQLZLX/WeRh5zUPBGn2OHbGkPtgbExwjhpsqa8Xpq3UImfyL7+W/IBgzsBdwg\n7fIeHQL9cAK0Ytse8d2JFNh3BaHt8nVoOwl1U+kuzbIVZwhgso4lztVwCqXs\n27mBrIUV0nyOp8+Ir1AKJY1OykNfGC5+KB211BNJWR1AUEIou/kWiBxDJwD/\n3IAcT3TaJhGkOzaNa7DKukoN0e8+nnhkxNZpplHFDQA12Ss9oM0W8yttpz4k\nWG+pD2WIoYrrS/kmQUqCA1ZVYTAv10Jwh/Ydyy6raKBKpsFPtk4AUyJEQSvJ\nSk1X\r\n=Rvjr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.dace91e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.dace91e8_1547754802508_0.35556916907096325","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d8fa0fbf":{"name":"primer-popover","version":"0.2.0-alpha.d8fa0fbf","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d8fa0fbf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"05a2ce0c1f4b4558a0eabd942d32eaef33436591","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d8fa0fbf.tgz","fileCount":9,"integrity":"sha512-8wEFKyrM27v7qyXRToPIRlLQTpFZeZP7XreSuPoqPxL/ixBIPo3vAqwB4+RX86Wg6S3vtRRDB7P8pqrLafy6Wg==","signatures":[{"sig":"MEUCIQDOL7N8t3y9uLpUhs6OLvwoZ0dqdbIXMiE/p64AQqXtqgIgak2TGOY0PMkwQpyf2nvGIBLETNV12KUvwyAugq0ljwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQQTjCRA9TVsSAnZWagAAiygQAIk9rCUGKYWyQbPHjrRk\ngc1ZJXpVSkCykxB/L7/ZF/2d+5E8fKoz8C1WbFUXvxDM7AOn+TIwFSb2Mu9p\nqr2O6Wm9MmcQR/C5vmtrOTisCxQLRQaQ5pX0//EwlAYeaRc1nkSdvaYdZcWX\noNoU4BL2KNcjk5Vnf4RjX1dc3JIfHjBZnML3Sz3+ZQ/xUt2B0jrz4v1ExQhe\nGUNEMxPYX6SAHh3pWsATuurUbW7//9pE5iiaXCYngPir2ooJzjxXrn5o2yRl\n2OJ3rMIg/IL5G0RDdu0FUfYN3NfQW0MpXwdIHKeXUI3mdrg+8ifdu28h4y9Y\nPH0uLCynSgS2RYcTLFDUu5VrrMggEeRTriLn3KfAr3WslPW9a48N1crtubZH\nVETdpaMCvoZAOCHszNKx68MGD7Pxr+EqCF30RRwdHyQHujHApKlduqJg3bH9\nXV+0j6jyyegkj6s5M4qwH9jpZDXW+wSgRwCXxs3xUgCli2giiicy2RlbGYli\n8P55vD5peGiJ2YsVzZ3yYtRacvuL6FQrJAQiFfQuorSYr9szOhXs/vqnva+A\n7gh6qxXREZ+xC6SxHwEFyh1d1nFf+F//8vdFbdVpIaM6JV+zjigl9efoM15k\n5LAgM05o6lz8pxPIyMc9pJITP3mE2/Ne3NRQwfg9BZsnj8tkJX+d3dil8RCx\nH54g\r\n=ubrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d8fa0fbf"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d8fa0fbf_1547764962717_0.40432161022913893","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0bc0eeca":{"name":"primer-popover","version":"0.2.0-alpha.0bc0eeca","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0bc0eeca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"98b7de3da97fa4333215778ab42eaf7b10ea2bb3","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0bc0eeca.tgz","fileCount":9,"integrity":"sha512-R2nNirtRqFKT7r9cMPKgetPIGE/4FsLflnJsyB69BH4sn9hlDfTZogSfurDgNjv8HMeH5j8pe3zfdlvw07tk7A==","signatures":[{"sig":"MEUCIG7XgQnccPdWbbu9HHACr3VxMrCRAVk/Yd2MzN38hzOEAiEAynrMrdit0+czc1XS28iA/qU8Yits0VOy24uZHPntp4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQQdnCRA9TVsSAnZWagAApXoP/iBr3B8XiOeQTE8u5mkf\n8C08w0i2qP8krWc0vZPxvpjSwx7wDPGs2JRcxd5YMdlH3W6tetyNiAPHHZNV\nCFwWoy1nbyp+NkHsstnhPlqYh7XTDTlKsy1Cj/ptwPdVTCqclUKPEENXCPl3\nR3N8YKgTcKiwjmr3XIC6W2eqlgpBQLZK71Tm/QSm+nUshNcQzpY8pMHx+Q/6\nYPqoMarSqH+indT4nsb4j6EPsx2rATU3AX0+ZTAE7/cfxrKFlRdg+wt+AI4E\ncLTAu0SsHOBMm3xdZfaKT/AFbEHM2zv4V1e+N+QjoQpQupppFmml4OOGD3uA\nJBUCxIY3alvjO+Nslg7vipLO2+emHVhJmkf5HU+AasSXkBuhzRufCG6BNOds\nH/BTE8tvcCAEsZjXWxv/tG+pnUT4ht1P4x3rn9mvny4Cr/2j6dN8eioZeoVN\nYa6xILPeBQwLpx1zK6QB8L8O8uNPECZEl7f2Sht2BBp6RxqQTHVJXnem4Nyh\nR9NmySBIpB3mDDAIgVL+ug7iY76lYcnB0mh8sKtkoKc/LF4T56Dp1o8GVJvb\narWLUuLcJ/aqGisUe/QvJTJ4mvt9HF6A/0t/wjdRsVeWMV1CicBi3TwkGcuq\n0qgxHzBIbv2ooS+mr2gmfq5Zi7DhNVW2V9WhtwMJm1rMtKm63nWy7WePjSZ2\nrhe1\r\n=FlHj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.0bc0eeca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0bc0eeca_1547765606934_0.09164120820986721","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d51305cd":{"name":"primer-popover","version":"0.2.0-alpha.d51305cd","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d51305cd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8cb07f512da1170a1990fd19bc19227c291c0f47","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d51305cd.tgz","fileCount":9,"integrity":"sha512-IAQXXjtHNTSAaNdkYn1SG9qtdfN2QKgjMEojOpeJe36eCxLRFUlRSAjZpyrOE9jPUiKwhrYl54pDqvbcjU+jxw==","signatures":[{"sig":"MEQCIHp9fsZJnQ0V79c00DRSrHy3IIabnatyeK42HFz+QLGUAiAUoz3nVmJpHHJ8jOfDKdypRfjKELh5yHZ+eX7PhMPKwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQQziCRA9TVsSAnZWagAAA/AQAJGMHsMnoWOaryKxZB06\nXhUqjcQ9ViDjktmJoM3zW0ITOFvWTMwy56KPC7wEOUx9iD0qRWIbqVltGFw3\nHHSVs1PMx1BshKzUtPwKay0k5osfozV1/PAKShkmWG1UgPxcipGTEDhyhKmT\ncnyv/5YsQhHTGJyS4h+3fR4Q5WABSb5M/VeboBX0JXI46qTSm3uoDXf3qcu8\nVUx65juko3mo+QqDwJ8+MgmBAZ+/RQ+j4RILH3MwuBLT37HpzjLkC7d4dUlN\nAvQpSaS6gs/ICBcOff2W3kGTU2Cr8n/gxVOk8gNot+gQg1VsDguuMAOa3Ai+\n00yloakj44c5CPecUwnSh8Vc0sY8KSTMZYHm7zJz4480IOhQ5tzsXVpMh+V2\ndd3du8xv1FicdWsL1PQsA/bejh/4aoeqJCFZj63sBSCJTKyLq61V+PAIknyK\nReutACj/7Hmm6Z4g3zLg3n1VuowSHauzr80ZAer2Tydz+FoLBt02fChYkf2z\nSXSVw5aIkGQ5zLdVHXEeFXejk7njuiq8+HcJ+TXXVHikQLUmBFgmNuUQlFI/\ncaAmwaDE//uJDj8U65cZEBJOwutFASdzWOcQ108woM86nAH1Qlpnfu6EPtkj\natLAEUbwVlw+QZtIcbDAgYPQ0hNcZpJ7TbybjeBALDlar/XzKtRqxywDezPR\nXc3m\r\n=UQN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d51305cd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d51305cd_1547767010135_0.3897539056635557","host":"s3://npm-registry-packages"}},"0.2.0-alpha.946e3ad8":{"name":"primer-popover","version":"0.2.0-alpha.946e3ad8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.946e3ad8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0ea816b8483cecec53572860bc81143b42ad0e27","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.946e3ad8.tgz","fileCount":9,"integrity":"sha512-ki0qJSt9s6ziB2sPYqSkiAY5ACvDm1pYDHbxMk2U7xYsdOy/0llJwYZy4eGk42mWRoLqLDcM38TLXFusm65cGw==","signatures":[{"sig":"MEUCIBG9keVCas1Y04JDCiY3AFH431wc8ARjfPHlXgbQx8xvAiEA4xjex1FjXRcxMQkFS471mulXph/nv6IoH5/V8wNNI6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQR8DCRA9TVsSAnZWagAA3s4P/25MGXgmLG5OAy1gDVNr\ng3QJosJfTXQf50kH//zT2NNpxcqPfW0gJ1WyCxwz+D6i8bslQABy7a2e9PO7\nrzMDRlVeRAT+/u5XzwdAbhuVDSzEDMGypZymkS7IPRUZ36HTT+rI8U/xs43O\n8IHTxeaX4K/3yLIh8YDBJ8njSt+kIdvAiWzZo6vWs9/YpIgjDs9/yqDGXqnJ\nwHCieqNBjVvx8XjL2nHokKem0RcYlK+YlVAjUQazif0xoWf5HALy3ZXn6IGI\nXRaZAqSRGvvxTEQ0f81XCEb4UaAuVQ+xzjr4EgYIa7F/GKa/DO1ml4UQPkkg\n3ZdINb3gT5q7qmN/yrU48SehgBGTlnN6eGCUVbiF9WA4WKe/UK/nEcs8Ud2s\npgm05AuX56InhXCjpD5muqUKkpSnsQjS0lpYxzHmaroGZ0Tx3K6g/VvDhphI\nWue7XD2egcs/HAYfpBGU5tP8aNGlPZfSadG1lhs4E17n6L/yPWsw6J55m1sU\njz78on0IduvGPHCVyt4jMFBJanOUaKPFCiSPXQNosjsVlZKqekpEm/ArXV3s\nBb4rp30elXran+DNO6nXbQtiPe6z10wG6WKXEFgYT56ncrLoZgO/v0L7Va8W\nv8MLjGAiUYGR+2/Zsv+rFan7vkMIz8hI08EHbAy1xhjtCxEn/0nJHOiV0APr\nHYUd\r\n=hkiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.946e3ad8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.946e3ad8_1547771650425_0.002579559970305345","host":"s3://npm-registry-packages"}},"0.2.0-alpha.091e3379":{"name":"primer-popover","version":"0.2.0-alpha.091e3379","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.091e3379","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"96b5a782af417add21fd671ee3df0c1b25b56598","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.091e3379.tgz","fileCount":9,"integrity":"sha512-8LHqt3uoayDGhdxDbBkIIGOuLYC/lraFXc1rJt00sxXHOtOF8geb1FOd0MdUtBnKBB6J73u7YE3+nrAh4qdnOg==","signatures":[{"sig":"MEUCIQCBVOSBZI4Y2q6QnG9DoAK1u3GmorusUXf/Xy8ldNS7wgIgK1fTgJgoU7k1hVYWiF3/21op38jQS8x+6OElHOPNfb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQhFvCRA9TVsSAnZWagAArA8P/1kHqlEbbMlPP3UT7xxN\nxfAbLPq+yapTJWMZi8cfLtI7JaCVBgtzNKQ4QVbChEpXD6ZyRj0wBumcqSMi\n8puSOCebBPYlXJHKyRBi+P2mtdeqA6bZNA8B9XVnU1l8ZRHiutM8jmdqcvRi\nHcYnrxzvlUy7nnmY28IYWTcj8k+J5gkeuhEsc3cWM/PRRKK0LNnGbFAmdbRf\nvepBASgGXHBXbOF3HPTV6U7Qt5f0W6CDgBbAC9OD+KSpqbmHCK7IgEoURfIB\n0n89Qat13UR48SLzcK6EztqHsmXOghoVXZCNylVupU5XGVVCAi4L4ljRu7yi\nSYTqu7ZfHcG41idOCBoyYnY2iCiJYKruQXfF50RvuqCUMvYTxwKkq4bs+nta\nil07D4ygWAvzX6sZfKyTyOf/uvwcT926Wh4YiMuJwAge/KZC3c0nilgM0e4N\nSgun4ii7cn853wiNgyYhWfRZIubDLPWVR6eSReeOL7Tm0bO48MxDSSPXLQM8\nZAYgsWUidGSuf/8qKg02fug713eEOSUEEifpb2qmGUHwgXWFnN4yz2Ar1Isp\nUr5Ohy+xPpfoWjlB0F3bBYDDt2WuPkYh2AttiCS6fURLSKU6/tJCe875Z0Xm\necuBooEWxKZ/Qvl7+TFe+SOPFxt4wsyk9eRvAHMXq6SvLPlHHUMSTDjuvjhk\nBqp8\r\n=lzRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.091e3379"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.091e3379_1547833710871_0.5240015914706819","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ee6f7715":{"name":"primer-popover","version":"0.2.0-alpha.ee6f7715","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ee6f7715","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ba4d5eedce436e89874dea3b8ba6294562247614","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ee6f7715.tgz","fileCount":9,"integrity":"sha512-zvU0dBbtqVIrgZOcNeajulr0wF2QGRtLBQLqoAXrxQJOv6C/r7vz2T+7m+j2DCxXLCAlE/R4Ktog7Um2kP4NZw==","signatures":[{"sig":"MEUCICQASWG6l4/015j7SjSxR9KUJhyNHjGn/BO6rNg3La7XAiEAt2zbdItdCUbWH8b/YuYmiyOLewF2UxUOfM87BQkqPYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR4eJCRA9TVsSAnZWagAAVDQP+wfRvn+0whKTjAxl2Rr4\n7EC1e16l+NITqb2OW/oJJfjw6cNoC1mJxddu2twUpuc2rdGTSjfI9RLO9aoA\nFpf+otPcUZ6+VmnUaAZbe1x/kLOeRndnjSDKzjp+as/MjqyG3uqBhnKjIMY1\nGRq4HQi/yMcVUVVzIdugSX0KUAKLyK2n2ODra8GsRrQV/Tev8GtJCgmCspES\nGo+YbfcUGx2QpRbZ+eCGImnJmL/0kLgrWCJoeScM+22bdd90pOUXpWmkMW//\nHABaKaM0kL0cFMJy88MHO2mDiDLB+EpgutN60jdJic39zg06HFxgKW0kohLl\nkdBNzrePChqz42sLwFEm6CnYyCbRwN7pdjt3lWBl5duYEXTKuUBn9PXIiU5a\nUKu0j2vdCnqPpb+3fUPoZouEPm6RRdHeNWgZ/fI0dJFkY35ampp4ACFNyhEi\nWVa/3BUTmc/NmfxzxpTBTzv1bWVWDz3QAMm1obgjYnI0Tb7OdLtsslVNFnx1\n8b6qPkiv+uk7x+VmthWetj4YBjNPbpJshq1mP2Z12IOw/MxEkfFLXbSHHw+u\nSTqBqNecSBfexQG0ueozBAgvXAdad2QfQvvT8iu+1Ajcv91UZGZdNU05v8z3\nyLD0gB74FkAfNURW4yQt3yi6vSMKAYjlNRlh0XbavWjNpYsQy4rcptXqy2z7\nVggv\r\n=FUkU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ee6f7715"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ee6f7715_1548191624641_0.9835317001234194","host":"s3://npm-registry-packages"}},"0.2.0-alpha.20da46e0":{"name":"primer-popover","version":"0.2.0-alpha.20da46e0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.20da46e0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ad4f3768ae00071411dfe576cef1dc3fcb80891c","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.20da46e0.tgz","fileCount":9,"integrity":"sha512-RHWS2odWOrg71tY6drJzY83YdzI8J3fdPGYtOWcNZZqqwInYCfYx3O+s5Qvx80KWFib6/4McwUHS1QHlCRt12A==","signatures":[{"sig":"MEYCIQC/Ek7VWuN2PvDMcMnonPVboDuZc4H1sxAx3FN54N9PzQIhAKp9Y160XpS5XGIl6xzQ9fGLqnB/rj/bUkcuQXoxx0tS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR4izCRA9TVsSAnZWagAAKC0P/11OOALMZTal9aRUlxTT\nEbc1ONS4kG9bFeT4FdtQ8WLgbDTNWDYRK+P+L2bkdWG+MBHbcZdKSJahbB9o\nzjzc1MeuyRKeA4q4WyrOyXBNRiJ11I7mNXTtZp4mP71eJX5oRgRCTxNsRPWP\nYpdtihhzwpHI4c97cXrhkYBTBlLzWxQn4LUzT4b/khzJpxR3yBm52/4YYW0L\nCYXzrgF4fQL8Ak3Pe2sao269ctSYz2JngMibCz2ctzrl3HGNQnWKq/MG+4M2\nl5zd57N0bKCYkJkN5YRU6iUXhKS/ophv6JW2lhxuAM0ICVHqBhof+JmKKLzz\nfO2mU4VxnzcSIaAIzeknFX4F5gz87memx5jCoql89x6mFroowU4p+zi9bC3L\nmyD1rhxwNwOpX2Ic93oJ5ZB//Dyrp1mp1s5n8v2r87x/96CjXh729K08bOHV\nqCRGrED1flSIoR9li3GTCk9Fp8yQiJKdMgLgKWGGi37ykTGFg9aA9PUDhYoP\nAvzjjL24URT8BmmXDrOL++AyHTeMJlWyZNzkJmU5GXBQtUg1B0/zbOhKT8wB\n/KTEBAHYdaS//lgZy6orZovbbBnnwbRiVU9R6hgWOZdUg19A4046CACQEUt5\nLfCFJLBwu8Gi/XbvYJ57iXwh5ZNikdU8yLlWySgO26/LHMterL1kugsqy+1P\n+Jfd\r\n=EHWV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.20da46e0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.20da46e0_1548191923252_0.353698044498284","host":"s3://npm-registry-packages"}},"0.2.0-alpha.4b1305d3":{"name":"primer-popover","version":"0.2.0-alpha.4b1305d3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.4b1305d3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e53268cdb048dab421d54ce1ee994702e6e69793","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.4b1305d3.tgz","fileCount":9,"integrity":"sha512-sA9Ge5Oz9NSyIQz46+mCcjaQl6RN4YLGCUfaftgqXkVDMUIJtMyfdTgjGmxQbOVyig+iqEHkvwH6TrdINh/4rw==","signatures":[{"sig":"MEUCIHkMaje2M+6mZvrT6kzRNQXDDjopdUUUJf0oj4Yr4BptAiEAqI80iQTloaga41NEGU370S3iFAvKrpA+3XZ/1yFSVHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5pKCRA9TVsSAnZWagAAVvgQAKJox3J3FGFOgVpg5NIt\nfoyJ0jysf26I8ovU8wfFkBMcnFQxh+jv/TW+QNBG+NuOq68AoTo2YnO03FcS\nk7m7y35ThC/oTe+KjP6XF4EIA6eQxUYlEvYYD49clm7y/Typmk2fTe83WQ/f\nT7Y1SxPhlsJgnPiV7g79HG6IXKsQGxhSJayKN9PnXmbe3xy73yBm+RrBtddt\n4OqDa1sNKOwPtvrcYGfeQtakRMRjuDJd8EQ6BnrvucDoOeYnGgbWjCl5XFkg\nPuZfiPTEtbi2nK+k3SByJf89r4dZeh0GBHEv3Gocnuv7ELz3c1EDB29RF+kg\np/91Qio7fjcgPOBctLCv3dDChOimAeoRQgU+UfBa1bBGepKJxmNOunOi64bl\nRVMEfgh956vzyQWLNYS3kv2l5uQd66ISE4O1PPmXNB8x6TwEv8DQYy+edf3y\nuZFUHkGpfzFYPV7aGmTm7vnnOz3Wuc+qZGjLCcdwyRrtaPfkKsscFyzOr8GF\nmwyQK8WKw5Cv4vKpKwpLDKIqrPzOXJBhlPGZoB9vGPU9Sdpw7Ht4hk5s3aWX\ntM5/rLPOGDLaZVmjMwLHGWqNI22VzlP0jdNSRyq6NpB2M4Yp7eesNGVOMluO\nvsu56j4r6vWxQhQ3x7XJFPRnPMAXfcNyoS13WE0bWTxO/wKfk72YQPq9NoX+\ngfzo\r\n=DuzR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4b1305d3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.4b1305d3_1548196426149_0.3266088332531809","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a158835b":{"name":"primer-popover","version":"0.2.0-alpha.a158835b","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a158835b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7f4f157563d62f87bf3a1010bae05c346e7113ca","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a158835b.tgz","fileCount":9,"integrity":"sha512-JofssZNseIEyzeQpkDIhULefFIocoU3Ch81cOLoT/hrdhn9cWS3IpPVbDzcZOOWDpOZGFGIOLhQ4y7MgRSKbvg==","signatures":[{"sig":"MEUCIQC3+GTPbfi8xRTzSauGZ6XkPJPL6LyfCEUHxKKRrhWyzQIgLv5pWrJZrc+WxcRQGKe081KEbxDTLWPJcXERXpo0UNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5yHCRA9TVsSAnZWagAAuSQQAKPNFO85b8bvOU2+I9Oq\ncBFirwBy/JwdQ27cAHupyOiBGUaKgGb7k4583vJt602cGZEPjvNmoTmryeXG\nG/k+nkC1NCVVbpBWqHTiMuk4JcYGw9epjVEUqgUHfilhHlToN11r59aMnOtp\nyD7CsO0lehtoY2fdVSAYHF2eKp69PvD7gAT8f8h+ezy1LT/npdcnhmbvzwXA\nsy9MQmvXyOLoyYHKLIXa++k3lqX1DUQPNUG7l6wHOrcz0JpWHb0pIfu4Y0m3\nJXqiZteRGZuboH8OfW/Q81PLZdkHmvGqi1tCdqtq+nzBfZBVswbpKjT13wXa\nQ1PD3RVTiM6E9y+WnmUFJ+OImTPCqqh/JVdmPfZefDL6NtaMoy6Jq3MA5C1G\nvu7ak4GhIzvhiVHtCT3MJSAHjd9OvTfeM9W0Y84grf8W5l/mcRCy4NIigxOM\no/wUHB9jqHc3RDI5zpjkv8mBpjeGTnoAIWAk6I1lP94YVzrOS//e4/qbKYyJ\nTpsTE9PAUxwV+oD3LlZGCXasTrKmR1XyGUGDTxeJERNPHpr7E2vapEeR7sSp\no695JHYvdN0/b8M/kaLtet8lVOpSSR2EUkcb8YKdCaZQ1Obkb8JbrnvTLVA9\nd+Y8yCyf8G6kZ0XPetlNntRB3wQpNRfJSCJO8UJqmHQyadfcB3dprV8OJjh6\nBQl+\r\n=1ARj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a158835b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a158835b_1548196999185_0.09638673010739263","host":"s3://npm-registry-packages"}},"0.2.0-alpha.031b4784":{"name":"primer-popover","version":"0.2.0-alpha.031b4784","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.031b4784","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"72a530a4bc7b639ac1d490c6fffb40b55b1abc9f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.031b4784.tgz","fileCount":9,"integrity":"sha512-c4pK6TKr1Hl/TMT6XiChCyWD6XKTPFl6vlxL9IJZPwqfIuqcteocGmjsDnpPRkpEx6HXXlNql8YdG6zLZem12w==","signatures":[{"sig":"MEUCIFwdbvL3lqDt30KP5KT0mpsDy+xCQ1l9O1k84eYGO2IjAiEA6JsTAPgjCVO/nX1cLP5hlIROrKhU0CNDGzpaIatdSKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR50WCRA9TVsSAnZWagAAk1gP/0uSFsNM7XDfr55063LQ\nGsDdfnG2gGjJk9KAPGQgZjEb0Qm8dfIK+NXeyRxEbpQWNP6Ue81ovpD9qf/Y\nnPkLDk1/0AB9AcSOHPsggx0jsYwFpw+A6s5Ha78lqfQEzugBxm2WCEwlZQUv\n3xG5ki/zPCpgi3eZG48T3Bt9G+JlwTkvAVhWyxpaMlAxikQoXZxz3kSWOs42\nuGDsxt5mPfEtvOGniY5vusJttSrCfntsSJANbxQ8DKSt0QRKoOHA9Ce4tOT1\nmP8eM9rdA/bj8Vf7RuqY3lIBci2kBBiLHRO8wpZwd/UAih/tM8aDZXH4605z\niryb0e+2B3cC80B9+Y9RTcF8WqxrDtXrDrQXWs7DPveceRMmiAv8JuADkGMa\nf6AQjy5ZaB1o1hfdNiuA6gZDZ3FtnyO6Zt0fC0Wu/LqP8Cskgbex4MZ13Zbr\n1iyCNKCKvx+Tr4HYE8OflH/gEskOE2+hIwyb2brD8f7EX3m9YMVjuJnw4bUT\nCHXVnOHYnmLcvabLliNbIaqqxNAxfCPvx1pr1YuWYqnGO2D0BxqeRmQh2M7F\neK781kvPCMxsR3twsI44glpz5pJv4OPYhqRH+Zhkug92b/jFxuJI0606Ds4e\ndsTpLkkCOlQAr9IsVRCM9HK+86ZgqKiXw5hHiTijdZ4C8DxDaLJ7w07tcHKZ\n2CVD\r\n=mfp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.031b4784"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.031b4784_1548197141398_0.40207451837273367","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a5b2d418":{"name":"primer-popover","version":"0.2.0-alpha.a5b2d418","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a5b2d418","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"95ada458c157fdc2589fcb0b0854903b6d3ed5f9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a5b2d418.tgz","fileCount":9,"integrity":"sha512-/EdYkvaoUKoJyGev4xS8qKkMuhymT33odAvqilJWa7sh2HiKwzbxAE2s2TBT5U59eOGSHj6MQTmCxDq9u7SUcw==","signatures":[{"sig":"MEYCIQCZ0RSQOD3dsmB/Mi2U2hhxTncmd3PsoC9IptnGEy38wwIhANJSRQvzU+X47Vslr0lZUKt2a4p4K8N57aBiS7KWla26","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR51qCRA9TVsSAnZWagAABI4P/Aiowg7YWC9tN/OGR0/p\nhw4Sz+RPTHM4HRIY6iHoUAcBm1yVcwAUuOoUfGjfMLkHbCblvO24IDhJpbDW\n4cVBnKJGqYmfNmweblMhATbcypCeLKhhcI+ZlUwJBOwCnigbJXghbvDIJaoC\nryPes0MVFK2aWZhvylLGeL/D3nEBB1M/QQ8ApX8X3rWE+JTo0LTpb73OItla\njQwMWjM1POd7Sr72ZHL1JzyE5DKoWNyK+wIo3S1hitXKqlr/wWm7OjbXkyrJ\nH9laT+x+TlRUPjMSBa7t5rxw5VBrrOlYYdV+muu97dkZDZDIxLq/ow5sefKB\nITrewgJn+0xDgGg+qQKMltRCh5rZqCzuK3hI1z5iCULUskKs7rQm/zIRj4Q6\nrhpMS94VEy/M7HAewN+6cudZglieL7OhlxaR+tul6Agm2roLIbt7HtKSxf+j\nUNhsbOO7VVrQHcgZvs/z37Giq0HvMx/FEsThCiYnLTMXTluobiqaq2bgSW2L\n61pgm/eUmmxEOXWgM81y6Ga0lOePTFEDoEZcx+CjnaH4bXACd+JbUgAJQSuS\njRkJp98La00sPrx8qstk6zgWmftgqm+izuKtnlaMqUD0lCzn5JvIQOLmauER\nN+aPlFv3Ue1MLdctG1evTjX4pjaDIOZjDFt3GsTTlXg1ucMpuHu0hFMTpyrC\nZ1ni\r\n=AFTG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a5b2d418"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a5b2d418_1548197225171_0.2666202458281326","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2507e037":{"name":"primer-popover","version":"0.2.0-alpha.2507e037","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2507e037","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"92d11d2e7e55bedbafd997d93b4c0819d8abc6d0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2507e037.tgz","fileCount":9,"integrity":"sha512-jEsjfth5FXmef07gkKVBwx9GrW7Iku2Utk2opqjuu/j7jcS5uzZxvjq3ovB0RYT0trkquJDEeR4MYLB39CkNkA==","signatures":[{"sig":"MEYCIQD2hYw06fxlAGjBLz8K9KEMAE5PyfdhA4cnWw649LdahQIhAP1UEvqd1TsaT+lZvQgW7wEITAAnjwOmYvj6C2CP15dy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR53GCRA9TVsSAnZWagAAGxUQAIEcEHi8ldAcbS/GhlPf\nO6NDnBy7G26r5fL5P5QRCMGkSpaNamQ4+1+hJeVfnE+LHKKPTXz1H0xzUgml\n+lcCUuPFkRYttZn+1befQ5KL+ru7aC4t2R2NlS6fBLLaolEMHDx4nJSjWhyv\nFtppUBnypnXWqKkAKxLyUtnygThBgXWC62qhLnGaE3LjgL48/HupOAmrWOnG\no+hij0eoAChJEbb6QdaUEnKO2jAN4/lRL36L0NeD8ej/rwzExxRqusUKwxWh\n7MNvzUjfn1dZP7vWi3eWRGK0Skm1iN88MNqwkWyJmPf1aM2KLJATURUsLPOJ\nDAgRzcnrXvu0LvUPr9JJT2mPZTbQlzc7P70e7jGZ8wVDgUENOSL/ufy4ZYOU\nVmHwfmbixOThSVdIbHCKpyJyf2zpdEovpzxDobcO1+egNN930WRHKlcmycSe\nKq8jn02h7QXcSQrZYA1Kry81MZ3soLzvmVn+JwU9Uqji/dSq+8xL3HbZWRwB\ncWjyjpbfjfG8/4vP7YrTf1CFz/5dQ7lhnjMcGBLFnU92DFLVzZJJefb/iqew\njHGN7aitH3Uwyq0pwMFoY70Xv/6qkDO7te6WMgzHFl1w8FTfPET39WUqj/Ic\nbMkbnuxNzBu4QzKQZNSiNBCF4m1ylatrk7OY7P4v2mw2uuWn8CmJt2oS/8z/\n9vFd\r\n=ibTh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2507e037"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2507e037_1548197317943_0.9401906683478733","host":"s3://npm-registry-packages"}},"0.2.0-alpha.333ee702":{"name":"primer-popover","version":"0.2.0-alpha.333ee702","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.333ee702","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1854971efec79f70206b10caf7f322c87269f2fc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.333ee702.tgz","fileCount":9,"integrity":"sha512-K/WE5AVCigx3iVgryWYhqN7UD/P2Rnh+e1I6cC193plaK5nCkzRdkl+ojf020MLkh8SV6S7gesyRnueJBAjb3g==","signatures":[{"sig":"MEUCIA5Ysw74jd+jv7vF0r3FPZ0PKylMIlStie7PXXqe4wMtAiEA69aQnUgWevx9T6aYdy6MJ5NOrIlGvM3LofghS/brm5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5/ICRA9TVsSAnZWagAAJ/UP/3qIxzbKjVNXA1NN5yH2\ntV97Wur6wE/Xl8fqxq62ICDuI5tiJdPSVObOQ5+oOmuq2TGZDxTkCBI99lE0\n/PxSydqr+c2VHfP2JGKCQCDx8RM5IKxjEQqJyzUr5YoXZ5Iw1kgTPNK37mmm\nFV6jQ0HjvcpMeSw1uKtkWTAtXl0uGEGpkgAt4M8bE/T/cq2Cz3ZMbHSIEHf0\n/3/dHN2V/LeENPBZu9S6OsvCQ/CfKrqkyJFEm+zKp2GL3NFg+rqIdVsYdNWf\nMUv9q8/sROk7KpRiWIxKrm54pNPilEriG1aWxw549QgmNQIbsZnHkmbCbf1v\nxodx6a29vR2qwwBFonXGVhG7NZuO9i7TnWrQ3ttqfV43iw/igJTkOVZ3cbBa\nmYHxV9oESFoqg3TS/yVE/p3hUCWBKVvjNhk89hYn+7EqAA5YNe8Ahahh44Tz\nX+PiWdUlmb7YzQrUABcWQ0oPQKNHcv5GddixAKE9tJ1H+v++2V1BADCCfjWl\n+uRmXHDN8iK7fEo7sQFYp88A2Vy4U+QZkS8GXSL72CxkLUL3A7EcP+4NnSlx\nku/sPU0OsU1VL80ICTuecr9fjf0yus6nsTr1M/ts02+4sszl/wTEaHSSMNSb\nxoi2EDNQybzbp/TELWY7/VkGpS+h1sEcW/KPoPPo2DwNt/CtIztdgIjSYXqj\n4aVS\r\n=Gcl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.333ee702"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.333ee702_1548197831473_0.37961626336406273","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5b896e00":{"name":"primer-popover","version":"0.2.0-alpha.5b896e00","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5b896e00","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bc332acb2e0d987fff0f4bf08e133ac93c03fadc","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5b896e00.tgz","fileCount":9,"integrity":"sha512-xIRVzRD0oeb8znI4Os+8rxcduG21QbFoLUt2OKvPoTJ5hlKJ22P/EQV6vwp6RfQxASCGuJGFWzkedJbDXWKztA==","signatures":[{"sig":"MEQCIHJnphae70urEaDUZolc/vieM1jPRDUM/Z5YuwA1kptcAiBYyS37jfZTlWmx5jqB46NGb3U5n7kNn6dTkg4gRBndqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6ArCRA9TVsSAnZWagAAueoP/jAfXJ9X25UTdN8htlRL\ndBySeiwTOg3E9cUn8WG9EclU/rM/ExjZ7++SUryb4T5XWa80IY2LlkwTKqrR\njU/2V/upxaKlsQN+k5LogmefwLESaYmppSSgSi8ujD/QznQ6GxGrqZuWl9WJ\n4BZIfxJvhsw2Zb/0r14NJCsviijkQMxUv9VNwueRpjWf02losB1krdQ5jz15\n4Aw6RyzTGJ05PRU5ygBnrcNO1J7ZBjY/Tz4Fsq7b4F5qfS+2W8hG2msjYLLf\nFPje9wuhS58lKrnHqAlJLQD+ZCQsIlf99kyNhMdTBDx9adz6kE1JqtvMvybA\nij3CNGkbwDEwDgnmiV3v9dJ44sN1CrLGr40Vky/XE2ZYy/Ia6xapsGbuOSuL\nry9utXcj9lgjHgnpvCh/7MFVd9oz2Ka7Ng08IlW42LbVqKyxth+dJaIATRoN\nTagDQVJ4oYpwWSaVZU83j1BsK/th4oT+llEY6CR5jTkGCjdrUR04BToNQdQN\nmMUajcuJrRNr42wIZieVH+dMy7uWM+VonwGoO7tuGkGaouCl2sLgUYLA8VTQ\nzUNl0lP4yL9ulbautP48R2dgZnzotzhvBcCAoYQZg8wSHsopubGQ6LsIu0rz\nkpMIh3P8YdKX/zeuAp9hbjyR/QLZkqPHs/Ci/QWhPhNUy26/0T8UJhqKWOdQ\n6B/v\r\n=akHr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5b896e00"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5b896e00_1548197930489_0.41969632100041565","host":"s3://npm-registry-packages"}},"0.2.0-alpha.ef822821":{"name":"primer-popover","version":"0.2.0-alpha.ef822821","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.ef822821","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"91d97f23b50a5d8574d8907408a1ff1bfffa6728","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.ef822821.tgz","fileCount":9,"integrity":"sha512-gBaNnIT3on2kwMEiLLjYgLDi2wx6307xT/DYbYuZGm82xtLWSDsiMqSpto5T8aLAQ0t7nCRpuN0vqCfl4flmdw==","signatures":[{"sig":"MEUCIAX7GhGm2hkpFqClntqWSTHW8sEyhTUpmakr8ZkYRGwWAiEA7yEl6lJgrnCTCnONRVJy8wGX4Aw8z9ErqtLisuSTT8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6LNCRA9TVsSAnZWagAAuzIP/21Qgx3OL/g5IbLUpTpe\n7feYdtBCJHJCHXJLPvwbL6xM4T0dhp4IMUF29m178kw4kvuqvpHwVlm1Zhif\nFjMR0S/sx8T82KXGuoAEAHFo8ECJ4kmK6vVocDqFBiRprpSahfMG8vvgTZKq\nY/gz1qiNBGRl9us1EwUhFIwPwINMaikCZVv3kcd8ZcQba2OqrONFhL8l1De5\nsn50n+AcXpmT6C3521hx/ucu1MA72biSmeQE1Lhbzfe1IFA8GLF9ksvzhtpj\n+XMnkNUuLmDNTHDG4i7EyQyvaLxOCBXVBDyWtZl04vlvWRsTkuHXC6t4f0J3\nxI4SlsWoxkk12BHu+mQPPQABl6Hl4dpvZcWMyCEHaKh3ZAg5R8OaO7yJ2sEi\nfTPZDaLHQmxb4sl/ILlCiyI+DgeEkRuCoNEmuxKBSQUrr7y1GjTwuXA7/q5P\n8KXn6CkXNaqx/qhhjLStiSBSImwIuWj4Zn+i4x76szfIJmFhh9kp1q42KtPF\n1vbfhN58Wb6k1zXHwHhrmM23+YVa5YgBrJZ+hF7NXGq0/o2/85Z6zRFbhmy7\nXW9nBPMeVl7+UjzPMmdF3tA72TNQYxz1pKrtYAP3cSrv/r4GZXKKxCc7IRql\nPQxGq0lT5mZreF2AQX6ZAakX3C/c3usgLLTj+8jDBN9/ONF8lUklvlTGGsLQ\nBiVb\r\n=Cpla\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ef822821"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.ef822821_1548198604487_0.33062531783387605","host":"s3://npm-registry-packages"}},"0.2.0-alpha.fbc5fb3f":{"name":"primer-popover","version":"0.2.0-alpha.fbc5fb3f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.fbc5fb3f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"223582717ea555e895960f42e6ab9d6a9d9b5522","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.fbc5fb3f.tgz","fileCount":9,"integrity":"sha512-jXhovLKkO9FqW9Twz0oCl/2mrQp/Oy4svdo55Dfs6x4TxctjMTsDcuW10YsSUBEWyCgQ1ec6BMy0TV0czN1Q9A==","signatures":[{"sig":"MEUCIQDknWedRulYJ8JcfQm3IKS+Qdp6u4AhA82vuoh06FWH/AIgAQ879AYgYmuV1kvja3hwJOkYN0Nrph37Otf9u9DC30w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6OlCRA9TVsSAnZWagAADOcP/2jriVvbf6wd5HJ5DqD/\n5YQcXAd7ocOlg4eL1HYQv8klSNu14CXDciOP8qlPrUZm/ZDlshVDqHDofzRr\nu8SKHQl4TIA5WQpPZ2izxlQriFqzp6plTICB5gRq9Pajt+iRkp6QLJlmWdrL\ndFjbMR87Oe9mcKXChFPHQwXp0s2kisFq3+Lqsr8Opt75vjEnsbcJ2slFewkU\nNraVGT20E2PMzE+xNdLO5OmfPCwC1qlgqkVuY0F4gb9+uSUMvL5xk6oz4Nf1\nh6LIaPDi/qfdBsFLVanZvDVhj3Cj4D4HnhMeE6237VUaslNCId3yIspNenJz\n8HmdBJO4Mkx3qQJ0kKhZGt/ln7uWjf9TlueLT6x4J7gTdFJ92N9/qL4c4rTN\nZyp9k4qipu0T4ImW2xjpgsrca0K0YYQurqhX/+6O98NB8fM2p1sNRQptHab+\nkz7lOGwiK5L09hCHMoZOV6ta85E6lRJw83kAdtMwdTIkHMawkCm8vNeHLJVP\nSBjK+bf2cJBT8R+lwBWWFpkKVFfP1WjuGYFgb3mIlmY29xNQ7RUCuSLZ4I12\nKSN+IcC146KIp+C1y8/4d3aKrGZWWlK+HWd9E+0cMrQ0VvlVnJAQ+L1UxjgY\niQEdGfn5WGz2X//sFNr6FxDGEVhT9H8ZO0bXTAO46OJ7eYYSjktqhIt+nvoW\n9tMD\r\n=NEue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.fbc5fb3f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.fbc5fb3f_1548198821028_0.4180456349419839","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2ccb67f5":{"name":"primer-popover","version":"0.2.0-alpha.2ccb67f5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2ccb67f5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7e346812a3c5e474c81cc8b2812ec12251edd1f4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2ccb67f5.tgz","fileCount":9,"integrity":"sha512-eAveuljfBIRWUMZwzSg5gxtSH+00K4BAeUsSaLQsjpA6qIQq9P0fk2UqssNx8TJ26GDAIG08xsrB7h3D9vJVoA==","signatures":[{"sig":"MEUCIQCOeiezMkpixjcLoNL9Bk7OmR5D9tlHXBK6WyDlUPIbhgIgWtSHsYYmvaNSFUXH19/4wo7rRKOCHG9vJVBYBTULT2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6dGCRA9TVsSAnZWagAAduEP/2nqOpK7K5id2Z0X2dfD\nPYP6E4OWMcWJ/vqAl3+8I110Qiz5ipqkeYQS4cAWpCA87MB/spx9w09E1Y0Q\n9RUzl+akGLnVt4xGKoY7DYh9sKnPfq+xHJSeiXbItwlhUSY1aMTmTV0mgu+p\nhfKrU5FZesLpHvFHu8uGulkb77TNKC5JLmKqBG1GyyjU9eIs6l9Dv1Q6nL61\nneKwnKiqi9faEcQmMwqdpDkYefUZxtRXYDyxfg2EceJkoEX5IuOsuYX3ZAWi\noXGsyb3k40od0EwBz/AgU5Wc8aq+VyWM72XqZ3K9ZC8xkTDP6TpPK3Mg0gx9\nak00qkDHk1egy4+/75c8k15pTp6zPGEhs0AZuxVqI2LA9I2lbVdwZDgWweVh\nuT5Py9Xo9dMgG226ek2E0OedeLBDovExb9npyOb+++EklCoF28aX8+TprEgg\n3DveefQ6q5fpoedsZR/rZaMoDzvHKF+bF4stzIKbY/TQaMkisoiOiywam1ko\nxYgUQvH/tDgcb81S/lmrSJgR280KeWRNodOzOy5v9epktC/XXDbtml4jQPkf\nuc4dA+ccqlLm2+KrCdmJrvli5cWeVUjop5JXrSKqbSNIZpxGaulemVaioe4b\neopuoNMmLd45EPmikVvMSymiXP5j816aFqWGKxF6brktM5cunI+Q/ZPG6b4e\nfV1F\r\n=gaP6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2ccb67f5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2ccb67f5_1548199750073_0.6602089683555556","host":"s3://npm-registry-packages"}},"0.2.0-alpha.12b798b8":{"name":"primer-popover","version":"0.2.0-alpha.12b798b8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.12b798b8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"21d752a5b00cf82fd47be51baca297b2bc0bd782","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.12b798b8.tgz","fileCount":9,"integrity":"sha512-ppXGIPAYu+Lcv+KcTCG9iP1EAPIKex+d4dBwqH12Fvx65ve1OBhDmAnXnU1y/9h55Knj9oupdRFO3wNJO1sV8Q==","signatures":[{"sig":"MEQCICGACP3E+XfLkBh5hYnDcVYDWK1spkYK7T3eVLAWHutyAiBbOl4dReGcQ8+bXucuqmQLDPfWAPdzdlmHZ5SCwTaqbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6mXCRA9TVsSAnZWagAAYcAP/jm+tmi+igYovoE0FEpo\n/5kCyewy2fWEZT6vdorcS/GItW0NrHawPoEKc6SujbdBK6/5kjQAiY+ML7/H\ns1L8U09zzMfXPihpXQvSdLXTTOiKXc9ZccndcNvMVtYS7G7YzVWM1IYMkJzq\nBpzXUFwoxZFiuS2dYXtGJEOd4Z8aYB6E78hNZsks/J7DTq/bs/WSfdq5zct9\n/5lFUtIzjdRz5ON1m3EbivHRAiICDtYNoaSAbSixDa97Ipxs6jk97R7fUjYE\npk1lHkxvdGetxDEjrC8zU+Ul7xh69Qm7W07ToydbM/QO3pui5dCQ6ITyW+Tq\nLvkagrwj/vK+jeOCIQY6av1T7oE+i/RVDmBq9J04nb1jQvpKRDwPkJtTJA5r\n857nbD8wR/dC9EXq/XjX3p9sW+tsB02UpiKPO3JmhCSKJz4Et35XbOjE+45g\nKH/EuX+uKZICkxElZ8QCTGrBC4Inc0zy4hKjsDQj0oPhuAJvitSSdDOIj3p/\nOYGGYOSvoJQIGE6KjJyy9wqhNgyqi1rlF397BRcZZ7mu4Qtt5RcDphUYbctt\nHTI1w2cz4jbhTiVtP0aQOdPjlbcrZ4VFwlX6AJvqB8fibkD3wDepDVKfyRFl\neWWc+n6yFTsRKxpiWNYvilnN3SF4EmgLh+f6DwJBzy16LKgMq6XQPj2PCGQw\nFPha\r\n=+lmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.12b798b8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.12b798b8_1548200343171_0.34056435511532324","host":"s3://npm-registry-packages"}},"0.2.0-alpha.0e91d9c4":{"name":"primer-popover","version":"0.2.0-alpha.0e91d9c4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.0e91d9c4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e610bb27cec9ae764d91bd842bbb7e82be305fd0","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.0e91d9c4.tgz","fileCount":9,"integrity":"sha512-95gb+Lnr3mv9QhWrDZIv80sUkk8KQl79suADsLIGuPNESugeo7pta5s/g+1t5aeloB0sk88+RT9d+PrKHFoDyA==","signatures":[{"sig":"MEUCIQCs8mpnP5d8yuHH7SHciI+yqE13K825x8oB6yKkDKkVJAIgDxhz96pMiXJmA9qmroDdmJsvzqEgxt5GdSVvPckT6W8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6slCRA9TVsSAnZWagAA3yEP/1NnXlLJkGbokb+ykp/g\nZ3+1ijRARy0v56pgIaStE2eS65w0oqgjkrpuTVvgSdz1DPFHuxXzYwsGc+hy\nCOqLrYoac+xQBNh9XXVnn7fIOLKAT8Hb9p/8M/mWJKqmVeZdGqQl08lT7s3V\n5Pf6qaNkFnIv37SDwjLqVq3q/C6YA2WEdfmX2OsMA6J/qd0M3QwEGZqVyOzi\neNvms8TKD+P4VOHmqq1KWD+mMiqgwaAVmbbNP6T9cpAMifPkpykazKVIZoUf\nlh9Xue6qkQhp37iucywh7h0oJuVHTqMkLc9IjMeSuywJ+gzD1EnageC7EipB\n9LCh/rWZvvQux9PCkj0lpJrju7LVfBIp2zvz7xMW3p7cz7xu3VAbWYBZDDhg\nAOGjb5vvp1nsWcB1xuyZ+RCvob6InLeVpOmxb591XjKl6IdXImau3z7k80Jy\nrIRhPyx4PMFbK4DJKQ6YqKGpdXUyZnebkYx4TMs7Q2dk61wrSjRCtkilOAz0\nPro+3Hbogh1JC+gRk/VG1gNFd1pxbsz9PaWK0mEwAjB46KcUl4mzxPcGVnK6\nziU/qRTRd78QQo2D8vxdLx4UbBj1eLNwfxhD+fjBdFW68hWHM3xac74miX/B\nM/6gNIy9jlKi19O/MIdIx6rHI6RWlFPL8cOG8VHsdpfRe9xxbZj4NKX8Thgw\njCru\r\n=W555\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.0e91d9c4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.0e91d9c4_1548200740885_0.8732830872059747","host":"s3://npm-registry-packages"}},"0.2.0-alpha.9d5ddbae":{"name":"primer-popover","version":"0.2.0-alpha.9d5ddbae","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.9d5ddbae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ecab214be921685542402d41715415adb99afbce","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.9d5ddbae.tgz","fileCount":9,"integrity":"sha512-NIcg6Pw1hS3aAdw5iKW3wG54bxD5EhjB0DOTC3smD0pO92PJsjrUFTmwHE6Kev4BMcoiueut60sco783eRbGBg==","signatures":[{"sig":"MEQCIH9hhCw9R6X3qp8/CAWOIVGctGs5cojQ2vPXWqdMciXzAiBk97Vmv9klEwYPg70vCglIfsZLywOv102ro0R2A1JN3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR7O6CRA9TVsSAnZWagAAwQYP/jshajoblh1UPSgAu6aW\nQwBzIRLGfAVaR5D6kuK4i8ZoOop8fEjw9+nychohmdOWrALbUH0Jg1DwhT+n\n1+JoBH7PLFZYGBTPrbZR8kiBNbR+LUve1OHt8JhYRjFTmj6+ywzJMIvBdsol\nWIOMXjFwp8oGHTmtDb4w6tt5dywL6yvKgBRDAycdGI3O/awRxCgPFqgFX8Jf\nj45onQET516hNEI3C8dsHKHTsuSx2jiCbWZOUnCar/h0PadOoHbi9rrXU414\n5YdwQ/dzJJuSbQ2CWYLiqKQ1Z/gN6VsIu98Z5g/cK+mYhBuvncy9EKHrNoHX\nSFVY4iWy+p08UJKEOoAq7Ipzv8FbZWLZs2ure7lrepxT4tFcm2I/Y/nR979r\n87xF47rPAQV4c/4gpXVkXRl4VA9PPkv3w82MVzIVz+sr8gjmI3kIAEO4BGI6\nrQTJcHNJrK5UNBZph5NNdiOBixZF8V54SXdAjIpFn1jd+0LNZ/Ck7YZwRMnv\nW251jPRXnZVBcF7+lz0R5WJAo6aEn6Htb27v1zz46WCspwMszZUZOTfVxj9k\nzORwHFkjgkxWGHi4nAlDEO8y14koMTVAWyovZjVurxk4pnoWPhBqPMS5uV+3\nQkp32E7cYBs5vOjLbyw0qV9EMBUP4aBy/JtNEi/7MI2NMOjG+cSmCM7fjbno\n5fIk\r\n=XB4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.9d5ddbae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.9d5ddbae_1548202937944_0.8652700352034399","host":"s3://npm-registry-packages"}},"0.2.0-alpha.d8e36290":{"name":"primer-popover","version":"0.2.0-alpha.d8e36290","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.d8e36290","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd0c046a7f5aeb2e10fb7da8153599ad989c2d22","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.d8e36290.tgz","fileCount":9,"integrity":"sha512-dVQ8a9GDUPq3jHjORhI1CW69agcv5z+AWdgLf96a5EGOs4Q5enw2MRrVFZZEuid8pJBtPCiIzegy/zChrCAvGw==","signatures":[{"sig":"MEUCIBFtvhpL78xv5W20Ej2jzgJNdU6wX58MUdbI9FCbMqEYAiEA4oi5O4XoexkqCKhFfz91ZvwVNSirhzkL8aiCBT30uy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR7QnCRA9TVsSAnZWagAAzHYP/RzPfyKUvVfGDbplzdPe\n6cQNHk8GBqbGIa+SyBKuYgeBLYwMHgZkj8gSEoKSUMeSRVFsF4WVLJ15Juq1\n6YC5B7JWgptKI9MyZarZPViaK9CACQrvamcaHFTv6aFYdXIEtu+y5PGPjjiN\nFbPvrcO2kFztbdnI1mOJuInFkVbuk4k1N7OPdgg3lZtAdUXU+UlVzZTmYQ9J\ndVXmF6e/ayAzf8kiHNEphpBPGzzVfYOErM/2XTzAoHWtgm6FXi51J437p6NL\nrUDqGS41yRFkfenhShQAOmO3h6GqGQFV18OlfLtyvYr+ApJO0No0oQWQpKXL\nQhtN1J84iGaQgiPpwrPmp6YlVwDgzFOpnW8A/MykjBZqCmOJB+LthgTtP2Dg\nk7EJAiVgR1kQ2svQe6S9tRUdQc3Gvm8cTr4JNzCuU252UUOV+by5Cfs450s9\noEHu9zAtNvnMThf1ZtrD/T/XRLhewYaQSMiNMornTrhH4dQXyGIWEfi2af2R\nCP4GA9TKHKXILW9kKFYNvLBh4uTewnQlVLVKKcMIetPVD6JU+zRktmYQbIQ/\nt/sHKeWRLQhNswRkyG/aHGvdAWTdUXPuNSHMSHWR4/J0up3yKPaq1n/xtVs4\nqqBqFRLc0NnFuOzk+o/B5JMixnyPsz2WS+aATB7AS0TgOdpL7wrmc2LQD7KL\na9Q0\r\n=QHdU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d8e36290"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.d8e36290_1548203046460_0.3783849121515126","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8d395281":{"name":"primer-popover","version":"0.2.0-alpha.8d395281","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8d395281","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b8c414951c9ef7f686ed12921340495ab8d70d6e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8d395281.tgz","fileCount":9,"integrity":"sha512-bQAC79ObzadUqIUPxSfqNQG4whicqikg+kgjCxqrUup8BrrAr17QhkH6JJ9ROhob29pehkZ9r0ycWsutkIkJ/A==","signatures":[{"sig":"MEUCIQCWhkLMVr2FwgdCTKffr2gDQGv2QtH1Q9SMENpkq9XKJgIgMsNQHhWWO8DdWml0MJiMuAj2xUhH9h2h0eggAYXGHKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR7SrCRA9TVsSAnZWagAAT50P/RWQj4pWsqeTEMWYNK7K\nzYjmj1FwZaTfu+WHNPrU8I9xFvCVPWMYIwX8S4RxcP+uXTLev2pOq2OIJX7s\nv2AK5tcP3CiiEVrEOQB8EVPGTAIxYoWS+WmrvhDcgLsjG4EGqPQnZPnMnRIm\nWt9usPxNQgLpkAV/5I7HSeJBqGvJSM/QyKla2HdV1xp2E0lhGGKAhBrHdok+\nfJBYnB1pv+C7xIMQGFAoqKacb1R4GaQdi8dBUKczsGPTmlnN52tVpdUHGbDM\nc4gR6L5j178Eoo/oTpZQHQl0vbqopAys/fdSx4e06TaSDGlUZtjJgMAsezyO\nveuyd5vQuSa31FqHNKF4P6RAPITWF+UNbSMonrGIHX0jeyezf2MJSmT+0TzK\nXJmXcTjlJS3odamkuYqn/bXrGfJhCCJtaqXbw6VhWnCngJA8S7P90BUwlBEK\nPdZH9N9MLt/UVoU9/PPMGtDLihKGKhCo759xLjPz0XIvlSfCWH0LPgSRdCAM\n1aLomH8WfBPLzAFclc6Ap0DZOpio0vXyl/+y772MCywKVOj3ca+o07FOK40q\nmtBW5NPq/x0ucg1yA35bVOawmI1w0IkDx4EM9i5DhOcJ/E/xiMKCkr4VDFX+\n2uWbmVXPDUaExXAsHBbpfrLfsTLnUCE/0ggRVQo4yQkuURDM5T4DF1/pP+U4\neaio\r\n=ycdm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8d395281"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8d395281_1548203178429_0.0374589448899294","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7e8b2dae":{"name":"primer-popover","version":"0.2.0-alpha.7e8b2dae","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7e8b2dae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"563d3d205d88b674a4b8dd1f358b9f095d0477d6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7e8b2dae.tgz","fileCount":9,"integrity":"sha512-uuUu22dR1Pk7J6DwpACIthBJ89oJOvZ9Pmuc65qEjVsy6w2vN6XukO6PqpwvHfuhf0NqJWTz09CnvoDyxzowyg==","signatures":[{"sig":"MEYCIQCaK5lN9FvcNrb2RGXDeHs/0ZpO6a13m6sEMlxsHsi32wIhAK5YoqsxwpoxI5KGvE5g3+Rj59oy5icUmMKRYDWdNn28","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR/TJCRA9TVsSAnZWagAAk5oP/0L+qIsci0OJJ0Z92wDV\ne23v8WJXuJTxbX9urs2cloIFT20NiEVrp8h/o+IgL7g1jxQ72s3uoJtfDuxf\nvzyA3jLIe71KPf+7zGrUU7sGVACx1dy0rkR3WNWdfX+rhdGFkXOMe79gBLzm\nBBc3n2kTHjW7yMzxFq2Q6oIc3g9x8IFPgOqSjEOA/WoauNAXgDgheDBX6W6r\n1VdqwTXvAD4gxJeaytYGoH6rk6DlFoLsRorxSyRdCwfLLmt/kBz8S3UKW2jv\nUZZgpI89jVMm8H2IN25qZ6cqYE7DX6ivw4NJUeHdepDgXoAr+YHqdv+MDce8\ndg/7F5JMicRnuM/S4+wU2LVRauoHYZYVRwBdF3djLj9DTFGaLDujrsL5spvq\nXj6tA8UeCoZTei3694EtP0O7Q8008/4tonvKdqrYGWUrtzZjDyJp1wL/oI7c\ncUzAjC1BFEtuA7CNL09FrowBNgY6aLpmKg4IzSqGu/nbb1Y43OuVd6PKC8ZH\ngIrfa3E0/r7ktvXV78bZiRnwCyaMddSBJ+CPxC4y7hOTLDC6gMygcpRGnJpS\ni78BaHmIsTZwNUCIr2irrYIKVq1T5HZ5FuaFA84wk1UGdcdfC9FmPtq+qgH3\nVO9cRyFI7iTJH179rMnALDW8QpPtH+gLsYyyCN14cMjeywpYMqvaKApweNVq\niBTZ\r\n=fv6s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7e8b2dae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7e8b2dae_1548219592285_0.5289533429627713","host":"s3://npm-registry-packages"}},"0.2.0-alpha.113894c2":{"name":"primer-popover","version":"0.2.0-alpha.113894c2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.113894c2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b26723f37e6d6d8708e707349da5ed3b17179764","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.113894c2.tgz","fileCount":9,"integrity":"sha512-G6oBlUSyYljR1NTAu7vIJbyu+sqGazvVsAeHxRRZ5Tid9OfwNfhH8jKN0UnCihiRScyv/NwfmhpnWbGqmnmPqQ==","signatures":[{"sig":"MEUCIB1A3aCpz2ysoryE2LhC+qZiUgwB1mhrh3B31BHFHTk2AiEAhRXR1r2uw+r/tCZv0jOhq7x8G0fT42MhL6gPklsoPjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR/ayCRA9TVsSAnZWagAAdcIQAJUgNJktLqhpYeTTp1wx\nKP5RjXAuQQ7zqJZVkpTYbQbN84gVH4m6elQ79IuMaIr6cnk3YQ1mS4dWyZzd\npEoBXmx7QnGpwUqf5G3ySeQ2lkLUv/G8LGAGaeoj1p/QZgrfSNUtP6pgdJC0\nufGxohZXcMScSUGbD4PxLlKELL127RY/ijyhcoUD54K1GWWE3mvFOQlRTvUB\n/sc/g+Gu4oAMUoT6rIz8ZuhKKO5n3CVHOQce/RR2NNrH0P9svKt0x6e0FElz\nZ80qpGRD+rGblOHiG5xqJFbyIYlzeB7ZcsinHSK92hUXPXmKbXpBpgK0BzfD\ndDsdlUfE/inbCwgeRkeESwRrQCp7ANpesnEQGyQ5jam/p0PJRPEb4ZNXWEBQ\nqWtrr4kbCBTd/VHTDrjTF2M9uaMUrWDzJi6YKYQevlDpIJ8laiYmwSNBHgQb\nPlYgeqsaoGe2ppm9yqaR0y9+OFHsyF3PnkOquG18RLzqwc+W6ZfIoSGLFUYS\nCFlyR+ECIheUdf0lpNu2Dxh3pDxTlUM9M3zyf4QVwtcB0/hkWzrxxOpaCVag\ngfshINb7dHis+e8uvxk1uOusWknG8Lz99F0hHJaCeJOzxqXguXkQkHODYZgI\nSIlama8aE1rvOYmKCe6bZMvHJPuPkpqt26LpJ5vesNbqB1iQ7dtzvJmLPFia\nSOUm\r\n=Ozma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.113894c2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.113894c2_1548220081689_0.2537759692470183","host":"s3://npm-registry-packages"}},"0.2.0-alpha.12076a07":{"name":"primer-popover","version":"0.2.0-alpha.12076a07","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.12076a07","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7898dd84f3463645700ae6fab746ca60daaffbca","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.12076a07.tgz","fileCount":9,"integrity":"sha512-5kHKuMu85CKWoKBNNepFRPfefhtaHcvIvRyIhNdJ7aFb1DN3rwykZfSARLOc3WjFY6U/+qu2awlVj5hqSnX8iw==","signatures":[{"sig":"MEYCIQC7MCoX3RsmsgwQBFKIy1scEsOQAzQEfhd/ytrzQMBUdAIhAP3L58nZOYgtEeexyCnCoyNAonw1W0u3vpKupaemlLY/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR//jCRA9TVsSAnZWagAAp9wQAJ8BUwsxDOOf5DYhThpf\nkgRtCAAKRhlB5JLIKADkVp12qG7cosCLSniz+Q9KIM9pmw1E9PTruxNf3vbO\nk48NzYSw6H3lXLNcSOn9FBV/06/ADMMb/wWBDb7Xv6L632vBuPZ82NcW3Bg+\nvt9hOJ1ECmwmaLztTd2XkY9XuAldv5v51fSr7baWxDM0YyG3C5lLfS3SisKw\nEhQnTMpFbePez5XAWY0K0b7bYLjvNtkpF9uvjyECvTzNhaLYrhGkD6aoq/PZ\nlNJQ5pjnrQOOf+VAbxNbgxdHVUdJfbErkwZSLG2FbhZf47r+rvAQY2PCQdYx\nr/9ai9V7q531I/x4N5OT25WjED9lBNmTPLSlegx9DMLcdxuUhW/mwcIYyOT/\nSp49CY94GIGoxHlyOoMpCbWrWlDZCnzx+UNWHLr8z5lnJb2OHFjO9c8UWmHD\nw86siZCQFzyrvr0A6r9p2jHe2KMbxx7AcgBVqKobo9c19BTCrxYgtm0tk6ah\n3KO26d78smFFq5UNceCcEfssFmu1FGlbHnenyjYC/q6tNl95rIeW3kvkaUId\n3gqPOjd3UnG1WnuHqbo2L/Bc4mk084gVUlc4/eg6j07fLxij41AGGKJAlum0\nDtHQNVYS7Nizv0MHbz8ylzEwEupGFpFPXor4GbDp7er/sLaY+0+9OToXej2W\nX1pD\r\n=lpF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.12076a07"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.12076a07_1548222434882_0.5928106305590428","host":"s3://npm-registry-packages"}},"0.2.0-alpha.33d1cca1":{"name":"primer-popover","version":"0.2.0-alpha.33d1cca1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.33d1cca1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"200814337f0f0c48e83c07e15d36e5c3712d1344","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.33d1cca1.tgz","fileCount":9,"integrity":"sha512-apFVLWlKwC01CbEghnUmA3rQ9890ahy2IlllpuGKgshQ8SSURIf4+6j2O8agLv6ZCQW4YGcZhrPk6mhbvLk+WQ==","signatures":[{"sig":"MEYCIQDAEHZnm39T9fYw4+gkmtPJfKOuwhrLAM0EHDKXUxntVwIhAOUbwf2YzD67LwptGdmaoi0ryWKm9shfggrzNDCvefRv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSL7jCRA9TVsSAnZWagAAIcAQAKRMpwh3o2USFWM1JKpW\nHIhnwxLwqgVkY79eO4NP3bOVJNITTz3KXM3aIHCfJt5CnoxQDD95tCOac54c\nOJy7EcCRvdOjIJVyOwpgRXzwhXLlrBTZhbyI/v5jM7sYlXgUkH3mWoarWMBY\nuHrJXbRUgOZVUVn4MFxN+G7oIwDxQo3ztWte62b9pjIusXAzlnIISgEVu6+v\nfN2FaYMKnf4oqGQHDEcC+jiZmPenMtIbZWVkcMEJNDUXeKc7u45jp5xGhtWY\njOBekXyPhx0j1B9BP6WGBDIUPhfUiFoP3bpnbP4EafFMTbsla57bVpknTW0d\npiZguW97KDLg2klAtHR/qlFOIjXZIJnjAqjX2vfbVKkEqzXm40nP1U9BzeGe\nugBiiBEbqRUWdvy3S3djQEPl5k2uXSwF8xv4WoGWcpNV9Pwy/ZZBng19O9IP\nRtQBptLkEBusHmLtQvh2I9pmfcTLS9czqDapw1tj4EdJ9xUu/DtwEptdRURT\ni/jMTvYnu0csZ8xR/fWIAHodBrE7je28xc2Ig83gVc9F/rqdGTDbunz6v+Tv\nnMtY7ohvP4L7thjaRq01KpwKG1yRIb0T1TU0oodD+XaZaruxdtkz2uz3ihkP\ndYNhXhxA09ikpUNm7hs5i2Pb+h3Y/lr8+60FBf1iaw2zATemR4mlJNMbVqxk\nrxrB\r\n=EDS7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.33d1cca1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.33d1cca1_1548271330941_0.7658905635701339","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1a7850cf":{"name":"primer-popover","version":"0.2.0-alpha.1a7850cf","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1a7850cf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7f43672be2ef51469baf6bd3d4bc1057e31b3831","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1a7850cf.tgz","fileCount":9,"integrity":"sha512-7gaUZG70naVlTV0UrZbRqzvwxtwSalMQWar9gW04R2lRefr7BV7ZVASEkmQM/dJRkp4tePfgYlMAEPvysgx0wA==","signatures":[{"sig":"MEUCIQCqv+3iFMu5mefvKmS4hurqT0pVGUYJqRECkKa+198StQIgK9FJ6KX/9aQUNxw0y5TbTxFR2LFGUu5D+O62RH245jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSMN8CRA9TVsSAnZWagAAQjQP+QDKQ+NUiZK6DJDFcmy9\nd4e+R5oTnN/tT4NC+UubzecVtvgnx+PohbV+3MFpbtzS9ehcO/eDamjnmqAM\noT00xwJr1gpoqcDsSewdrwvgXWekjdxlBHKTV49BCyfQLzBwl80Tj7PMJkyR\njv3SQZNqsJ3f3vcKq8tei0/kNcC3+HjxyZlEH7MXjRxq+3SGyttnDTclPQo6\na4gCc1+3Jt7sOrSp8kbKAFvioSsg407O+vjN7e2lrVbp/xjCG7AIjcLgBvER\nW/GukhhFpvBi+JhMf4ieNC+V/+bDERZoMkycElq0WSJWwMsJy7NWjKo+gZdQ\nF0/bOGuAN1E97PkegFrZZ79SZSXN2qB8htDr2KZmx+GBM+GLhnhuh28iKXAh\n2ZEvw0F8hNq3NTC3JC/3JYv3jqbGAHHoxvXjJo2fLMvTSfvNPitnisCS9YUw\n4EuhS8RO6i+T49oQ/AimhoAjfLv96Vg5VAVr0uXGzaQVwIMjKkYBDfRTh5TY\n67sZLuJ9DndoMNIwqJgUcSTy8J7R9JOwq11t/LEJrX6LFqjhEcvQPER95xQ+\nZavtFypTr3UjcjBCx4cPJXAbLlfDOWVSIrLzOJFbEnNtah/aK8NS911KB3X/\nBFFotwNAE0XYJmFQ5TUHqeoX6H/52D1sLWGWpvgI38qCxlGwCWbd4KHoeglQ\nEBu9\r\n=RHPT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1a7850cf"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1a7850cf_1548272507540_0.15209705545404906","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2682bd3a":{"name":"primer-popover","version":"0.2.0-alpha.2682bd3a","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2682bd3a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"16765d07070242837fe75b6fed97f45d61c273d8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2682bd3a.tgz","fileCount":9,"integrity":"sha512-ld50IZk6aksoMIMXjDNKCTUPMbecOkNzJwbVaGA8t0lXLs23hRHY2VypAgz1yKZBwRL87ANI4KeRG1qhfthCrA==","signatures":[{"sig":"MEUCIHnJQDY0jh/CVaG1or62LMnr0q7gwCPaUdwqjT8a3bWNAiEAt20CKuekvkUwrI+dGeFQ/f95j86dC5APybFe3eMGagc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSMOUCRA9TVsSAnZWagAANcMQAJZrNLUjI0byFFvnjZrS\nb/cuwW0AprGIrC0/jEjoz7/aZ1y834PKUY6RjkWr3lkWz5yikokJfvJrDxt6\nXyuLW50fZ4qZNCekFyX60hB2gjMjYqdQ6Ss2POOXlYeBflFYL/J8BJB8Jvki\nRrXHnmUrH7e8I1KkDOuhZmAsWIxZmgiZkIXmAS7W4UmVZu9TPKJ0K+s5PusJ\nDGLJsPPRzK3YZeaZMQLRnUG/OOTMFpCoL2f3LcV/3/ca8YG22FyWc8uAeTtB\nf/S3XCAtTbvWz2q0JYKNwN3cBW+2Z/U6jNX40XoL1QXjwmnoFCRmk2h87+e1\nzXNV7YB6NS+G7pus9oOjaIAMU6MJN+6Xfm8bK/fu2P1KsZix4auA3gfD3Zdr\nFCK2xtgria1vYxOkc1LnyS0Tssw70JczL5zSEivNAgY1XBMba7GDQeE40eSF\nFvTxV2vusmqClBPOPO1dWVRRCz+BB2iYts2TH/aXMPFpXYCz+uBa1XGFezFc\nUJNUYReFzvnH2A7IZqNU+TD6QfXl5yEEw5jza4j/8wGpT6Zf3NliGcTik92n\nCYpHIRQb5jTI82sda7lyrb08bhsf3KqkY8SxZUfVPJTdG1cgBknmg7/v81hQ\nwUo4txeneU3+DhyNVmXcS4AKjH4Dkz1B00GIheTtIkZZXiaeFlFFzr3rZJPC\njhiK\r\n=k+LP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2682bd3a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2682bd3a_1548272532181_0.7637565235271628","host":"s3://npm-registry-packages"}},"0.2.0-alpha.96f9fe02":{"name":"primer-popover","version":"0.2.0-alpha.96f9fe02","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.96f9fe02","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"51cf0d658d31fb53cfef3c376446d57e81865d60","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.96f9fe02.tgz","fileCount":9,"integrity":"sha512-HjTLWUHTMaIrl5E6GesSpA0P8yxFpdPAaFTbwsVtTGulaQMTdFB6J5wzFIOBds8pa91r7aGN/12s4FzXnVtJvQ==","signatures":[{"sig":"MEUCIQCTuDhKH19wWyUkTWKX40oe1ztt9ZanXmf6TeKeGSGxswIgGiR7LLq/clX3ZiVGPApJS2EQaqb1KzwDdiNlxeCvGM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSOGcCRA9TVsSAnZWagAAG6kP/R5xKQm4U3ohYM8cbDq6\nhzioXzpZePYNLuz3E20WdCqnxWs26x/qmwH5woObmNCIOnIw8ml+ulBiqkj2\nGQtU4fPwva7LcCGSUM0KQaVQgGG5rSkxM3RK7PFoA+X24MBmaGKj7eUAKOlf\nlsQXGcKlZtrfQ0AO9akc84g4cAccr070nuAH0t4fRcKu1SlsXPnMrZiNfYTD\nPcAq38DlmeU90Zfasgx3MFqFOE0im2XO4yF6o07rRXwGn6gNNHp1qsg48IhL\njqosoHA7rqwfjFlr6ZJl94L5Env4WsTniumKqlpKQEdZ/BQZgg2wIFs6ij/v\nJos4m2IbBtgf8pwNGUR+ilsI/1VLdTHUA+b5JAbAe4ydm8jWb879tktQtCcQ\np6898RCuc+81pl+qEA9ifckTxovNSK4zggf62cvi4kqWhZ6yNxMY+uXLGC5+\naGoVguheYy2LD0GIaztibEJ4vDj4lXEqxTotnvy83Gi+4JcSMZgqTJepa1r5\nV/p+qK2nmuHXxymn5moCUfasbvSbmNOenhhFkoWAixc4J+avwuA4QA1YnXTJ\nTu/jH4H2HKfAZ9GyY8cpxlxIXXLRLPTgQkBnS6u6PfQ6FoWIAWelWG7xDuDX\nzk9MibWEiFg0LI95L6TjgtsvdCNSlEBWgNtv4nMKDt+C5x4sZTOdppePQWyq\nmzUE\r\n=3+LK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.96f9fe02"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.96f9fe02_1548280220278_0.602155758209566","host":"s3://npm-registry-packages"}},"0.2.0-alpha.7f53e5ff":{"name":"primer-popover","version":"0.2.0-alpha.7f53e5ff","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.7f53e5ff","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8681ecad7fe78a5bb0291e06e0a2adf98b689c51","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.7f53e5ff.tgz","fileCount":9,"integrity":"sha512-n5Bstsdm1pHuyj0SKBeal+KvT/C4LdBnO+5wq/oVulB1FMVFkQinOjkNAC6XqrNWmg/qg/aRh1dFGfac4tcYdQ==","signatures":[{"sig":"MEYCIQDBNTkpokUGITwYUwetpCY1uVfCjcn/ArVgXwR04PZYjAIhALCbZ0PIT358Nlb5fwblhr9BYtWp+UUHJfCSpWGl9K4T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPBkCRA9TVsSAnZWagAAKUcP/1Aug26d3yjb1BgPyl3Q\nNev9RPV1m5hCguukcHRwgumy4UzSTxCnUdJu3ZAyC/J3A9czS1YtAs+2pd2M\n2g4GxhvVJx1GCyH+zwGqvsliTyHDmHbGBVdvI04rcWIxjTxJxvROCVkKRLS6\nFWlGxdY+wcWNv07XSLBsYxE8oooRT/FWe+s+v4ZRLFxt2hC3UzYaeKRj6xYf\nYzswl6lD3Kge3K5uxDzZg+mMbNizrkBoSy6ncHM5vjLKYHt2dKmahnSJsHLf\nvi/kMwgtgHvUneJsR/1ltVylbRT8z6UdTjeb/qkR4ka8Hh6qK6nMqXN8k7uP\n5TvtfvojK1aeuYmJ9UO/VJZAkUzWiKxRQn+pdhnw7iUattfcTr8ZjgkDSu3/\n2D1tEiUCU5jU1xHLfFgDPqE4xbRNGwZgm9M74yz+v1BmiEAxaUvGjc84z2Or\nUanjVkKQe4sg6qgCRzy+pwzBSiz5w4LuzQTdEsbivCPMZV2pEDFj1Lug6CPZ\nkiS0SC8cHOKrvFJDYXRfQLj5meJVPscoxn6WTwd/Y4m2xaYNYrOsLmPpEOfV\n/k15yn6iCybDXPof+Adxc4/vII7/ovXi2OVnEOrstNNqDzKxPpWmbUhxMe6U\nuqJT0SIDtk4Mc7vOgsH7birdjMOeCKq9aRZJxrfMYnarrNlpL1TQdDD+JIW/\nwWc2\r\n=Lirc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7f53e5ff"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.7f53e5ff_1548284003833_0.8004678651537369","host":"s3://npm-registry-packages"}},"0.2.0-alpha.78cb7baa":{"name":"primer-popover","version":"0.2.0-alpha.78cb7baa","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.78cb7baa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3648645e07bd5d6fd6b103ba898053c4a9129b40","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.78cb7baa.tgz","fileCount":9,"integrity":"sha512-NlKg6hC/6RpEahC6t2RPQmE+C5HcU1c82h9uCwxJY6ay4jb+Wc+sRo2my9xAemEVJjrqdtWyzAEcC932K7I+IA==","signatures":[{"sig":"MEUCIFUWYo6IVmOpMziRwXCKryjVkfYJI5+nLjbjeblnFrhYAiEAnCOtB5HL/glq8beKIjJCTq5BuWN2dMDylq7kqfOYyQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPXwCRA9TVsSAnZWagAADs0P/1HDzmT5WAIwXfANzVtM\n9ODa6gT1yAZv8Apmd/eXPdO2r0Sm92iz2NEeCfJ+96TXmLxC1E8yEurfzrV8\n+Yd4n4fYWn0bsno0UcBJ1fDweXwQmBv1UoERtVe1FMghdW9cXjLw3ygjWRJk\n7FfPlZvXcmWLtkokiIgtipkrMBuEXZYLPmW2Mz3FS1tnxG/8MQ7YMdMtvKRK\nQh4qFAJDIaeDic1SQe3Vz3utyyxj4N5t5D+TDg0Blmwdwn72lqc7lTiubwzo\ncyE5qlu1zD86S+z8E+3uJOeIvIeWPZWSBe2MWn5E+hJR9y+mAWL2IkBF+LhQ\n+29OAiGUTld3GMMsZZ06mgJOjCzAttoMC4IPiqOC6J8pxO5NvqAL+m7IxoU7\niwUgpehNvKIHzXqwkCH/xeT0P07pB2ld7v5Ruo4AMq+DvwpbhTI/2vp/csgy\noAYD7m+er6rnrJSS6cy6tYU9kX6T/SzBGi3DMJzWYRTI/4H6wrBhsTfQutZv\nveKXXgKOkytwZGnKrHlMcIcxM3EddXMG/tcZHt2y8hexgWhdIoFV4CryIJeq\nD24BFlqPHorYwwe4Bqn6k/GjyDBXjUwdixrHWeDjkKhtsCNDDGJb1V3razOX\nn8c3hZEwYAY/MQMYZL+EDhuJQPz/DNuuQtdr7d2DfAFCg9dlnQeypA5KLwq/\nU8VH\r\n=cFIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.78cb7baa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.78cb7baa_1548285423693_0.5505937776215184","host":"s3://npm-registry-packages"}},"0.2.0-alpha.1c57a0a9":{"name":"primer-popover","version":"0.2.0-alpha.1c57a0a9","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.1c57a0a9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"047a417f58572886742bd03f41035df6c8f1b1b9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.1c57a0a9.tgz","fileCount":9,"integrity":"sha512-K170dnQqefA+SKeDu4YEKS6bmz3qYcCbFuswuQe7b4rX6Mzo0cPSAcXqL7nxbfAgbA9r5OH4NDga7D2DVAR68g==","signatures":[{"sig":"MEQCIEZuXYGFMi5dZzpypTW/XABZHfNUgEjFp/dOFPxii8VlAiASO4eyu2knpUfkQ5JHnAkAQ+rwuT3W+RUWqMBolSSaKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPjKCRA9TVsSAnZWagAAR6EP/15kZAhI9+wvFJwjIDZi\nx1nGtI8jTBiXBWEgnEDuzYK5cQL/X6IleXFOyv+ZXRxgdlJBu1Hl1fyxGsuT\nhXCtJYhRwNKpybZC1fMQZKCkMrMeEydNx1CNhks71V7Hlaavwg97fDxXCdLb\nlX8TzLpMrb4tjhKsI72n28Ps81U1vvbPNg7I7Prc8Iwhpw0o06dWmKVps0XO\nPQDx2dQlqCIQeetx3dBS20mm3apmEVBnkWatvwiIDiELjBwhY6pbFPNDjWsv\nZEqCNtRMrD2uFX6yPaH0LxELtXpl2vbOTui/GU3bQg/+X8l/eKzfKx0dbrOm\nAwIvMvWUXPZlkWu4fd0npNZa9p113h7CxdYFWAvKa0CUOvHist1rEE24E2/B\nkrys5OHDLaNK7dXgU2G2VthjEURjdH9h0sJXWVwf7My0/lnBgyrxaEQxx0nX\nHpG6WEFbtIr9DzBVBhgNcFgSOOetxTnIA23zdiJTw2s+C2hqyxU9rCJ5o/xI\n5kevi1oIQNFZNMOZdg7oHEcxu7/CZQRI5zWUg9xaMaBuvQg42C8R4CISPqLG\nHbRd5d3o3fijg9xKKW0Gf4Dwm1zcYx0vzmlFB1CvIhd0rfMRrlb/L78evBQG\nxzQUStsdOZFTuYbUQoVikU3oOVQp5T5K+H+61Ybq1u/Rb5cZ0Za22NijZqXY\nBNRI\r\n=qnXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1c57a0a9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.1c57a0a9_1548286153618_0.6344768502572673","host":"s3://npm-registry-packages"}},"0.2.0-alpha.c9e70d2f":{"name":"primer-popover","version":"0.2.0-alpha.c9e70d2f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.c9e70d2f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dcc131b899c95ed8b0c007bdc2daa76060785621","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.c9e70d2f.tgz","fileCount":9,"integrity":"sha512-z9pLsutyUsP63Y2yQ7Z992Zn3pyWz3NWLbiB1k4178rWF9G8SQY/kQvXtLIzM8KRkmEf0B5sA0o5u4L+ephQmg==","signatures":[{"sig":"MEQCIHnkUd6CWzL6JuyRiUvIqmUq0vUeHazoFiH3AdfLgNRgAiBnwQa3Sti6aqjn5ilXWdvYSqzqwBsTK5MW7Eafm4AoNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPkgCRA9TVsSAnZWagAAHLEP+gJ42D9O2OHw1WidXkkE\nhnBShTOlZXFdDPgCF7DWTLrnur6kVIz8750zmRiuDZMB/GZDlw6nh8QJnC/R\nJQJ+BSA3sHQ2HQtcPs6zWrBe5z1zLL+lWz8UxX2kOX55wHHWp/JYRGJFGJz5\n+J3RJsS3tWqK0A0iuAhttrJpFYO3yuHRgUF0Ymc1qWWIwAdjoLbFMT5XX2hM\nNs1P0sqLuEtSj3yZc5KI53seRhcywVX1gsk6Ge0qLSjoWa05+ilrd2SEnSo3\ntTvWzQDyRhsdEapRgaIqBtoOmTYlBloUHBvapd9K19d5Y3/ZDc9Max9BfFz/\nJUxZGDY2CwuPhwastrKP2mzEhWLkgCzxHkiIYhwOGXLxLRVMI0lpBFTKF+BW\nIEKL4J0hS5Jzl5dR8BWuh3iVOCopH0kFC16Dj5i1jaNN0DRD0iryTBWVXSA+\nL2hh3ZEK+cSv2SQD97OiqgMQl3ydsTCD0NtWw2W00a6V3GpNbGr9Ce7v9Fae\nC8K0g98UFsIoEyT/hu1Lnx4Mxr2chbUxTUhZQkZzzsQ/gR6gn5SHTjhE03ah\nyopCXGEPm84trbswX9SCxy09/CgHGJ+HUrtzlKO+1R8FOEDNQjE/3UHbSFDO\nBTyarJ8Apnni9g394Ba2oyFzfr2UQTrVHenS+Mjx8U4WzLqpnabCn/Q3OBZ6\nIFGe\r\n=fnrA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c9e70d2f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.c9e70d2f_1548286240391_0.1259604655439599","host":"s3://npm-registry-packages"}},"0.2.0-alpha.8d7000cb":{"name":"primer-popover","version":"0.2.0-alpha.8d7000cb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.8d7000cb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d08e9ee04a0e1a9f76229483a3a7ade057ccaf13","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.8d7000cb.tgz","fileCount":9,"integrity":"sha512-N45Sr6095yiczBbq8E5huL8OZYpfpSjMlqN7RHrneWTXMG60J691T9c3CgpnYvOGQQlAxgIX2M0t5mJkA2UVoQ==","signatures":[{"sig":"MEUCICEGEVji3iJDyggxXG4J6Wb/uGVfxspVs2DCVSXnCeFzAiEAy3MYZxPtcwcHGUGsDfIkF6g26Bc5KP++L3m4yaz4ShU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPtsCRA9TVsSAnZWagAA1V8P/2bdUtyHmAOK3fg/rRtx\nj97psY/6QTKGdlgYdl7EO76ZUYkIIHKHx7JVPrWOqdvye6Ze6CDA4wKIIz6n\nOlzp5FugtatDWxk7FhDZxv+89A3kgi+evLlaTSt60TsfuLU4mY0rIaF78UJb\npPARQ0WqL1StdLYjCXhH2qaRsxMT7LRLTthC3MGGVc6INvFA9OG4TJ+H+yKB\nOGMQOKzHLUXe0WJP+fazVjnQ+loLxp6A8tClH4Eg2asOTgHv498691CZC2b1\nUzA+i7SLHRwD0CVMKl3EofhKKPvW6NovLC2EEJs+l2joHlZqNST+jkFtzlvi\nuSaTyNTt55xf9Z0QOVRiy9oQXiAf+2v+T3yk8k7gAZ5WU3Yf6bdq8bk2CYbM\n5DJQZ5V5Hu2L1OE1Yei8xR/mmQCXkmlDIkFSupSczuU9fHO87HlU8b4717Jb\nARsZ8Gg8jJjff2+1KgaanDv3mXDwP48Lfc8nbUG6b19zql809tiwQiMDw2cv\nZONXUOj+kG112r22nUa9blkY9w/txSKWLklQ3Hhk2OsMF2css3/HSDqyx3mE\nHhN1jGPH3UEjI4YtbbcgnbCZDiG5CbT255SKY0VJqXNjdBQGcvig2wIshhUf\nPARWKGqA5zYehKzqETr6CYJPBJRuQYG8piDYoIxnDqjLILhptvB1yY2CZ/Iz\nKdfD\r\n=odTZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8d7000cb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.8d7000cb_1548286827534_0.24130563176095943","host":"s3://npm-registry-packages"}},"0.2.0-alpha.127dd98f":{"name":"primer-popover","version":"0.2.0-alpha.127dd98f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.127dd98f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"15b27de9eb082d2c9c3e9d7f2520ea326393732f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.127dd98f.tgz","fileCount":9,"integrity":"sha512-GxN01D11fAZPVorPSH64DLcjhB81f4uGHNS3bkMJ0busRyEfLOJD1ttDlb/ic6XDT5GJmc8hIyyJ9Md6cHsS2g==","signatures":[{"sig":"MEQCIGih40DHZs80E5CsZlfwmZVlxjiFmb/DMuto/UCrYv6eAiA9AtWe90muNUl6tp/nTInDcLuWcBazrRmkhFAeTRtwpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSQEaCRA9TVsSAnZWagAATuYP/jNHKI2oDXURwVSt4qek\nXBXX/td+gYbQwlLvLd7AF5nOi8oQ9X+3bhNtV3Opj2RfevPYTR9qaptzsnmg\nHuGBuoNIjpw1rCUSxNqzdX+wF5zsY0NjQ0S5fOKBysB1GsHjYzX5NB8dX2Zp\nA+GFnoah1Qh0hAXODzZpSSJjMP5ZlGxjbG0IN7HqCHvlgYxU7dD/2oaoJMFe\nFOPEt5UUgv9qPz8pGnQTmL2Cutnl5y6gaPPxQHeJ/O2qZgBsyZxZENUbUnwA\nA+pxlouEpsdUqlSDVtExdMAnjamjTu4HuMKpvYF8+KBLJB2khqXroi45bj/0\n1JF6aUIPF1reGQs/lglMrOCganH7QEOPAGSpzzwnaMX9PdnFOe2Qe0oEqJHQ\nWKHbH/nLYKPYIR1ZYupFWIQnRVRxKDGEHqPyJPQLh/yDdpV2LJBVn3cR7sjw\nrVRh0ILa2G5u63GciTDy3OmLiHkropNLm/Mj2Raktq/6o30TGcEq3QhVaVRg\nF7tVA/eFJbA/XI37OuS8LIq4DuzQVvSbVmxmZgt82NredyvF6AkFfOaA0or0\njlK2n+GqC3TdSfWtYMwh4eTiIxtKMjhwVxUhpBiyenqmlfSP5murGurKii7U\nc9BFOI6G7iCJR03IBDW0I6t1pwBtbI89UBHR+87tr80Xkaqph3gnEk3P57bN\nJ2uP\r\n=zNOo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.127dd98f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.127dd98f_1548288281437_0.37874518323239315","host":"s3://npm-registry-packages"}},"0.2.0-alpha.61aab4bc":{"name":"primer-popover","version":"0.2.0-alpha.61aab4bc","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.61aab4bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bca72656216a3200257af6246a2d0b7d92b6c627","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.61aab4bc.tgz","fileCount":9,"integrity":"sha512-U8dqXGVerJO+I/GN5n+xBKEL/Bqo95+dhKgQ6U3neXs9iyhlB5/na0OHWRf5MmSgAAmGld4nPZjHWnK4uQd3oQ==","signatures":[{"sig":"MEUCIAS3PXMQMd9naC4rIUIFtEunW5vegZA5U5pXiblVL/YLAiEAu7uCIDAL2TuJmpanLX05ZcKSnXLea44G2HwLoUa5Lu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSQFoCRA9TVsSAnZWagAAogkQAIdaQwYQ9MKfzVKwgf3a\nl6N1r1Ek9DZ4BgBx8KNFhU6/uv2NK0UE5siwZ5kbraaLgV0nqO53q4rKMKI1\nMJMeW0g/yJBI/KRA7OFHHdFazAEQ9yE/Luramo+df6Gw3jQx7V5T/oP4y3nf\nG2SpKhk64dhqXkUo+6nlVOqkFDj1i82eqifceirAP4x50Ga0Gr5T3dDzyGcQ\n6Z5XrotJAXR7XS1yTTRdpLeqioZtRxVfBKSJV+fRvFe4z6QZcTnPNbYadj+s\nTbboH4aupOJi9oGWJHjVAAeJ2sJLHuh9MNUI9eXnl9PtyXn1o3tMTv5Aoy1S\nhfRSsutjxMbVxV0ZSHtgkWrfUO3szNG6pDECRW45QNhZtfp7cA9/BPFZ6iM1\nhQM5Fv3Mp77+5baN/pEli1dGDDh9Rk5yPDglfIHtrzOpwIwWJLy/5XAx82sX\nisc3MnNyw97b7lvEC9J3xWoX3Qd2QHbwOF5o83m+i6wtei8bU1EC+r0vOYP5\niM6r+uuBMKKb/2K0CDY1jX0JdXyk7PajHIxzpPd4ZFG0gTRyA7rxEJjyJU9E\npDBs1uZlGX4KhBM866Un5+VyfjLY1DrKM+114OskAtf0Pb8gmF8c7S5MBPZG\nQdwx3dgvGzCNoP62E/WEngjcRtzNZVrB7vqXgR0TMy8Yr2QRSFlEx/VYIiBz\nlS7z\r\n=h5lm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.61aab4bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.61aab4bc_1548288360082_0.7058115728189869","host":"s3://npm-registry-packages"}},"0.2.0-alpha.68c3e189":{"name":"primer-popover","version":"0.2.0-alpha.68c3e189","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.68c3e189","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a756aa87522dce5e1e866e062f7c6796c693d388","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.68c3e189.tgz","fileCount":9,"integrity":"sha512-9nS+MKF00UHLTTqx5Tgc7RRlH/dlcgtGIGTw4uJL3tR2H/n3Kqb69Dwhhpp09pt7zhhO6lN1aqkGQMH6HRmxSw==","signatures":[{"sig":"MEYCIQCubrvjZvo8Pd8KrZvD2wjJOK/IUurkFOVndaVltSBXYAIhAIcvX97rPu85qoI5dEt+888Gwy0SIi39G470y8f73pRc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSQpCCRA9TVsSAnZWagAAzVYP/2rSkE+HYgzi1xB2SA0u\nDNvcObhwZ7h/8ZMoqN/so/7QS6USzbGT9ZztTo+HZLJXkJ909A8EG9ME8+97\nWMjIQ//PwNcSsEe4OMDQE/fPF9Tda/T3c6lFFKNpQ8zHWvFftly/JJcHqnCO\nKfK7Cow3XYTXWmM+++1dgmliJ9NbAvTajKPeKwXpEcXceIhgjabWF1x2s1Tu\nHvmwRGVSxdSA8BpGEe8q4LQy57cx3Il3FLotSB6sYwsf5K8AXeuGDzpaiiSN\nINbTpgH6GcTcel8z77iZE+OxZ5fgBMFIbdvJNjDTK3mvdGxh9Qb8dQac7VFb\nJQ8KqkOqlh9ZzYRBXtccyCUkqCRm94y4f56kmmMrDaQwRnKhamdR87IeSvj9\nJyuSL8d4hcbxK53xyYq4pKwdwfBSzNCfkA+KZYfQEDap+MvAxx01AsYm7xJV\nAQe05ya3OV6OX7rvoz/btS3z7BQOtLkMpXOGnTEuNLLlmyVwu2VRgedp1P5l\n4aGPlh3bE3psERhW52+aedtc48EkMIlcMfgxnUyFM55r5JUlcjNT8UVF89Q0\nBeyLwlqw0I55bPaPTZG+Rg4TqJ+BP6ZQhEm9eO95eMBAFITLar7bNafmUs+n\nvWRUvwSarmuJRSWeC9W46UaZRgzPqb4vhygy09hZe8XR/Lg+ZhvJoS+qHMUA\n82y5\r\n=G1Tm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.68c3e189"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.68c3e189_1548290625876_0.8205935166382525","host":"s3://npm-registry-packages"}},"0.2.0-alpha.5a78e62d":{"name":"primer-popover","version":"0.2.0-alpha.5a78e62d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.5a78e62d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2de49bcd30bd663760195384309f169f313bb14e","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.5a78e62d.tgz","fileCount":9,"integrity":"sha512-ag5+CR2Ag+azDKTinuVmrcUjOIBPObSqL/0Hwe9O8eD+oTI/o4gbQkqJcWLivtcvTPKMsYaUJJEXx0HZxSIKJg==","signatures":[{"sig":"MEUCIQCxhVyN7/NgbLWiSmjFQ4C+cICsQPvqVfVPsLUSPqOjcgIgbJxuuvonH24JKi+R9biJl5bN4Nh8TUAb0cS5qEXN+PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSgvmCRA9TVsSAnZWagAAydEP/2AZgZniPys2O40w0k2T\nhO0RFgxQZ9cKb/t1kCDeQTNJM6Bu59NU6SNyy05LWlTglkDoJqovUKTx8xTK\nqn+L4cFlkQh4FmCVlmOPZs82ntq0K+OA+L/va2BFAbgZZHT/vlyO/mT07zbE\nRuWyoCYFHrKfZbDJQTNzb1oI7ZXOZ1NaJsSzVdwN6Aa5VinZTELYPdmqbo51\nhpjTMXZmd2/q+mFa+Twbqjo9lNes2NZhr6KtBA9dPQVqULhqi8ezbISZSs+1\ntXOoNKKHuura/U+pnoorKOFKEpFmRRG90WyRLQyVSWpuDVsFo83UwrjobLKR\nmMIwf06nneC/dfn3/E33+oxRpE3qXM2laVDBQqxX7j5eR/4lOLEdiEzarsQz\n9+he2xTzk3Qwpy9LLp7MArZZP7x0R+ujXq4FrZbb9C0zsMT/jjcbS54vAs/w\n2J15N7XUdM4BMiuh3cG5cdul+cC2HhA+22t6ffHiKa3uq1WBtSzt2hKeANg1\n8FQLhazD19z4t2Y4y2Z25cdfRrzXhMbZJPfLRg5682o/5R5XoIiGKtWYXcQi\nK7H9LnAA+9D4JFiKrh2JpevJ7zVwDUBh6XlQJeMpIaPXBaYQlVexocniYnGA\n/BjxyqfrmtJJKfFdNjhLOulh13mDXgC6B9R7zFFO9IrP3r1jh5Rc+XePOrVz\nkg+w\r\n=MJ2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5a78e62d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.5a78e62d_1548356581897_0.180990538670456","host":"s3://npm-registry-packages"}},"0.2.0-alpha.80c32bd2":{"name":"primer-popover","version":"0.2.0-alpha.80c32bd2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.80c32bd2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"780c19ec3b915770e75611b901fd94c17c4752e4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.80c32bd2.tgz","fileCount":9,"integrity":"sha512-VlT34Kc6kqzJwJKd0rOcSJ32QiAR6y6J93OAngDBPCxb+7BaI3c+C1sVKgDyx6LVkCO08GdgVtlFFUsgpOxOdA==","signatures":[{"sig":"MEUCIQCITLn+sQ5joJm0V9J39qALPrbiK/Featd/GsX2sRm6SAIgCUKUHG94fXainP6wWSnCmUCy8i8443DKnLEDES3yEUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSg2TCRA9TVsSAnZWagAADxoP/igw2vqRj4nEyFgTQGI/\nIIVMOeEIm44iB5fiMDJuCmg7a8vCHNyi8z8N91n4P4hQzLI2wLoTmxdxClgJ\ndzXcWK/DU/Sn2Jy4pMf7xRt+kaAxV9LMkMMonyG//VFmrqtAkrsIUaEGIYG7\nuXrRx/Zgt77AVZA7MYnEVqIANDPpi8b3Fo2u7sbjrmtaft72hgtXR3Dd7Zbg\nbtpv3YMXlBdvctoR4b9/a4uP/2fHlfwYbtqHEEet5aZBM3VR5qAXaZ5p/jhZ\nl/vKJhm0XtQFQl9V+66/5OiLIy8i608yO8Cl0SQUmRGX+YWSkqNXXqRYSCPW\n+ZlZHjUBinXxYOQAdMTFC8pxcUvxH4DcKoxN7xi5bXeCQLl8qAazLILYuoDN\nPA+4bYLrDDjaXyYN1/RbDqvqmPkGKoXAbtrW76OdpvsbG7uzu8sHOYN6o20d\nSf8gke4DAfrpKFetB0zl1NSRsoPwzRgR1Cc7fBjkm+12/xUXkNJZ/crXRoXv\nUqNEJWfsX+2bC5TdgpCfoFcmnLEiJHmbBSI/oD4bkSprCjGZ36hWCSJNW1xb\nQHTeTbrjSHRefj+n3qTrOvlPZcsin2LfUA+ot2f4Q8nY2pNhrrCKTzEf/gl2\nHx+7BZB/+4Ue0yb9VbzMsS0GM/yOg6Qxnbb0OBnIbLEpb2zL28Svtt3AVWo/\nPwm7\r\n=afCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.80c32bd2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.80c32bd2_1548357009157_0.20363757676783356","host":"s3://npm-registry-packages"}},"0.2.0-alpha.cb697793":{"name":"primer-popover","version":"0.2.0-alpha.cb697793","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.cb697793","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"356596f9f1cbaf1728efc8ad9e1a060735263024","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.cb697793.tgz","fileCount":9,"integrity":"sha512-a36Br6xrayf5cjYXvL3mvwocmXNMSXJ+QGZMU/YBDjuW+KwxUeLIbe+efeDixZ2I2kC0FRSESKe9qpxB1H7G2g==","signatures":[{"sig":"MEYCIQCnE8tHTZBFvADG/ItX9ksUJ8GyU3Mn0d2QqTp/kOg0OgIhAMWPVfQE+w/ZfgKksYLVozFGFhhlKHjFn6lbVVy0rrVx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSg8YCRA9TVsSAnZWagAAIMkQAKT26cdjj8PsYye0Dm32\nmv2T7OEK0edKOHX+jmbRUURRtPwYgV6KefmQFPSqcBZZc8r/0AbGVNXGWpMB\nxa6MidIPvbLLnxXt3o4+FhH3o8lNl/DaXW5zsBj9G1jcuTZwW4DSkkd5ixKj\nJ7VgSnFk+01ZKAGmJ5UDxP+NKXSxrvPkKfaOKwhhNaQ/BbdHSCSu5gixyE30\nldFSNe0uwCcZsQbUB0ewKAknUMaR3VRNzSQjFcGOaHNHhb0wFeOQ2l1iRKRk\ni2/FZUJR649K/EM/GXdwtt44oOVcN+eLma27VHkzEDqFmE2Xk8hZ2vfVGjK2\n+1oe9GsCizzou4LEH6x//DEhTYweg9dtb3rQFCJCtuT57hLNUXapSYzcdZBv\nI+gnRz3zMhXA1heKRzUpx4F2tFdan36axFaphBV2pG/iXmGgag7td9DYT68I\ndbl2WDMVvg91lZXV6yg0AJNbBEecV0MF9/43X5fdpI5KFzUx51PRNSQPrNVA\nfCfrzPk7Tpg6W7PZIK8W+myAUe9V9EV/u2DOOgMVMCa3d/VrcOY3OSkU3EDJ\nPGpvghMMpXdGtkS8FOpdvsz3RjRe5ubNFafbwcuwLj923NXQu0aek6yicqis\njpd+7+0vNR4ligXhMwfuadiE2cdEYfH+vvK55kcZZtBNe6y1U4ZyL/cvyvDj\nAfec\r\n=4frA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.cb697793"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.cb697793_1548357399711_0.8460583380193378","host":"s3://npm-registry-packages"}},"0.2.0-alpha.2be44f23":{"name":"primer-popover","version":"0.2.0-alpha.2be44f23","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.2be44f23","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd4fc226fe4c78b425d4b1d0d317076fd77c56e8","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.2be44f23.tgz","fileCount":9,"integrity":"sha512-c6OWfwrm4CF0Rykw2Zsmf1mEGyPBv3QvpkhZtU5c9SQQcAfJ3tCJulGJYzF9DI5LyEiIKy+A1ai6KZTjljfGgA==","signatures":[{"sig":"MEQCIDqNHI7QcHB8EUiE9uDFrBSBtO6lh/hZpFE3BZ+K1tAxAiAtKwCteTkAc3Url2Jzo53GYrfOOxA9RsiiznX2kmbKDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcShM5CRA9TVsSAnZWagAASmcP/1jhQ2o2DUEM4QFTZMZ+\n/SMxv/NGWNV8McZNDgXt/vR17fjBrYKQyUxyQZ/s7CFWunvLRlXRD6W87Ioh\nLCn3ivicmVqRk58Je5AniNXlElnG7GBRcjE72H0eUDt2q+cXjEeEBO9ow1bj\n4s3Z8xyPiQ3jpWFVLwOnflwTX4rnsDtXAInD9r/izyGQklg07g/GOeLD4nAj\nCB5gvMIkTLwVA3fnD7sHHchMsUUKfOBxFQqbTT7GG1gFS5ZM5Xxw1tL6PrzN\n2djhuq8UgjeLwTl1CnV12XZ134k5L25NCy46l0drmjIW9NlLVfqmMCqRCplF\n3V3H4BnQ0FJleTrb15hYG9uAIMjQ74x3fQzgpgh9TUGtyynjks2+DeLW9TUl\nAd7zI+8Q88GQFNAN95v8QALfXEojxhfqGFaEj7S3wK6Da6GHq/BJSGiU2z7j\nnpQaUjQTUCSLZZqs3q15IBLnteuFcRR829Xyk6jqg1wDFEBEa+lnrNtFojJC\n3QH3d2x7uhQHMjQNhpiodAh7j7sZPZ2UnomIFeIrbGDnObWcNSNvSSp5i18/\nROyEyu4NDqVayA4qhtd+ZKWhQ4+8T2inCWx9yRmD6wOKlTOe14hJCK+bogSv\nTYQ1qtehqntCGGKYD1Fe9nOgsrjPtdqmoNXjT/Ff8zDqwqJiu8JPTZomLNSM\njkq/\r\n=B+gt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2be44f23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.2be44f23_1548358456746_0.8741821474578","host":"s3://npm-registry-packages"}},"0.2.0-alpha.28960460":{"name":"primer-popover","version":"0.2.0-alpha.28960460","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.28960460","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1a4cae625a467fb7dbe34b3acc2f6d25967b2985","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.28960460.tgz","fileCount":9,"integrity":"sha512-lXZYLb5J/nueFySWnSAf+RBhbfYH0KbopcDKrzDi8Vs3Hkqfsz7sWIIjo/BBsmQf1twgJTuRbpMgaoVY38tW6w==","signatures":[{"sig":"MEYCIQCVGrPv3CM8CSfNOPUkLitk+CFIoDTAQGzvAnbjlSwR0wIhAP0Hsh+XrcxxJQJtUCxhlqxEqcBi/vnBnW5dgcYV/LD0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSkDYCRA9TVsSAnZWagAAs0wP/1sCOPjzhRBDa0/KtxPW\npqJTvt1K6KasT4kjoUvGIDG9721Lrx1+cnEpENZq2uwYPk5LfKMjhgaB9taa\nfEVeEXOxUapuz/DhlejTNOnZs/JTgTT05riANcFEHkGoklDPkAIqBJiAIYJx\nujPt9xr/9XViTRcX7abrP8mjXpD30RPohoHGRvKJWc8O6AHB+/SiWiUSGYqp\nls90rnK/JGc/UsbQnIwuE0Mk5ur2HQNF1sKjOuZO5dcCJg3hoR6ERVmRJ5I1\noeCURdnDaqF/wcWgMh40+9lyplLSiSkqrf+U/uB3Qul7biB/ALjVdA2sW4px\nLiXQ4hxU+gKgsyIx9AYCfQj4XtnjKI2kgI3R+uOgM0QcH4CY57e5Zg3I7MPE\nDv6dlSUYHLf0guPFlOPzUk3c7JeXvlrwVeZEHTJnXE1owXjEta6Ef5xGkqmV\niGb31lEkTCxtIx9GqtHa+zdSNzTq7WNMQawb39pqRi6Nj/LMCovudSqO1LwY\n6Ow4adTmly6N4p+4vbl2hcfgZ0vCQosib2vaBEuYzkTExfTCsIv5An3+xJNv\n7n1KGImHyDFcxWYf9MwTGrXDumaT1GjRpjVUsMwq/5LMduQ4+pZrhD+3tt6O\ntWIgpYOImLmBtQ6hVD4+Es+OL8jkQ69FB0fnmd61mGNWPNbsV8HYamHpqeNQ\ngxCS\r\n=MnHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.28960460"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.28960460_1548370135812_0.5120374410207602","host":"s3://npm-registry-packages"}},"0.2.0-alpha.77423703":{"name":"primer-popover","version":"0.2.0-alpha.77423703","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.77423703","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2e0f55c92b8d94bbab717e5dcbe2cc039b551a40","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.77423703.tgz","fileCount":9,"integrity":"sha512-3XHc3vIkMOysh2O7GGwwut2EQLr/WX12PWmcFHSzQSnB+AKZ9JGb7tY4nVP2dhCWZN5kJIObIzWwe2Dk1QjgTw==","signatures":[{"sig":"MEYCIQCDrW1b2c6X37k3RRSu9FG9nRXJG1zDkAP2WrV3zBHkwAIhAJygf97ayP7pqdnz84doNdmbV9+GoP8aUq8L1WJQZz4R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSkIJCRA9TVsSAnZWagAASBUP/050kDawENtnNs5AGwDS\neGiCMNW4Vxh30N75zOIl7MYqjcOrbHj5kRWbW8cMMybmdpbdqfK69EJTWuz3\n2KNdXAL5sxtGKvf8FPGbj+NXYAdoTW6xILGn7D5Q+WXrBSiprj5VIRiGtN9e\n7WBuRz9wFd/TC/Rv6g0ZQTicqhqZ04pPY+48Ty9mWNEuC4/0IHjct/59gqfZ\nBbdRoJnfpGtW4YQ2rYYjsRPPKo4sJSxgXqFTJ8JUgE69JH/+yQluPKt7T/M/\nEbk50Z4z0TJ5+/7GM4c5uIYUFgCLcS2HAotOvBgkhVmAqNZc3fiqhjoO74sZ\neYPjsQnZ347TcVZ6O9mGhL46tWUpezxjAWfP9Ug57ysu1/R6GWVnURGOT268\nM1D1uJ52IHLfwT9+OLU58+dN5t4kYp+5BJKMK2TrzX+G1ATd8AE3/qSIl52Z\nYoDbVitcqlNrA0nNZz04BENleo+x6RpvC8KB6FRQnIsF8SsmIXJfdkj/N+uf\nzb1p3iyrmcksphouAzX7hMucTMSjk5WBjMeFHe7riivMR4T/tsUZoy7AfXbE\nvqe+UBafV9QMIkm/2EoQQrTpqF5gnXr145+1VPHmHEV+uzhJr5nuwTeKWLko\nQWjH2Qy3Cv5zeVLyBMKCDmeBWckVJccbSZ5a6oz7OyXJ0B0qcBt8YsrrJ9Xq\nCChe\r\n=oxa+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.77423703"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.77423703_1548370440494_0.9862283498780775","host":"s3://npm-registry-packages"}},"0.2.0-alpha.e6d3dacb":{"name":"primer-popover","version":"0.2.0-alpha.e6d3dacb","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.e6d3dacb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4a9a0f869e633575beb445f9a672a22def007f02","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.e6d3dacb.tgz","fileCount":9,"integrity":"sha512-BSYedUfWENQ7rFrLam50jp584j+F3FCL6tYRvasGA8JKvF6URqaDrngH5TZNpd7TxnnIpjRsB/Ji/nX8irj3KQ==","signatures":[{"sig":"MEQCIDq/t1U+JNU9jpwxL7E1UZ1691G8ghokHL7HnaV7/J0PAiAe5il3SU9qKHqntGCqQ0PhVHILZH7r3R7r1dz4S9Uelw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSkIxCRA9TVsSAnZWagAAg7AP/2c79Iq9uYdmqdjZh2xP\niZPUwhdOz1gDfbOvzGPIq9X8H1rHl0vj2ZaovakfWKqNQ/eVa/EcUup8eQiq\niZXBt+6vIRg3toVfwlODI/YYasJ9RL4K3KVnKlyHAGf1wzQWkxjkx9fY9Okm\n2TyZ77UC2FoiwL+XoxceAQwRXGaUe0KCWMEtwRi6HqpB0443vag9pxA3WYjZ\n/SIQqGORjWwq7y78Wrey7WuDxh/uG4Zwum3T4l8ZQYhFSFq6ZkqQKDXblpqS\nWfGpQwpjq1fDW9CfvoYP/LwHObQVlWdJufra69qiJ9ENFCCAdgW+VyqRInFb\nvK7L2qLl2eIhrLlRP6pAJSqyZ0GsNpO1SswNX01wQLJ4O3Boj+B9wOL69SyH\nnJFDfE7t6C5vjB0MPvKY1JIn0njKfqLiNNaoSUC8mKmfV3KGERBapohaH+H/\nXrlZVhoK7z1M4sl9pautmJgsFed6oKvjJDT70blH/9vSLKbOl0ZbQNlr05l2\nwER1fEFcrXPTYplJkHXBUVSiygdZ/ymF7u+eJ551xZAsebqWcuSNzM/0VsM0\nDQ0tma8q8PD6Cs1wKoa6Cp7goSzRrZ1sPMGfDWL/GB902b24gnks7BE2K6dE\nr9yJh7+Kx2BDt7sQYuvuTY0+vCTzHFoNxH8DH3ahdV/RDVKO53aQhEzEUa/x\nc0ZC\r\n=bdjo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e6d3dacb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.e6d3dacb_1548370481190_0.8723075573776193","host":"s3://npm-registry-packages"}},"0.2.0-alpha.618b7b78":{"name":"primer-popover","version":"0.2.0-alpha.618b7b78","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.618b7b78","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"65e7d8b5cbfa9989a56808e665691d898fc66d97","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.618b7b78.tgz","fileCount":9,"integrity":"sha512-Irgo41WmVoErrWRlnp93SGwjEokxY/xU54mQe5WGB1tbw1Ogm3xE1vXZyzR+76y1uEjvXrQ5H3CQjcK/xL9BjA==","signatures":[{"sig":"MEUCIH/zzpajnAex9UjVvVRWovkcvwL6mDbfGKRPLMLdKU46AiEAiJAczzyo+qoBYvRfPXBiuzfUFFw3Q+RCt9Cr7czQzyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSmU+CRA9TVsSAnZWagAAmFMP/iSNVoH2PZeT6RYKF+2U\n3+TJcSOu0MFuypB9MDDeRgs1ZgtLR5jc15R+OIN+fC696QO38uzHLNV40Zf3\ng6DkI4c2P6jtVEP3pWisA+gNLSom0i1o728+Ggch5E+C8sn4b025PImom5kK\nn30AfNqRAS4TVve9M9A2UrgfVf5HeIzH1RdyOEKY4dncKcWrnJZ4zxmeBICW\n31G1RoJbe+/2ySXGcgDe6iDGCAJ0x8iNMkz7JV2ZU/6MiCS8QaWalwzuOH6N\nqMzrC6WaQL/SrzetllqiJfbdX0ltjZeH2Or/bYhg+19DFCSurB7qsJ2c7fVu\nTaOPgZdJVegf1Jihl03v3HK94Ck6Gf+ibBVcPZXJanlB5sHK6vPukOUkHbER\nyBrZDpvySrdgRQ1G7KseoShVnsyvfmgcmiUt/5/f4oN43aWWz/FOqFp8S5zW\nP2ON/h1OxDyhNaYQrErKAhexsNiidNYIOxGTfldJxU5p4aiRHk7Ks7jdKDTL\ngrr2KXxBE1zTRS3tlNMDFRY73F7Xb3T0/46NOVv0CpKsi2cSPhy3ga+1Jc6Z\nt84Vx/F9S0VFv4HKnIggR15B94vrg4R10rXq3fMt5fgO+agrBY+ugqc9R/Dx\nmfbiWqhhfA+4mlwGidGm1/brN5WR9DK93Wr4IBHp5U1n870W3O1c8wnEsYsr\nokXx\r\n=P+XJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.618b7b78"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.618b7b78_1548379453619_0.8005262996216314","host":"s3://npm-registry-packages"}},"0.2.0-alpha.24b4159c":{"name":"primer-popover","version":"0.2.0-alpha.24b4159c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.24b4159c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dc37c9baf9f304830b4e7fb698a649b499761407","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.24b4159c.tgz","fileCount":9,"integrity":"sha512-MTmWcf5nylAmQCrB8mbxpu245A2+0tNrAUWsD15NWh90S0uFxbOMgO4zvxQX0cct1dw65a2Oqf0EAeBI1NG+aw==","signatures":[{"sig":"MEUCIEFTtKHMoWXaYIGakbI6kxae8NME1Vl+Tg3IK9+AkKPJAiEArB5AInC3pAbVhv2JQGrf9h+84HqPncZrRYB3T6A86oI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS2oQCRA9TVsSAnZWagAAnTsP/ivG7SDVecnLFYKFrBbb\n+o/GT3+ZI059IjiG7U0MQISQOQNzVNgR+eqS9s49U3pEwDRIo+CHQaKhip2P\nj2KiBeeyCzhJF56h/FkBmEskR9t+d1C9Kyj2v/hKymbf6hQSRl2FYDxYdcD0\nIvGEXf+OaziclYw1NOvQq5ka7x2AgjqX2b4O5OGz3aV0MOClhj9Qdm4UfZVX\nB3N0UYwcJbq0GaXzyd2vhSZqFA/LJ75OaYfZsak0XwTuyl/UHJHKuhDHloDI\n56dvMkT6v1LPoMtwsxmzXSxU5dTbHuj62F0J4jbNBeNKIqiXAZLBcdPqLuiV\nyixRXAaAvDOhcB9VE52NULHv/SvPDyOqTURQWau0KdpifvMpYSKcKxIBJWe6\nWTsZWVUfKOiKxKcD2M8P2v/QdI7TVV8X3RBmCpVOxfMFsf3Vsw6rzLkv90EV\nYbtdR9JMzcfbq8jbHZUbUHMW4LD0rJW9cKpVTkoOCb9uuAZgHWdVSzQwNLi0\n84mSdHcOlJTDJySk4N1QXOTlFcqa1IbSLgcnlaVZKh6XJAK0MccZ7BkJxgrd\nAZMOxl90OPdh+2w/XpZTpizU0UBTce6BajpdTydJFt265tOIJ2vZ1F1g5EZG\nC5rnpo3Wjng0+RKO31/4XGs1qZ5k6nuGbj3l8pCJLAkQcpUEwAhrovgJqk/N\neSjb\r\n=R1k7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.24b4159c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.24b4159c_1548446223864_0.8163199879906322","host":"s3://npm-registry-packages"}},"0.2.0-alpha.645f5f82":{"name":"primer-popover","version":"0.2.0-alpha.645f5f82","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.645f5f82","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cbc80438a44672632a8420957b463c1d9f30c5ed","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.645f5f82.tgz","fileCount":9,"integrity":"sha512-d5z4GxzR63bkA3ScGhzCSy5G1+YrIozbR70I7tYmi4M3H/XrCfALiBopU7wCCO4fWoY1TuWo/7wfFoO+O844Lg==","signatures":[{"sig":"MEYCIQDIFZKwzDvLUxxWNyoH7ETRkpZrXuRgY/oVFqZcQWO4TQIhAK1FnJn1Uf1bkzeF6Og6X0wfyMXjWd2RM30yUB5zIhzq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4HhCRA9TVsSAnZWagAAgPMP+wYB2q4bpK34i/kGXYIC\nd6LefFPZhBNtJI25+1K+7tC8/sBesmS8p/2ZU9FZbbrOD4Ylnhf/uSoqmI30\ndH7PP4TTfJ0N9nsaZ71MeK3L/wEv8AiM9p5YWmlqrVcDasjxyjJfRk0ooKIf\nrsCvafo4JF0AFwUDpDXw/oZ7cBwPIVRF5rMwW220VrrAJ1AG9okRS2v8pRfW\nPq+s03pZYGSLVKqytGdzaVlpxb0rHZbQxQtNaOMNMb7JZK0AAqvAfepArEiH\ncMsMHyq141kFuVuafgytPcLlrk0Ts6/8Bvp8kxkRxrV5l7B1I/D+5i38bho6\nEq/LC89BwqvLcifQrHz0p1p0kJNo81DPRwtWcfHXN1XirGm2Ht9aJ/Of15yp\nj0xDZ/fDctpGNIYXvmXVEFy//+EL6dZnn/b6MkJC8vR0fZVZo67Y4e4pPV5i\nW0hUHJAhGVxQEz6eti2tSryCQXnWbdCfkAwAXSA/ToZmLgoIHnopA3tPcOKb\n20HhkoUNCo7k1SbnmXHPiC9Kh8CnfTCABrLDmxD6W+R3Ypo0fXjhEfvPYIpB\nMWREXUlsYyUK/w1kH/1HWtzhcYLe2NO6ErmVuyYTRinnulhrkQX3+YTrRTII\nS8L7+CzQ7OIJgT3Aq7bqulZ+cDWz9HQxufvFW2A7b2qmzPm4Y5xLInDUmJHd\npW5d\r\n=qhKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.645f5f82"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.645f5f82_1548452320642_0.6139965962663503","host":"s3://npm-registry-packages"}},"0.2.0-alpha.10e3b361":{"name":"primer-popover","version":"0.2.0-alpha.10e3b361","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.10e3b361","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a0128d945644777a26b23f16d2dde957191dfd26","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.10e3b361.tgz","fileCount":9,"integrity":"sha512-j5KY3vQH1/3xEZAvrZcvymAwzc1QCnjuBDCxiReD237nNvHf8qbkYU9eDq3wcIplC6HyEMcHDTLimNCBPZkWxw==","signatures":[{"sig":"MEYCIQCvrgtamx8Bguh60MBdsomMnjxg+dJwWPs4kzpVeEg1bQIhANXjm1HcvlJq24XH0lOkiEmiXe5cm8/yA2FTfrtfBLlO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4SICRA9TVsSAnZWagAAC04P/iFcSnSJvUzCwjtbI8mJ\nEgWsMdGDq8AQecVkYG/MYsj0bvdZDHp2D3xZCMmzumLn0e/uhq/bOXGEUXnG\n/5VxRzNYuwOHFMqW/GSycuBufL6wCMGkQRt/lok6qVhMPSmyjG4d8SYTtwry\nLoDMw6+ohoAI/Bznm+lmu47GL2i9V5in0nuZ88QG5uhGpcZkW7wPW5Mq0t+H\n2paYJdLxrqWgbBEke6pLqNFEZMKpBmx20X1pGOTCejv2HMihzaS3ikfkG3z5\nGNSkhRfelJcQ2Guy7ge2Y051tVeoqRchxBA/ESxPbg6u74wX+iiWQbE1R2Id\nrIoyVKSuBWohqJVUTHyT/4iUsty39V7eCYmLQDErzaLBNHsbAd7pnnjiMsyn\nhm2tvcAjkAHQs7ASWQOHBfp3VG88hF7PEpVPx5+TFGqSuFyrcnaLm31sAiK2\nU9hwQzUEpdwS32sgBMX6G63SQf9jbpcSj9MWpTsNkYXViSPi2OjbETVW5G2r\nZQ9wv5fZ8p9VjYefyd3pY8AfAu9iC1I+sXXgRWw20rL9eM96JP5sXcHGhTud\nyM2I5VRkS9hsVbwV1vrrnGbs/suRTc3RaV8wNZOlfxoBb8L4rzE/MjcHvvql\niuxwVLvASOpI4XOK+vTwroXFAqbIvS6FZy+ttB8EonW2+dbQS6uRk5uWBGbl\nP31c\r\n=yYzG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.10e3b361"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.10e3b361_1548453000113_0.5483308773926723","host":"s3://npm-registry-packages"}},"0.2.0-alpha.b78e8ab3":{"name":"primer-popover","version":"0.2.0-alpha.b78e8ab3","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.b78e8ab3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ad3b51603d1ef6607ec11d30d273baf812b148e4","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.b78e8ab3.tgz","fileCount":9,"integrity":"sha512-9hI7Gch+phjecOme9ecwqMUkzT545GOrfOwZK5kvmQO6k7NB0NfRfU8aOXnBKzYwEj4mvPfx6fjp6abr5cd4Gw==","signatures":[{"sig":"MEUCIF2ndJrFJQN1V6VKBCzVoTvOltJEYY7nrMv+DzGJ7evkAiEAynVxI6B3H+57QdZ0Dyrh7svFi8UJ8Yl6RbIz0zJH1Ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4ioCRA9TVsSAnZWagAAsYsP/3D5w3Dnq0oI9shoMlBk\nLedbbfjOSJ3BBA9ebSuFVDQYIeUfJ1VQfn3/dxzKheNp9hWTx5eBCIbFPRBx\nlWaTSR+bolLH/tzqNFMm+MCuTdTAwrsdBmqDBLmq3GLtfwe5rrUu3dOYLQdj\n1ihunMXREpXw4WJ2xgYc+2qjPJMp1zPxD6FCgZmZtTCF6zHllVHqvaYU2Pl2\np7uwha9KA/0vjOVlF+V1+uLFpJ6SR5FQYUdkeRlxk9Zuc6E0jXLFABspN+dx\nPy8JbbBhG/+ZzWbgr+prJYpNn9pHp6NQ0a8NRfscMBopyVnj+8LYXCnSmEAv\nvA2PmbMwV6YANFiV11GXKp8AOv9gUlZBiZ4iJ7KR93bzaSKmBfqMtKiRCumf\nGrOFj0gxxdPGhfTzgeIM/eCVhI1tc3R0reks85A6b73UE2dohpEJa38WxjbU\nTr8ePmz6+sLN/sEottSMVKfjHYHR3/DV9Q5ggMQN4lq80t/hNPfB+8NW8Gda\nJrtj0l0VaoPNqw8YwROFuStP1c+bYvNcxCfJCOwSP38GLDIvIDi03c0TvZWA\n3qTLvdu/d6qtBu4JNRezkGAVy3JYL/veOHGnNjA3CbflNPz1mHGWeT0FNVgb\nXriZkQCRW6BmR2VvRZN7t1N9a5hojqbg4wsW3F44pF72+d80gvNyLHZLOWLM\nBAGY\r\n=etNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.b78e8ab3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.b78e8ab3_1548454055617_0.05291971350177427","host":"s3://npm-registry-packages"}},"0.2.0-alpha.eba8f309":{"name":"primer-popover","version":"0.2.0-alpha.eba8f309","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.eba8f309","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"61066221e8dd0481ee721dedf1c5b4326ae0c9fe","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.eba8f309.tgz","fileCount":9,"integrity":"sha512-2krLNjNe7g8Oemg1zd5fQHoMjulQWDFlxnoo7+to1MQK4+NJvBRnSCAsjXWQECMO0Kkih8ensrt7uzKK0xeyxQ==","signatures":[{"sig":"MEQCIGiZ3q2biVG8jkH7ykQdpmgMPEuE8PnM6ziOiszdniJwAiA+FDO2ZIDBfAUKiCSyBMbkfYUMQhzF2iqS79+XQPalkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4sTCRA9TVsSAnZWagAAYQEP/AladjuKSZ46hVH02Sso\noiWKxXpu5vCup0KpJJecUk0EFmcXLyxOSJiNQaiihXb54XOcW4lEpvin4IZm\noiex2lyQM2s3DzmaRU4jU4UkCseoEupxjEUOcCBggsed/rfELSk560I5GuVT\nKsWksFLvS2C46Edx0FZbhMbO7qH3C8DITlFpAxFbEy1w2y5R07jwicDiPmzd\n41UVVQ8vcKbLIogwy2r6ZkXCxmGpSWZY4TAuOXUDnyYIq7bqcZdjJyf89tZV\n6eGjSsvO+LhA3g58SlH49ywFZCmGK50J1a+2sIx6yb/nZhjQohdY4dWB1ndi\nFi6GbK9e2+Rw7WWpTdye+A0RwAXMXFISHzgWWI/ADTtK6pcijaAmxn1LtAvv\ncx1dZEnSEOYPfzpEfIeHruXnisu7UJZ1vvEqLh3cdwwXPUwXPRaMZghPIkZn\neIEcyddp5M2jJMQzln4cBAwUJCEsn7MonuxQ/o1ja1FgbKvMyFVvzSfoeIkS\n1wFuiLC5/L0Ro48ie90ZJBu+lKE60Xr8dJQ9U2aiQkj3pFJGg3JjS2kIXXY1\nSzhtUTfGaWuQpVaAeXN1VuKMpVdfTeBgLI8dxAllfn229hf6UHxrKYeXDFWc\nHrT/GtOyk3X99w9m2co847Dxbv8AgJv/fCBXIfKPnw2y64DrbJS6m4KUv8n5\n/yMv\r\n=zIdR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.eba8f309"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.eba8f309_1548454675276_0.8867434769707567","host":"s3://npm-registry-packages"}},"0.2.0-alpha.a75d1fb5":{"name":"primer-popover","version":"0.2.0-alpha.a75d1fb5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.a75d1fb5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f95cc660c343b23f83d263e5289704f2589eec4f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.a75d1fb5.tgz","fileCount":9,"integrity":"sha512-3Frq+TTICIfXQAYTrlaeBxTzizeIr8+wmTRsAIn1RTT+f6oCcULN0podksTkzZlgCzSVcEl2dYZ9fgD8I4GOgg==","signatures":[{"sig":"MEUCIB44gmxMdbl7mkenFku7JdU4fTDLiYVpYWoLZB05qjn3AiEAp9n4mEN7P532mGWoD9VNjFxu2byzEIKJR+EHRKDIIwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5bKCRA9TVsSAnZWagAAjw4P/jDTznqRF0KvUFRCef41\nMKHiEEP0raqTiqfhNtA4d4kQ8Jl8ZN2QnRAxTpNh1S68qyuXjdJ1hmdlXITv\nviHuCKRAgfP+PGVxzIX0gqq/yOJbK3rppdrtdvWDyyscJuozvU0I/w0RHsDQ\n4XeGQasUsotvZBvfgfWhRIKtBXbLSwBOdv/gaoYVDfCnLEewxtsHUkuoJZBK\n/58WhAxc7fEcHFP5Ptmfej80ELUVrum6tAnBQoSMb6Dm4aYCK/wasQVVN2I0\ny1Y6eJ1dhSWJlF1AmfI3SEZWOwVzH+AkUb5JVi+Vp+rsMSkqAeN6H2U/Yx4q\nn+KNIcxJPJVlYOBXYXmgPjkUCkxtUebnLn1bMQ9Ks9n+hZCnTUAl+XzBoVDG\n3/zYh/jWH4zjusUEzXMAyvlP0yF8NNB1DFvcV5uoGSDgpK5Gda9WeeEzjxPo\nyiQ9z8ern06Pwzae76J7/VvHjOz28QgrtJTHTsamFzkfbvDy5zjugdFm3WxS\nAf8mMhoNQum1xSkh8KgAQOWMiyTDWqIg/x8d1YxMK/YLwlLZUMdA5uLhFlEJ\n9+qsRYrV2LFIwDQ9oYrVt/kTUq916Sc/xfMlN63oZqhubunyp4SLOtNA//DE\nsO1ULSIb1xbDMUxymIJnpZj1dKMGmbCc/3PbaQosYUi68UwKS9b+XuXJz3Xs\n+Y+i\r\n=xLtq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a75d1fb5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.a75d1fb5_1548457673871_0.9645879644334703","host":"s3://npm-registry-packages"}},"0.2.0-alpha.78600794":{"name":"primer-popover","version":"0.2.0-alpha.78600794","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.78600794","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"404c60619b65c050cb15cebeb32fa357cdd26393","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.78600794.tgz","fileCount":9,"integrity":"sha512-AAdGSA8yMSPw5ThbBB/8gh4kleRU+EDZWbBK/pRUGnWBrP3MSYIv46gcE23Z9AFcCoxxDGDvcod9nNbyYX3Ibw==","signatures":[{"sig":"MEQCIHHEHPLhdh9k2YYbqVV1Dxg1nhtJih1UJC3svyUjjaPEAiAU1aqIrsdrAFaeyuRTw7o2nQ1yx/huxG26AUZRT1nX7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5dMCRA9TVsSAnZWagAAxgAP/2bAaTBCeVihE8CP6sMr\nsu6cDEOB+8upDCWrwlcDAskTRKY2BeT9ulO7pIc322WGOMqRu6J9v0lCRLzE\nANMNGwiau5PmgNVLagjxULjZzhFLJeakY6SecQRE2zqvDgiqnsJOi5UlzgLS\nzqMRW2Cpcuoou0eVNG5BxIwiqeuOSGwAREd+7G1O+oJtMt2cmdHnqlw1F47S\nsQnSn8f0FMQGfm0tqwkG98/HhvEDKRCYv6W8DKT1DRBIXXjL+YDew07F/xz7\nQaAoED/L34w5k84w6uYjRukGpIrlKUK9GZibH6GWcjhBuY8Sb4qi4YEgiE+K\nc+XgvIB3uJNvlEqFqXjHlOKHC0g9KsDX0BxiOnDl+sGdxvXaeCqK2ahcUP2M\ncfN36t5M+OEQ/U0YnHkhQBEV9YxpQQRxX2Xd8BMjxvayef2kfId2OW/3Vt9t\nBO1bWQKYXlgW0YsdsTXv5DwDScQ1N+T7pIoi6hsuNZw2bqu8eqMlo9OhbUqA\nysnFs9Yhy1ybCEaNEx/S9RAm0nycpsMrOvLYtxxDDi9NI1flFAo9AvhORKb9\n9x87ZrFPg/+xMQ4WJkKmaOPzKksi8xyBG/rGvsKOqReTNEkReuDolsZHgAHC\nHecrmU0PVUqiubNgk9ANFFUFP0otqJgozGbXukGIS4YvDIL4iS5M1xuBj3wS\nvA5D\r\n=5UbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.78600794"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.78600794_1548457803474_0.26663919609782916","host":"s3://npm-registry-packages"}},"0.2.0-alpha.55f783ab":{"name":"primer-popover","version":"0.2.0-alpha.55f783ab","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@0.2.0-alpha.55f783ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"69e011757a90b904dd1ad1f7ea2434e1e674a787","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-0.2.0-alpha.55f783ab.tgz","fileCount":9,"integrity":"sha512-zQIW9ESguIJl9vJnIAcH+vpfYWb3wqaeYaS2l9trEIcrXy5Rh2GP5lXXiAHvr3reqtZMyLZPey5y60lHHWuAng==","signatures":[{"sig":"MEUCIQD45Ghb+K6aBx1yHP7wpVGlXmtaz8KuocL9GRO/eCoSmwIgQNoOuFvk+rNwn2XcsHyoCZOwnRfT4CGDgEdAD6zvrZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5oUCRA9TVsSAnZWagAAr/IP/2rhQZK84IjO9SjPl9Od\nRJY5FfzsfDluiUDsgfIczsmnwV+uRJliPF1DZ2rTZT1zpPsPSLNtU3df1ttA\nO2xndYzVacLe8aCTfHfhRkP+tXwFWzdWaDnmOi3o3KdvRKrHyggKUMYRxLBZ\nfkkp+WI/Ti/c/fdB5YPlLrRmOKSkQwK5ACLlj15EBgPSCWbDuGnh6LVHkIJo\ne9p1V4jrYdWH8xxQ9yzit/PNc7/38Smdyh6+OGTb8H+DlouHmHZdThCRlbjr\nOjaIRRl0rp3GyX3o7kslCfhYqw0O5QhTOuxKXfBHX1+KDBdPsPxRdDwNdJD3\nZr+QyRbROBzyuehGtwsC0VegVU/lu3hvLOZT1nvq2/lp9RtCuX71Gt/sm4OC\nbga8jWa2nuP79bhmI/t7wUSByDHZxBPlWPb5C0LjKpOJCM+jZnqPfcPJW0+R\nTtBozlb9x8iVfQiIip4Xb7y9efoHIa9/+hgwLwPgfcALkb6dkMbBVFgBv9Go\nxjTSwzbLPT4ogMDgBcm4AmurDAv9gHR493oGtoOP0juQtoWvKzbsAHUt+BaT\n2eNKNKlJhIUGRxn1Z9PCi6M+RWhuPp0u6IHkk+cP/4acEZLkh4Ge3LHhNa30\naiS/je/ZPsOWAhUfWELsHRSUhpg4nUaOt/0Pja1R6i6Xbg/3WXF60xguuDHS\n4mB9\r\n=ypLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.55f783ab"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_0.2.0-alpha.55f783ab_1548458515777_0.07345232754500586","host":"s3://npm-registry-packages"}},"1.1.0-alpha.dee1eb40":{"name":"primer-popover","version":"1.1.0-alpha.dee1eb40","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.dee1eb40","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3f3536dde9bdc55c0cbba8c354dcd0d0b7fbabc6","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.dee1eb40.tgz","fileCount":9,"integrity":"sha512-vfZttXbbDabML2bqWohVjseeFBqskmADw/opq2wtColJTWFT/s+ycGLOzviQHA6MlvHkNFY/S9B9yXlZWwUohQ==","signatures":[{"sig":"MEYCIQC18im9uMZf7jbHTSiMjzDXOA9ROIv6lITcS/C198FhYwIhAJnEvVg0UQrQwAyA3eAHOnUFPINQUgUaU8OijuogR/Mh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5seCRA9TVsSAnZWagAA9Z0P/0ndYHHlUF2TiwCjC3pv\n1rAprUpw4+OnYUp/lMrnmcLBTxQvPHwKyF48AsoaUjVQme8tSlH74bMSMZmE\nUrWoYMaf03ZgcRXGvpmc0h6v2Uk3gQN+snesUuMJTMW5mzERt47UG2xqP+dY\nJPKzDCNvijbZhxTrzBKpT9RzrP9XW3NMBkN5cZI2ri81qmovcZiZ/7A+BbpO\niSm96MP/4e6bwX+WRYqFqq02Q/cLrqxN9bJeNhlidhJP8hxy7thynftXRUIe\nT1yx3BhnbkyyRHWCoS7d6LyBSkRIjWm0oHrkQLBw0nZugXGcDaSg85ZTFwzV\na2JBmDLGj8vBHycOtu9Qe4nvIjd3m4p0AZr3uWZWbCnsqGACQ5FrzGnhqBly\nldCOGIfmIYPvL9W05KLhJB9hArKxU43mN+Ds1NKeg64WTNRONDqznt8ksGjn\nS3rBEdJQst6y/TxtgMlGpFhA2JTzhZFfJulyjwGhBorJy/UejVtG1Up0+/C8\no0+HrSCkCxYRTevMIYf76CY4mIz3w6frgvmmmv8vWbdEkg+9a9I/yUX+umSX\n7BKrJcVuQR7wxdz/83+RYJ9JK2+kCbQ0N/zkbVeSGCck64+MOnLdmyUa8PZv\nflZFVnYIQnnq7VlJZHEEhzcGI1RUf2qXdpLhg0FxS51JfuNEpZC+qH0xRKwa\nFykQ\r\n=zl+x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.dee1eb40"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.dee1eb40_1548458781468_0.20102063190365893","host":"s3://npm-registry-packages"}},"1.1.0-alpha.82c06bb2":{"name":"primer-popover","version":"1.1.0-alpha.82c06bb2","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.82c06bb2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85f856671ba611cedf27184e7bddce070c33ceed","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.82c06bb2.tgz","fileCount":9,"integrity":"sha512-nQPPG0cvoKHDY+GQIXJnwfv2Thf12kD0ZoJ/3qfDSbm7OjXKUSxhTo9HdWjrSmuZ/2GAN8ygaNYe/TB3JyYDyg==","signatures":[{"sig":"MEYCIQDYB2Yoat9JnuYSXUJf5NhUUnu1hhau/CHjQOYhoNB30AIhAL/57N80I5kzbAzTyDfPujff3eevRnCNX4/tvv6R41wJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS6B4CRA9TVsSAnZWagAAR20P/3cHTlinK6MmWB2vgklE\nRXoH9BaQNvG3DEmZJ6yrz4LL+C7KzqCNBzESrF9RaeEewm0hKBM5uxSN6f2/\njap586W+utciUDnigNbWIjb12waV5rXz/b1NXBsdG5xY+CGesJ1+6dTPKTi2\nRiAwG4v7XejOQcJKZzWAwwQQsVBN2IcqEOGFlt5oaEjsDJkcRpAu7naxJaMR\n+LD9oU60RcFB4ahPI8O48OrEjn+AUjdxv5YKrT/jVHeQRQXS2KxAH4ys9Tax\nWa5cxoUAbVjas9xEo98md4Yo2Lq8Mf9P5jeox24kpm3Iy+ivHqGDNSFHZMs5\nqsey0mJA7PnwWSpP3QbhuPFPo6S3hdd3J+Tdl/GK2/OHwZQZxMYjtNaoR5v1\nsS9ZWQOM4J2C2qJRC1czUycF/+TFB3CkiKOnAAQ88l1+5Hqvb/lnTbhpuYN8\nB/PK8s9b7sLug2Fv7J99qkvYCpOgCz6+TmllE+UPn0NrqcTRPHM2FG1rqZ5E\n5jMQQEp9LyDER3mO884oaAj9ONDgaOUiNG7+aXWOY4mIRMy3Tmp9ni0v4b+H\nAB+gfBUM8zIOU4gYUqa2Hb7mI9BmmWrieyoI+LKIDCudO32QW8YDw8chJnMc\nvClGSkvLJrpj2eOgXMtlHGEu/scVvNT6NCWmPFZ6xQib3Kx2ZQw0O2DVAeju\n2tME\r\n=jHaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.82c06bb2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.82c06bb2_1548460151909_0.5368630590991237","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"primer-popover","version":"1.0.0","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.0.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5fbb9ad77e119b855747b77548fb14366fe22934","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.0.0.tgz","fileCount":9,"integrity":"sha512-0YDHOOVN+uqGledMuoF5oruZEGdEBt7eQCId1NrUQJ33rOsVRKCiK73/awg3v9/ZvjTCXgJb9vo+BO/sa3jHAQ==","signatures":[{"sig":"MEQCIHEU0mOFSSmTh63I1cCWLbJmP/9z0kFS0UXxJ7QJJGaAAiBJRMO6DBH3BKC5p0wsRABNHBYvbxCVfkzeVRSXEaK2mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh23K4CRA9TVsSAnZWagAAeeUP/2bmcUvYPK6zqDVrZhqG\nRYsXBr9EdxsRCT13beAmUgJWwIfDRfDBUtrxSHSXBN3TuL6m0Nx7V8o9ub5j\n0Xz+bsESeE7WpvMwpGZBee7Wr8QlY7N+IE3eaj2k45fHAGQNs9Fdd6bSzjV1\nzKI/juCm5P69rgjtKsDs1Rq1vZX80ng4Wi7yc+uJnpExCXXMdleqvIpwN7eR\nglMnsFJa4L9XEz4O3cgieR6JpnsGXx+ujDDFlSNRqktadhQvBAvRdWtTHgGF\n+OEvDokFIq9y6uwcMIOl6cw+aN72DzeukY+pJnveg6UypPshWlSBAtMGlEbj\nwPzGvGaBFrPRv2TBLjshYkVzf9HlqgG2RaWpEHOnKYqK+Rtyiw2jdCwS8oDs\nrkGhPvaNau1ZCN+NipkgL5WsSvU5ZO0GxlpHHaHQsHi2Jw43nWCw6FQGvRSx\nHo1VwEw+AIBXg5x/jyngBxc9YxXDBSApRuJgHSGKm/eEKkOxsB69ySVtbOix\nxHlzlm1+3/YZfbmD3uOrf7Qri0lKwDABAPhwshvCw36DMXiMKhAY0LXtdhQS\nMhIhsBshpMF13UQojfOxLDXp96rIGV92MCgXXEjLcgypH6oXPCJGKGEjm/dR\nVMEuOaneqS8B/zcN0Y0vVU7gkfpoALfjR4BuHdc8SXydG3COINN1RqryiNFQ\ndN77\r\n=DgPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.0.0_1548460840640_0.8366785685892355","host":"s3://npm-registry-packages"}},"1.1.0-alpha.e45cefe1":{"name":"primer-popover","version":"1.1.0-alpha.e45cefe1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.e45cefe1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"af7cc6023f5d8d980302adbd46474b826fe1ae75","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.e45cefe1.tgz","fileCount":9,"integrity":"sha512-NYGy7laZTJogJ3Xm7tUpBlhuwHkuw/GbP+SuYp1TefJ6t4D2R7b+9Z3vmxSTk8275Aam9yVar6PV3IVf+3E05g==","signatures":[{"sig":"MEUCICA7+WaHVQTMyxQQcecK85R80VbPUVyERz4iAK3ypoYCAiEA3htOVAXFTLArAp7GYqG6bQK0NQ2xzvzxC90KIN/K1Gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS6QnCRA9TVsSAnZWagAAJDwP/3KY0j1b9XnnSKBqoGx0\nThZhSc8tG7NdkmljwR2dn1NWkrSbNJF1PIQI+XAqfS2g2iqWAHaGWjc8UuXP\n56Xqm+I/nzkk33cIkuryfG/2c2JCBWyt/gIc+sgHsL64MAW/2pTp6qZOxi02\n26QDk2WaMQaKb6ySJk6wwQcpFlB7cBFy0NnZBZZfM9+1NZqFswwByStismnx\nmmDEk0+XtBlJ//DAqH4NYnUMlh30GJgGbTbSxiwWXVBP+5p+62SLb72gwIZ0\nBdBUSe1wOPdYcH5v85UtsYDQu5E9dJq+3cGCLL68Zl+H7AFLZsQkt7GnyQ+/\n42MK75hEYLfutAdtCcU+VDAM5B8fuoE8aHlI0qV/yON3jihU934ONRIKsvd4\n55srnQV0BFZrsYsZBHYLF8UjkAQu8wW/Ux0E1NysFPliYpg5V+482JBy1Jng\nMO1BQrdgrH6BVoPRmvnHDydUXribvYnn+Kg3EqOhm98Mhyy2CwO9IEvn2T9P\nur9PyLb1+P9i+iDiehIkTM8MMhKHxn+3eD7McX0v+6DE5HNyZzSr/qrdhWSk\nwjEzdHjbb/zmwq8/p95MOgNRiy4TIreR7Go8K1Gk2eML8q55ufjjyI2cnKft\nchmvv08MFvJ40lqN8KyiLWZ2jb9SIOJg4teADjwrwJFHta0geCzX7dVrwlX7\n9wDh\r\n=Z6tS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.e45cefe1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.e45cefe1_1548461094799_0.4495189152983128","host":"s3://npm-registry-packages"}},"1.1.0-alpha.658f95a6":{"name":"primer-popover","version":"1.1.0-alpha.658f95a6","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.658f95a6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"191ae3501d43a0575b1b65a3b256629741025d3a","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.658f95a6.tgz","fileCount":9,"integrity":"sha512-xaxt6b4QBRo9iaSEsUjnRMqO/lPEWapU6WjzTW+0+Cmj9BXphJylwOShay22KgW19wMiSqMXkDcFAY3oFbbtFw==","signatures":[{"sig":"MEUCIQDwy6VsHlbSwBRMpyQLXagVr63yVyNWhqvoZFglFuSwHgIgLO4Fk8YY4d6nAX8b/tIJP1fjT+FsEUoCVOx82HtR5aM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcT2bdCRA9TVsSAnZWagAAxBYP/jBaCgLF7JeyVXctIMFz\n67+vrsu1Ftt+2BDcORJQpaeOIlvAMnF5sOMh8OXuB1WDX5OfYJW6kSQKxgkf\nLY4opRtx5Y1GRGfUeH2Iegh2vC0z8JX5d6G61xdl6SHqaRHAg5u+Y8cTFGJ4\n/JZylO+GBoKiJHeOo+iTe812JNQ2Z/CmFuNouUPJ//rJbnDMmiUkQ+uZgHOk\n1m5OrLKV04LBTrOh9vSgfYQXvKsBkTMXvmN5njWZiDRJLTmJwxdgKSpxHRAe\nmCTnylHAzQZL8m3vwOF5pvToZ07jLrczYAqrWPzocskTVtw3AYQSwXA/ccRb\nxDYvZveva9gM/GDmSWYpBm8X7uj6CzHnLhmkCqFgr66c7khQS2KePRhIdrCs\nvBHusJ37lc6lnPU336rfqQjZNFPSLpBE3f2zIB4bbJYRA9scDnuutjFK+fv2\ni35LYuqUr15nxO1T1oruon/iHK841Nsj/IV/0XmuVSgtynIs3VAEa2ok8OOT\n8WK/3Gw4b2jzb4N7ruZT+UnwCSKSbSpcSgU0wEJ5d9K0TiWofEczwtxzA9IT\n21RfaKgtneSfis0nwpiWaM3evI+7cUxhjmz+CoZ1Fh46S/W+XHyH67lSnvHu\nKRIhzYi15TFhXh2dkFxe4OA6b+emrhWjEvv3fmHS3RHt4SPZzvilqwyDggnn\nzNaE\r\n=kZkS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.658f95a6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.658f95a6_1548707549060_0.7222206124232384","host":"s3://npm-registry-packages"}},"1.1.0-alpha.12fdfce5":{"name":"primer-popover","version":"1.1.0-alpha.12fdfce5","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.12fdfce5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"291f5dfef147dcc24dc5cde089024d4757f77117","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.12fdfce5.tgz","fileCount":9,"integrity":"sha512-/p+s1nIsdVzd3OhL8FV6DXi1bh0IsZRC8kJ6hUCA9KuOoePm880RCoDKgxTcu/cR3VBKE/z7y7qK6enyrfmEeQ==","signatures":[{"sig":"MEUCIQDfjt0lSl8LnkDRs+Eqcvgc0Scm7FAbsBiuBEQRZKI2WgIgecbO5o+A4REcj8JM/+akK4vJgcYv4HE2aNSuIhFE/YU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcT6LyCRA9TVsSAnZWagAAY7EP/30Qk9brI1h9miYfAS0v\nxS+/WqOcb6euh4N/9AXeK7IjAPcUp3FmdOYC5l/mopbfexx4O0uuPLldaL2e\nz83zkkBcyyyiVZWxBz5sszPhIX8h4Ac/l6ZbcfHEOdnDbk9Thy4cVSzOjoXF\nPplo3hHdEJd2zSHn4Dkud0WZ0b8BdG73RBV+wcKtzYpAeFIyrkjmObV0RXWJ\n/2RL16AgorvfwDa4KqTIV8nZim8T0xYo/roA9MflXmO4szzPL+GY6wssYP66\nsA3COlD5AlMQv7lss6ZBfX1t3GqNwilZNzVEEKh5uJYswEHCqcbOZ9hWmC2r\nLFncN03VwiLIfCAq3u4TMXci1pVi0LuUUtGM0t6xtM4HCYyaYodtAFK5OIWb\nVsf7p148AbS1ZqmQOuh+0GfLKiOwI4xsJJAj89aBKw5t06UMs+d7RbaO7yS2\n+7C14XSwVAmND004gqczG1VDAU0bzd758c38ZukLjDyJ2dZW07zksUbU6NnK\nKTGMi7YUN9jbLC8PmrgdePHnf3513ki2OJUYCK0rA2piHokveZGSU7vcSdLC\n0fDq1OCQddz/BEnbzWq+AgKc/+82G0vTF9IvC+5cDIkcx6R86QrZbT2oVfJC\nrB21Gs7fIl5L74UrKm1tW3BbzF77gMCm5RxcCt+bt2ZUiQszmpBmGSLCA7AU\nLKol\r\n=gayn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.12fdfce5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.12fdfce5_1548722929787_0.6065936668527279","host":"s3://npm-registry-packages"}},"1.1.0-alpha.74cf4cd4":{"name":"primer-popover","version":"1.1.0-alpha.74cf4cd4","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.74cf4cd4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e85c421ea5c08509b2ed77d8801d302b2a55c35d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.74cf4cd4.tgz","fileCount":9,"integrity":"sha512-cf6DVEudOiypwDkFQqcDU7Sd/jsj/b1+ET71ZKi9TSrB18I9lgu0Qb+FeieCSDZqPr4twqjqqVCEreH7pehT3A==","signatures":[{"sig":"MEQCIEFcr4gWEoS0DZtTKErIB/lG+m3oPBXxDnHxctRaS9oEAiBNX7pIi4aMfXgp+KfAcVVlrElYdovmJitjA+aWRGaLdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcT9v1CRA9TVsSAnZWagAATqMP/03yIBswXz5b5hjVWEMY\neBlNG3rfkxLHGp/E1I1W4j6gof5SzKNae3zzVaW/cLyoHygpHGrpHlsa4NTC\nBYLruC9Iv8tQ0R8AyEEGmMe7xeQqeUXW3uLIku9ybOzwMfcixR4KbyjLX2ww\nkThX5CPWJ1365ljNmZ5FqOzYzDZcuCvIagECvYxlo9ZAElBvztPSxOXT+Zqp\nNLrYZA8ItLSP4lhrD8AJtmm3Yyc58ivskxQ2llFOAJbIlaMGQjnhoD7d4tiL\nU5cTsCCXfTl9EXVPQlX2gbUfPF8ybDueYpsYDJv9olihk+oLSzXaGGqws4G9\nvn3HAyGCxy5xFXjaved+Vdk70tnAoYxtd1ZCSOhbl9Wb8uZaJw1xvFxYJXB1\n4pww12fc8tbJQHD8A5E1SYVUHwICam6fnPsl2JPieVRm/9VqAbtX2ogD/Gvr\nUHy6lnhvsEpk0TQcglUDsZlLSAFWM6+YjnfJUJh0W1bxuARJXgSaROKXNdvn\nL1EB8CjFNBwIlmBJRhxS1UYSht3DeGJKsYs/jnRqqDf7eTCzAafiQ1NWaoyh\nP/jKjUiJztyYcR4b2yOh0xZG7p3arnH3A6uLxMyu/cNbxgUyIrbExjDRT1ey\nWjSPTvPU6ba9uklTnsWpAY/ouD19H2mRsSrUEnZgFvOupqasv1Y0+rC7eDyZ\nLWoy\r\n=i8l/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.74cf4cd4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.74cf4cd4_1548737525159_0.9783327428503541","host":"s3://npm-registry-packages"}},"1.1.0-alpha.0a57e1d1":{"name":"primer-popover","version":"1.1.0-alpha.0a57e1d1","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.0a57e1d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d772fc5357becbeb071829847a95e992403ecb11","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.0a57e1d1.tgz","fileCount":9,"integrity":"sha512-F98Hp3ubwZiHhSTwXnhVEvH7zCYbAyjvGAeZCwxcKcBC5OqlbBOjBzDvt5shb7HX3bCQkO+kguNKSE2dTXGcLA==","signatures":[{"sig":"MEUCIQDJ4Q6zB8ftdkhCEl6pvQncBkkphigQWvasqdLpbT7Y1wIgTEwmu4kf95RsDH4h6bLGckavu/TJINXQysZlpObfEzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUJsSCRA9TVsSAnZWagAA75EQAIsPulpvXq/L7VhYuFOQ\nOpFoRP5ZhhZmvfwswJI3+NWKFiwbdTiAwpKtQKXpnogF2ksioq8Vb8XEQURV\n7B0feVDH6fkeCNJudJmDD7kuMyA43No8ZCu9l07KIRgNJURsGbX0+OrwLMdO\nWGs8AOgvvKGyYhgmPHtxN+cMWKfyPtANtp3nCmPd6pbqgvjjyBaMPhSlwjKJ\nfFFWL7NunnwILiq6YosR+4m7eKsQ6lxPfJetKg0jrYvy5vnk7EU6fvyV2fwt\n33ryOw576XQ3IBTA4eKHaaQH+Ftca9gpPW1jZxs5p910ZxCHjlkF+3BL11PG\nhUTNA9pyo4wb9MP2N+1BfSbtu+z2PExxEft5hxUzFL9dRZ5rk3HY1KGI7seo\no+hjd1UO6PuMFEwGo1ur+ws+0kDCLDCAsfcpY4cz4YwSqKAq6ug6iE9Caa0i\nDIs2OUqyipIvodbNOnDmoUyoJsPBA0jyZ8mIBNqahh0ljdGG5xwBe0Jpsh0y\nQRR7Rkm3nSYxf6xs9+OcxxobtI+qR4v+rGE8VX7/W+h/JhCO8/6nNZn//Oxm\nMDoTF6IqIlKxLTXUsxPugBMQL7LW53gO7VKi5qGbPM+ln73vZeBffAPXhtG+\ne7hh+jSJ0a5aVC2UX/iUlWWRBF6R52yLxEXL2IpF/1K1AgKe129hSyQyumEr\nk93x\r\n=PwZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.0a57e1d1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.0a57e1d1_1548786449401_0.15232314516733525","host":"s3://npm-registry-packages"}},"1.1.0-alpha.94655d9d":{"name":"primer-popover","version":"1.1.0-alpha.94655d9d","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.94655d9d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dd2f47baa55e5a070bda3b709e1acae50d3a5600","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.94655d9d.tgz","fileCount":9,"integrity":"sha512-4nMb56G0ftUSuh9vvgurY4ewZjwMIZP10ZxeC8Ca7vYjfylhMnVz896iA5BZtHsoh0iNF1pxgZPXxa1Ihx2RXA==","signatures":[{"sig":"MEUCIFktgLCi8KmGo6/ARy/TEZgxqxWTmo9S8D10OeH1gUZFAiEAx1YwUBhx3LRPTFONw8y9vt2Z7XochGuNn1PGswxvHEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUJ7KCRA9TVsSAnZWagAAnXYP/2rWCb/5eDhWdshalpkz\n1H6nKOoxD5HVexaf9DiMWp6BNcg1sXODyCHIXewMY5d0mKpRA06ob4wx6whU\nnmUEMjPqM2Ew6tafOp1O/kfKDL0MT07s6g/ZhzKK7FbJ+1rrtNedbHqWjFxV\nvoY+VYszhQL3g6oVMihxIrSVT9oFnFo7+V93DSp87VyiOJ2k9SiXS50FW20G\nM9HSQ6baTHWe3i2ikHMUZ6CEFU/F2QcfEfkdtY2XAzVl4niH8cpPTXrLML27\nmtjgIDx8tYY4l+1H1vnNRS2M4znuPI4A8ldw+/q0U2dfjrcYZHYkzOXDZHnl\nZzDuUQQMD5MnRAGiaxJ2uNbq68v/mMfg/1Mwoc4XZNZtmwizhMQmzIy5UZs5\nGSuntrpxB0cD9qRG5Psto3f5DqzI6llD//vew4xQkDQMWA6BUD4fBPWaO7CA\nnlIshnmdgs5IixQ8DNwz9g8S84Q2tcx4OKotQ6Eker8nyWmm3xLtzSmz+OdY\nYCf09kcmwzBf8aRumf1USWH+l2bZEf2gBR3O9V0u76mmtb1TxfcgpzBOQPi/\nElQ8PAp+J27peHEAW1v052jKNFS/ng/qo59um72m/uK1wYe865Z3/CAu254v\nwd8intp3tJEHNHIvdXUI1c3VcITpww5ZdYaUnCiwUKoZ3OWK8MtcvNbQ9AQS\nrjhi\r\n=TayV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.94655d9d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.94655d9d_1548787401968_0.6005512842003091","host":"s3://npm-registry-packages"}},"1.1.0-alpha.8348e823":{"name":"primer-popover","version":"1.1.0-alpha.8348e823","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.8348e823","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"19a7dcc226586345ee419a2b9852516cdcbcdf46","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.8348e823.tgz","fileCount":9,"integrity":"sha512-wMsXcCnTqm/Jyip7uMrQBGoFvtOHns5fl7cz9Xiyqf1DfZIYCuUyAjw6520FsmyN2awdocHRM4Xt8Vc78tOoGA==","signatures":[{"sig":"MEYCIQDEDMgGMF4qt1Zf0020Y+er3AV2yhcv+d16EtxKmlMusgIhANWwu8zwfOvQ2zX0HdBFi+gdbLFPyVQzBwY2Ps08Ani3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUKOUCRA9TVsSAnZWagAARQsP/0ADUXMETvLme8Ul9zNl\nVCxKAdKhQif/3hybkrnOg6TcJ0GEAlEsnN+w0bVGl7H7g6GJ53Hbbk2HwdbK\nZW5qO2ATcGoXWSDOYoA3vzb/6DrjOdmYvwJaS5XKjbzURun6+fNyyweDtBpN\n2Ow9FJH/R8lKGVyZYD5CezR0Uq9nrWYM47VB+OdJ8ImO/MQquTCg0W7SN95J\nzFX2l6N9mlETXCa2IrAXvKtqn0/DybsVw5+tuNsEmmab9mx5tAns/1fu7/JB\nYuRrjpdMpHiRUMalSuMeWeVGm1FFH6kNAiVRCJh4tOABoythSKPVtEwR8qbw\n3jyJHZGJ/ECP1jNYy31nqk9yirfE3gbt8Src9kRvj71ExFotbK2ALhKJ+I/G\nAqo4PqFYnT9uqfAZpu4oMkea8UuOSSfIebmt7paMylgsJse7SbQxWgUkwLg9\nzCB2p1d8daDF6B+CmPqkMqIYguQFRHhfavbdgv4+uOzTYq7d/rSbUxdHryzn\nXfS6Kxn4HXgSe3TRa+z0YJlGGBb4SproBDYirkaAnQMvwGQn3kJmIQWP7p+z\nVbzKeBto1glSHgIPnch53sHMOY3uFOTs1+fhaSEAblYIl21bocvohOpKhlhV\nnlSy7dVehKVAEhpqzRyIx5sRr9ohQU6oibJy/ZGHKhZuGJoHjdL4dTFfPgVb\nYEj/\r\n=JiuP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.8348e823"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.8348e823_1548788627913_0.9477982392291575","host":"s3://npm-registry-packages"}},"1.1.0-alpha.748df56f":{"name":"primer-popover","version":"1.1.0-alpha.748df56f","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.748df56f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f6ac390c35d1021bacbc71d3ba7dddcc28856af9","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.748df56f.tgz","fileCount":9,"integrity":"sha512-MythyNBkg/RBD8AWyu4T0SLN1y8/4+tmvHU6tzWnFE2nqzUA69GT7IrcCS0Z4iKK2TE1bhsTGbL2ARY8wuZ25w==","signatures":[{"sig":"MEUCIQDL7YiKPlEXkwt45dBA9mqbp8wjfl13xgTCG/rJl/+2bwIgfAco7VgV2KLpXY50+gZSl3F/heXyezR3iE7pFRtlATo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUNoeCRA9TVsSAnZWagAAM80P/AmIXwKdWQ5aUwehLo7M\nJNztJMA7Ls82z5GGafWTxqdJXxpeU/4Qrvm3G4WGc7TRu7pL7cZPR0Ns9DIR\nZhWMnfFLcfDHbinWpXi8NGVa9j23f72pn6bPcaOMDOpqF7U28WhSJmk3hlF1\nzgdyi8iIOAi/ENEFr+zxVheCvEQgOEdl8/dCl6PhGw5s8EK1IMZbI8aI/YT0\n+PB22yEkJDD72F6UHKuUdVMMZkxXP6EgsrK72f6LXhom/2mEiiAHV73rBS8S\neeoexIbDFtewcOMf+Ak8+KMSs82/WVmcWXMAfVWu/3TRobwlLILjzs4nm1Af\ncYS3bIFT5dwKf3UXiRZhWunF4vuZ+sJLVblCRhpNp7S2vcPaHqHGgXDJ4exe\n/Pnp/yA2eE9xdECzdB3bUU8fCoCEQv6FbpfMbz+mNL4bMBhIzy3SYmt53xfI\n+J0EUk9uqiob6GJxzvFiy7FPu67OV/hhAoBxLP6IteJK40fJqmGxBJSxyMeX\n887feH0AomgIZOELcSF9qNIfbxVWniutxlEItZOJd3I7Rxy5StE73+ckEaGa\na6+E5RIB4Q2o3adhNe0UxEv0St++7cS5zsJrHFU/9Nm1yDatjHcd26a7M7Na\n5cXOCI3n51su3FXDvUqQ6DD89QzXp6qCRlsiW2sACL3AWg0qhxgp3iv5bBdM\nNj1b\r\n=R0GT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.748df56f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.748df56f_1548802590130_0.01787533020627441","host":"s3://npm-registry-packages"}},"1.1.0-alpha.d5a982e8":{"name":"primer-popover","version":"1.1.0-alpha.d5a982e8","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.d5a982e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e19dcf394bf78452bcc4011a55ffe85a93a36bc1","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.d5a982e8.tgz","fileCount":9,"integrity":"sha512-7Lb9E0u/SCgWDB5fWvSrQ+/gmpbzZ7+IPFYr7UVEwqq/U2t+cH/9TBuuzWwzfeBA8qIt+5OX8yvMKNF6/kpJHA==","signatures":[{"sig":"MEQCIHVy/RXkXZxqCiINoXzHkpLs4RrKVqPl1ySXwkGPKynIAiBGrApGIDUVdJsKEs8vZAlxlT3XWpbafxdzM1lJW0q4yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVLLmCRA9TVsSAnZWagAA00QP/jmViuaWW5LZ9viML44r\npTqVAHNuAxOztWhsy9RL1mQEwwd8UUrsrk3vQGDqktxySqiPad0DmtQEyOG0\nftQF0p4P/rls9WiYTINnGjHXQNr9FGBwlkjxAXkd2m+xlZLbUNeHb56uDyoa\n+yP+AE2GAU9/4nPGyPILKDwMyBogdcqvDT2eFgm08Ul3dTng1VqfmwGmnHUz\n259yn2Y62RAyT0bL2iHGwT6hssNxo2IDcezEp6gPJ6i2awxozWlLwL2X6PkP\nHDskC68mGmwhiRZnoDDMBZwxuzfmooasF+t+W9EeM+EsHN4zHyaqx/r2IzIM\nrmf8cNJQUzBmpr08DLLA7926WHBTaBKHGbPpNEs71jf3J95ATt+LxPakInj5\nfxu1G1BNse3yRFNio9zjMgfNKC5F3SLVMP/469shw+jHgvXFTWeQ2ZNwBYk8\nRS7Q3M2aWXQFQkZHskMI655jLq6MPshtrruzCy17g+OrYhJp7Fo23gaGCC/H\n+7TIfgKn3gzPYpJ09MTid71Jtw65vLqLt1uFGRvL+7kmZuNgD7s6I1Z0HD/g\nuy08nQ07yLpsef/XcMB7AruUia/qL2nnCx9DQ/0rQojQy8O5qL7MVl6C8D4O\n47e+QdBZkF2KuyvwbAJJAbmg+MU1ZrmjYp023g8OHSTjUiXb3xes171qNRqR\n2RfT\r\n=jLZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.d5a982e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.d5a982e8_1549054693610_0.46903723140306197","host":"s3://npm-registry-packages"}},"1.1.0-alpha.880aa354":{"name":"primer-popover","version":"1.1.0-alpha.880aa354","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.880aa354","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c9908b2e272362cf1be20e5b6f3478fe6de8f38","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.880aa354.tgz","fileCount":9,"integrity":"sha512-WZBtXX02Drl+YgYvYY8+Ly5r0yTjqIVQ78MlbLU7uKdQMv5W5zbtXRt3X+NTFHFrzEvkhOj01vow2ev7sKWMgw==","signatures":[{"sig":"MEQCICllffRNLVgf/nIc7cYWRzcn0fSMAPAJD27QTevrjtuAAiAlXs2jUlTY4UT05yS7Zar6b70Vx94wn1GT3uEbLx3CWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWKkTCRA9TVsSAnZWagAAfkgQAIParRmW67cYm+XmHGhV\n9jCjN6O0WyNs9UMIK8bM8npYDOrFMogeHzMnYFdaUKhs4H9Y1ONbU2jy//PK\nL8CG0fNo2o3PJixV2WXskCRO/mhGcOuplUnRs4n/cok24nHA1PSbIUCzQKhZ\nClUIrtAvlYBge7EPMIL6oce/x1DC0Q+ZsibgkzaV+EmU99vSsHESc3mueWYu\nkCQd5ERabxSweB0glaHJqyH+daeKX2UU0MS0YTJzuF7uVQ/3azMz3EmVH3GW\n4kIvzT+LYJBz5wWWdrEtH9y8/ToEPaedbAAqu0GXOz+raVtJWaMFvHmzpTvn\nZMTi+txThmAKMDU//SgkQcgAJ1m0vfR+iBKIT9WGJK3Bexa/BzdWxwrnAwhP\nsSvPO6FrUnE3Us/Yi1yl5pobivfy/ph2mB2tPoyuNUU6x070pjVLlnVDa/Nl\ndEL/jek6WBB5WUbXyLihHLPY1d2b7hoDaitZJ0hplSUYy7ILxPm7Xscvv1+A\nK/It20mR1md9dTswSrBbLY3hL+bJYI2bdiAUN/SXEZqd0jiNMsCOgTsNYVVi\nL50gYPd7Oil4mcdq8le3AfCHLDs2g2vxuIoTF5umphy3Ny/M2brB3MiX9YKJ\nJa/6Fc/0TtkIYOrv0M4fd6z3MZIJZb5Rw9z/arDe+rvK0VzP2F4vHoAfrcyO\nZVtR\r\n=q2Lo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.880aa354"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.880aa354_1549314323259_0.07275968605621297","host":"s3://npm-registry-packages"}},"1.1.0-alpha.0e97ea6c":{"name":"primer-popover","version":"1.1.0-alpha.0e97ea6c","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.0e97ea6c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1b776bf08fe08229a94260de012ec9843c72454d","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.0e97ea6c.tgz","fileCount":9,"integrity":"sha512-SpguU5FkDWacruwdQZb7+yt2iicKj+YM9kb0ZCdQnHmPTfFiM9tn0JxQK7Q9lNkggsy7uoYkyhDeBfQRoYY5iw==","signatures":[{"sig":"MEUCIQC4cUTS2XLIwiEJh3A+4+DNfTbGIMNDt2arQdXJSHpN+gIgbw+HNx+UBcRnCd2b2BZ+DektKIz74HAUZ9FFR6ZFAMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZG4HCRA9TVsSAnZWagAA50YP+wUpVGz0RfdOunGpPC9Z\nuIzHlevOcWhNIsesdDm0GS4VqZjcJn05F7UOwKm9P3DmSKzGl7owxtefupfT\nF1X/n9CPzFk9wC4y5TGYCEL5ELAqlERgwZY7Hb6iG5AjNptoEEnnbYsTIbqm\nJEJBewv3VfCFS0stYJrA/WQpgFbvI2tupCWX3OK+pSeHVg/GSJdvyqYUYFJf\nt/Nf/QCpbl6ttGxISL4Q3yInBDr1DSYlaKXVdt+IgXV/sVEr247IZG4dSegs\n2UONjD8/b+hK9mHxUHKcP3PreyfuZVXggkNej/Coyhc7fHinNms1WHB4xj2Z\nxUTBqb8slCf5dCP0zGli+ikLHfGTaue7Hgp5sXgk/ggaK8T6nmn/SfEneD58\n9mX1RVmOtxK+dmmHbJVunu59tsqtmjz6heY4+Ef1fUt0vFzLuypG0I9bji62\n1l8m6Xkf28ics+QXsd065l28R8/Yg6SZzEmPjEg4bqaN0lUKe7DyPvwT9M0a\nu1Y++QrWuhafEsPv5tJm/enwaUqf+TTROtK4SA8yegC+XwREugNRoMuNPeDH\nr9gvcLJOFPBvGaJydrWxfLFmX0qo3YAQdJrFL1QeDeY0f/OlHWkkEYnYnBxy\n5/R5+7WdmWo6gA9Dn2pQD2Th7dX3ltgpSnt45wg7RonKFTqIVhiHGP4rt+cO\nnyh1\r\n=SlNq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.0e97ea6c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.0e97ea6c_1550085639316_0.8456587162189739","host":"s3://npm-registry-packages"}},"1.1.0-alpha.df004242":{"name":"primer-popover","version":"1.1.0-alpha.df004242","keywords":["github","primer"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-popover@1.1.0-alpha.df004242","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e0b61dd4c69fe67af6ff074dd06797482742666f","tarball":"https://registry.npmjs.org/primer-popover/-/primer-popover-1.1.0-alpha.df004242.tgz","fileCount":9,"integrity":"sha512-21rI9uL8DhkFOt+sln81tHPqSSTWg7X+1cjVNrvyn/RrtuljMdKPxHxjzbUQut/u9JxElEHJDp7t8i3prsNJlg==","signatures":[{"sig":"MEYCIQDt3p8biOCL6DvD5TAhAAEoFvgcXT1F7ijfMdUHopQSgwIhAKzhHoDno0ANT8veVbneNweZaT6+GGfZSjQc0UleCiV5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZdO7CRA9TVsSAnZWagAANJcP/RDLnnHFDXGImD/kyrnB\nohUQyQxwO+CJIW3S/H+4mcKFiEqHrRV8nTuuboPFVRRJ3a8IJlPhte5rcryL\n3npGlATwzju9RDOTiAsLtwm08HF8DHnI3ZZje1QRpuLumdHkwhb6Ro0ledKU\nn96GSaKglCmfRxvSPw6UaeitX6k6M5EpVCPcb7snDsSdI+f6sccN8rr4s7SV\n+/wAu29Ug7mG263HLe6zOTuTD0WGnrt0kU+HrSEQyIwdvLEeuUIyMlAihObC\nHkS5VYj/H3ZLbfCBT1Te07u72hzmHs+P+okA8z/GborcJO6iadSSnn+iVJD7\nO7o5hK3gWes8MOX3Zck5GIVHxAzWN8k5YtYyMExGO/2gzmntUE+XwPbXAU9C\nb+8PhvbwW/HwnspJAtmTtkP3AypN5Zdo826qW/faLPpYjc8hn7D7OrO7YB66\np/tU+r/2vu3RfwcJp1/PQk1yuGOzryhFltZCbinVsxP/o+kZx5EinFk9BLfC\nBYUzl/0RBPXtbHF2+S14J07R7I4luIOqSOyKTNggCUcgNTXAvft/atU0Gs4F\nW8iY4hM7Cchj3oWNR5iOgInu52cNs4R++LymRnlRgUN7betCiMuwo831aAPG\np/88QWB/4sm50X6/yGFCVQ+U/BlXnfEg3Hjv06Rl7yLldtWmTH1/B+TTfyVe\nxBO1\r\n=Ir26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"index.scss","primer":{"category":"product","module_type":"components"},"readme":"# Primer Popover\n\n[![npm version](https://img.shields.io/npm/v/primer-popover.svg)](https://www.npmjs.org/package/primer-popover)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-popover` with this command.\n\n```\n$ npm install --save primer-popover\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-popover/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Popover\npath: components/popover\nstatus: Experimental\n-->\n\nPopovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\n{:toc}\n\nA popover consist of:\n\n- The block element, `.Popover`, which simply positions its content absolutely atop other body content.\n- The child element, `.Popover-message`, which contains the markup for the intended messaging and the visual \"caret.\"\n\nIn the examples below, `Popover-message`, in particular, uses a handful of utility classes to style it appropriately. And these are intended to demonstrate the default, go-to presentation for the popover's message. By default, the message's caret is centered on the top edge of the message.\n\nThe `Popover-message` element also supports several modifiers, most of which position the caret differently:\n\n- [`.Popover-message--top`](#default-top-center) (default): Places the caret on the top edge of the message, horizontally centered.\n- [`.Popover-message--bottom`](#bottom) Places the caret on the bottom edge of the message, horizontally centered.\n- [`.Popover-message--right`](#right): Places the caret on the right edge of the message, vertically centered.\n- [`.Popover-message--left`](#left): Places the caret on the left edge of the message, vertically centered.\n\nEach of these modifiers also support a syntax for adjusting the positioning the caret to the right, left, top, or bottom of its respective edge. That syntax looks like:\n\n- [`.Popover-message--bottom-left`](#bottom-left)\n- [`.Popover-message--bottom-right`](#bottom-right)\n- [`.Popover-message--left-bottom`](#left-bottom)\n- [`.Popover-message--left-top`](#left-top)\n- [`.Popover-message--right-bottom`](#right-bottom)\n- [`.Popover-message--right-top`](#right-top)\n- [`.Popover-message--top-left`](#top-left)\n- [`.Popover-message--top-right`](#top-right)\n\nLastly, there is an added [`.Popover-message--large`](#large) modifier, which assumes a slightly wider popover message on screens wider than 544px.\n\n### Notes\n\nThe samples below include optional markup, like:\n- An outermost container that establishes stacking context (e.g. `position-relative`).\n- A choice piece of user interface (a button, in this case) to relate the popover to.\n- Use of the `Details` and `js-details` family of class names, which interact with JavaScript to demonstrate dismissal of the popover by clicking the nested \"Got it!\" button.\n\n### Basic example\nDefaults to caret oriented top-center.\n\n```html title=\"Default (top-center)\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Large example\n\n```html title=\"Large\"\n<div class=\"position-relative text-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0 left-0\">\n    <div class=\"Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Bottom\n\n```html title=\"Bottom\"\n<div class=\"position-relative text-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom p-4 mx-auto mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-right\n\n```html title=\"Bottom-right\"\n<div class=\"position-relative text-right\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Bottom-left\n\n```html title=\"Bottom-left\"\n<div class=\"Popover position-relative\">\n  <div class=\"Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large\">\n    <h4 class=\"mb-2\">Popover heading</h4>\n    <p>Message about this particular piece of UI.</p>\n    <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n  </div>\n</div>\n<button class=\"btn btn-primary\">UI</button>\n```\n\n### Left\n\n```html title=\"Left\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-bottom\n\n```html title=\"Left-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-bottom p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Left-top\n\n```html title=\"Left-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--left-top p-4 ml-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Right\n\n```html title=\"Right\"\n<div class=\"d-flex flex-justify-center flex-items-center\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-bottom\n\n```html title=\"Right-bottom\"\n<div class=\"d-flex flex-justify-center flex-items-end\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-bottom p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Right-top\n\n```html title=\"Right-top\"\n<div class=\"d-flex flex-justify-center flex-items-start\">\n  <div class=\"Popover position-relative\">\n    <div class=\"Popover-message Popover-message--right-top p-4 mr-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n  <button class=\"btn btn-primary\">UI</button>\n</div>\n```\n\n### Top-left\n\n```html title=\"Top-left\"\n<div class=\"position-relative\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover\">\n    <div class=\"Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n### Top-right\n\n```html title=\"Top-right\"\n<div class=\"position-relative text-right\">\n  <button class=\"btn btn-primary\">UI</button>\n  <div class=\"Popover right-0\">\n    <div class=\"Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large\">\n      <h4 class=\"mb-2\">Popover heading</h4>\n      <p>Message about this particular piece of UI.</p>\n      <button type=\"submit\" class=\"btn btn-outline mt-2 text-bold\">Got it!</button>\n    </div>\n  </div>\n</div>\n```\n\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint test-docs","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","test-docs":"../../script/test-docs","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"_npmVersion":"6.4.1","description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.df004242"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-popover_1.1.0-alpha.df004242_1550177210957_0.20145122143913263","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-10-27T15:44:41.725Z","modified":"2026-08-07T19:05:32.087Z","0.1.0-alpha.e386e3b9":"2017-10-27T15:44:41.725Z","0.1.0-alpha.2b4f51db":"2017-10-27T19:36:29.872Z","0.1.0-alpha.eee49256":"2017-10-27T19:52:00.800Z","0.1.0-alpha.e777f888":"2017-10-27T19:58:48.155Z","0.1.0-alpha.503bc620":"2017-11-02T21:49:07.189Z","0.1.0-alpha.fd89e173":"2017-11-03T17:42:53.222Z","0.1.0-alpha.f73ca933":"2017-11-03T18:26:42.999Z","0.1.0-alpha.6fcd7e0a":"2017-11-06T20:56:09.094Z","0.1.0-alpha.7888ee92":"2017-11-06T23:37:06.021Z","0.1.0-alpha.3adaac52":"2017-11-06T23:56:03.827Z","0.1.0-alpha.a4bc4a43":"2017-11-07T21:59:48.049Z","0.1.0-alpha.f2cb42ae":"2017-11-07T22:00:50.629Z","0.1.0-alpha.19404e55":"2017-11-07T22:00:59.594Z","0.1.0-alpha.30aafda8":"2017-11-07T22:54:05.859Z","0.0.1-rc.0":"2017-11-07T23:06:38.258Z","0.1.0-alpha.c9a64cbb":"2017-11-08T02:08:40.641Z","0.1.0-alpha.e0a27da9":"2017-11-08T02:55:03.970Z","0.0.1-rc.1":"2017-11-08T03:46:11.245Z","0.1.0-alpha.ca4c2c3a":"2017-11-08T19:40:37.847Z","0.0.1-rc.2":"2017-11-08T21:45:33.038Z","0.0.1-rc.3":"2017-11-08T21:49:24.449Z","0.0.1-rc.4":"2017-11-08T22:49:38.431Z","0.0.1-rc.5":"2017-11-08T22:55:55.978Z","0.1.0-alpha.9965c961":"2017-11-08T23:05:56.637Z","0.0.1-rc.6":"2017-11-08T23:15:02.312Z","0.0.1-rc.7":"2017-11-08T23:44:56.246Z","0.0.1-rc.8":"2017-11-09T03:35:55.408Z","0.1.0-alpha.14223a9a":"2017-11-09T17:54:53.397Z","0.1.0-alpha.6910d580":"2017-11-09T17:59:28.450Z","0.0.1-rc.9":"2017-11-09T21:23:30.084Z","0.0.1-rc.10":"2017-11-10T00:42:28.678Z","0.1.0-alpha.e39405dd":"2017-11-10T00:55:39.199Z","0.1.0-alpha.d2e6cfed":"2017-11-10T03:13:53.463Z","0.0.1-rc.11":"2017-11-10T05:50:08.954Z","0.0.1-rc.12":"2017-11-10T16:53:23.122Z","0.0.1-rc.13":"2017-11-10T17:08:53.937Z","0.0.1-rc.14":"2017-11-10T17:18:18.594Z","0.0.1-rc.15":"2017-11-10T19:38:02.040Z","0.0.1-rc.16":"2017-11-10T22:01:03.016Z","0.0.1-rc.17":"2017-11-13T20:18:33.261Z","0.0.1-rc.18":"2017-11-13T20:36:37.463Z","0.1.0-alpha.fbed85cd":"2017-11-13T20:37:45.758Z","0.0.1-rc.19":"2017-11-13T22:45:30.583Z","0.0.1-rc.20":"2017-11-14T00:18:00.376Z","0.0.1-rc.21":"2017-11-14T00:27:22.468Z","0.0.2-rc.0":"2017-11-14T00:51:13.551Z","0.0.2":"2017-11-14T01:01:58.358Z","0.0.2-rc.1":"2017-11-14T16:27:19.185Z","0.0.2-rc.2":"2017-11-14T17:17:30.799Z","0.0.2-rc.3":"2017-11-14T20:00:05.392Z","0.0.3-rc.0":"2017-11-14T21:26:02.805Z","0.0.3":"2017-11-14T21:41:39.383Z","0.1.0-alpha.0076710f":"2017-11-14T22:34:39.569Z","0.1.0-alpha.46a65560":"2017-11-14T23:11:55.909Z","0.1.0-alpha.0bad1ef1":"2017-11-15T17:03:20.718Z","0.1.0-alpha.62bcf358":"2017-11-15T17:53:40.665Z","0.0.3-rc.1":"2017-11-15T18:16:28.839Z","0.1.0-alpha.c618f034":"2017-11-15T18:28:20.058Z","0.0.3-rc.2":"2017-11-15T19:36:21.282Z","0.1.0-alpha.b209ba21":"2017-11-15T20:26:11.465Z","0.0.3-rc.3":"2017-11-15T21:25:32.866Z","0.0.3-rc.4":"2017-11-15T23:37:54.901Z","0.0.4-rc.0":"2017-11-15T23:47:23.483Z","0.0.4-rc.1":"2017-11-15T23:56:11.253Z","0.0.4":"2017-11-16T00:08:06.601Z","0.1.0-alpha.ef159fe7":"2017-12-05T01:12:29.191Z","0.1.0-alpha.da9ed3b0":"2017-12-06T18:20:01.972Z","0.0.4-rc.2":"2017-12-07T20:31:55.134Z","0.1.0-alpha.fb510a5d":"2017-12-07T21:30:59.346Z","0.0.4-rc.3":"2017-12-08T21:03:38.073Z","0.1.0-alpha.ed73f8e2":"2017-12-08T23:14:40.470Z","0.1.0-alpha.6d3383f1":"2017-12-11T15:50:31.480Z","0.0.4-rc.4":"2017-12-11T15:54:07.239Z","0.1.0-alpha.c69cc480":"2017-12-11T16:09:50.783Z","0.0.4-rc.5":"2017-12-11T16:27:24.502Z","0.0.4-rc.6":"2017-12-18T19:28:59.541Z","0.0.4-rc.7":"2017-12-18T19:49:14.513Z","0.0.5-rc.0":"2017-12-18T19:53:40.164Z","0.0.5-rc.1":"2017-12-18T23:44:39.521Z","0.0.5-rc.2":"2017-12-18T23:46:29.573Z","0.0.5":"2017-12-19T22:39:34.668Z","0.1.0-alpha.3efde033":"2018-01-03T23:15:30.166Z","0.0.5-rc.3":"2018-01-05T00:39:48.546Z","0.1.0-alpha.d02187f8":"2018-01-05T15:34:22.936Z","0.0.5-rc.4":"2018-01-05T16:27:26.590Z","0.1.0-alpha.aea4ff80":"2018-01-05T21:54:19.228Z","0.1.0-alpha.a134b9ac":"2018-01-05T23:05:40.020Z","0.1.0-alpha.6ab46488":"2018-01-05T23:10:42.036Z","0.0.5-rc.5":"2018-01-06T17:19:32.311Z","0.1.0-alpha.d2343bbd":"2018-01-09T23:40:20.711Z","0.1.0-alpha.dd122634":"2018-01-10T22:32:17.516Z","0.1.0-alpha.9ecb500d":"2018-01-10T23:52:26.466Z","0.0.5-rc.6":"2018-01-11T23:46:59.688Z","0.1.0-alpha.f64f6abb":"2018-01-11T23:47:56.774Z","0.1.0-alpha.9c5fbfd8":"2018-01-12T16:57:33.625Z","0.1.0-alpha.17592000":"2018-01-12T19:37:37.096Z","0.1.0-alpha.359598ab":"2018-01-12T19:58:37.653Z","0.1.0-alpha.52e89b13":"2018-01-12T20:05:27.904Z","0.1.0-alpha.c4869e9d":"2018-01-12T20:18:34.436Z","0.1.0-alpha.a4c3524c":"2018-01-12T20:28:01.188Z","0.1.0-alpha.7ae35186":"2018-01-12T22:38:13.224Z","0.1.0-alpha.36307d88":"2018-01-12T23:55:39.152Z","0.0.5-rc.7":"2018-01-13T00:06:29.352Z","0.1.0-alpha.b6939e4a":"2018-01-13T00:13:49.926Z","0.0.5-rc.8":"2018-01-13T00:18:13.998Z","0.0.5-rc.9":"2018-01-13T00:26:45.476Z","0.0.5-rc.10":"2018-01-13T00:40:33.279Z","0.0.5-rc.11":"2018-01-17T05:15:28.239Z","0.0.5-rc.12":"2018-01-17T23:23:54.015Z","0.0.5-rc.13":"2018-01-17T23:46:37.525Z","0.0.6-rc.0":"2018-01-18T00:07:31.548Z","0.0.6":"2018-01-18T00:43:41.916Z","0.1.0-alpha.2fffa26e":"2018-01-18T18:36:46.912Z","0.1.0-alpha.66dd47c0":"2018-01-18T19:04:23.273Z","0.1.0-alpha.e0fb693c":"2018-01-18T21:42:30.780Z","0.1.0-alpha.16d78454":"2018-02-07T08:28:57.548Z","0.1.0-alpha.d42378bb":"2018-02-27T00:06:05.873Z","0.1.0-alpha.158ab340":"2018-02-27T16:44:45.164Z","0.1.0-alpha.c62bc878":"2018-03-05T18:39:41.117Z","0.1.0-alpha.1f08d58c":"2018-03-05T19:06:14.021Z","0.1.0-alpha.4633be4e":"2018-03-14T00:41:25.106Z","0.1.0-alpha.fc637600":"2018-03-26T23:23:24.669Z","0.1.0-alpha.64d43fe3":"2018-03-26T23:27:53.892Z","0.1.0-alpha.87149739":"2018-03-27T17:24:18.688Z","0.1.0-alpha.c7d94705":"2018-03-27T17:38:09.903Z","0.1.0-alpha.1b67c66e":"2018-03-27T23:06:01.952Z","0.1.0-alpha.60a6ac26":"2018-04-05T16:57:59.380Z","0.1.0-alpha.de4aefb1":"2018-04-05T17:57:03.623Z","0.1.0-alpha.8c501390":"2018-04-26T21:42:47.836Z","0.1.0-alpha.aa8e26c1":"2018-04-26T21:46:57.371Z","0.1.0-alpha.cef32931":"2018-04-27T23:37:41.088Z","0.1.0-alpha.fefb3404":"2018-04-27T23:54:13.088Z","0.1.0-alpha.06e6261a":"2018-04-30T18:21:47.785Z","0.1.0-alpha.b150d7e6":"2018-04-30T20:54:20.310Z","0.1.0-alpha.244064c1":"2018-04-30T21:32:45.881Z","0.1.0-alpha.ff72c63b":"2018-04-30T21:42:00.457Z","0.1.0-alpha.e605f349":"2018-05-01T17:42:38.853Z","0.1.0-alpha.55ee9907":"2018-05-03T21:39:11.562Z","0.1.0-alpha.20ae7855":"2018-05-03T21:58:27.757Z","0.1.0-alpha.41e8c4d3":"2018-05-03T22:01:55.037Z","0.1.0-alpha.9115c5c9":"2018-05-03T22:19:17.851Z","0.1.0-alpha.942f15f1":"2018-05-03T22:22:17.729Z","0.1.0-alpha.07e8b001":"2018-05-04T21:10:07.798Z","0.1.0-alpha.8881b8fa":"2018-05-04T21:42:10.012Z","0.1.0-alpha.6ce8e0bc":"2018-05-04T22:01:34.924Z","0.1.0-alpha.32b59b4b":"2018-05-07T16:34:49.223Z","0.1.0-alpha.ac4b4352":"2018-05-07T17:54:01.435Z","0.0.6-rc.1":"2018-05-08T21:46:17.646Z","0.0.6-rc.2":"2018-05-08T21:51:58.592Z","0.0.6-rc.3":"2018-05-08T21:56:53.013Z","0.0.6-rc.4":"2018-05-09T04:59:43.864Z","0.1.0-alpha.1e956978":"2018-05-09T19:37:27.050Z","0.1.0-alpha.2f380714":"2018-05-09T21:49:26.109Z","0.1.0-alpha.51cfc597":"2018-05-09T23:25:33.409Z","0.1.0-alpha.7e6aa5c8":"2018-05-09T23:34:25.752Z","0.1.0-alpha.68e2fa59":"2018-05-09T23:39:26.854Z","0.0.6-rc.5":"2018-05-10T04:30:31.920Z","0.1.0-alpha.5f2bfac8":"2018-05-10T17:55:52.514Z","0.1.0-alpha.5c3ca04a":"2018-05-10T22:04:52.331Z","0.0.6-rc.6":"2018-05-10T22:06:24.410Z","0.0.6-rc.7":"2018-05-10T22:15:05.713Z","0.1.0-rc.0":"2018-05-10T22:38:54.566Z","0.1.0":"2018-05-10T23:08:23.892Z","0.1.0-alpha.62c2f82f":"2018-05-11T18:05:03.973Z","0.2.0-alpha.749dd3bc":"2018-05-11T18:52:37.316Z","0.2.0-alpha.8673492":"2018-05-11T18:56:16.545Z","0.2.0-alpha.dde66593":"2018-05-11T19:07:55.592Z","0.2.0-alpha.653de47c":"2018-05-11T19:30:02.431Z","0.2.0-alpha.73ea74e2":"2018-05-14T16:59:43.232Z","0.2.0-alpha.b92c57d1":"2018-05-14T17:03:00.575Z","0.2.0-alpha.814cdd3d":"2018-05-14T17:08:45.253Z","0.2.0-alpha.68e890a4":"2018-05-18T17:02:01.287Z","0.2.0-alpha.b088b8ca":"2018-05-23T21:05:36.641Z","0.2.0-alpha.4e70f02d":"2018-06-01T23:51:45.579Z","0.2.0-alpha.b62d989b":"2018-06-01T23:54:12.423Z","0.1.0-rc.1":"2018-06-13T22:55:17.696Z","0.1.0-rc.2":"2018-06-13T23:05:54.519Z","0.1.1-rc.0":"2018-06-13T23:43:00.287Z","0.1.1-rc.1":"2018-06-14T00:08:23.436Z","0.1.1":"2018-06-14T15:51:43.863Z","0.2.0-alpha.87a2e243":"2018-06-18T21:48:59.614Z","0.2.0-alpha.6d79c2b1":"2018-06-19T22:14:25.355Z","0.2.0-alpha.71a72cda":"2018-06-19T22:34:54.585Z","0.1.1-rc.2":"2018-06-20T21:10:18.384Z","0.2.0-alpha.e78fdb9a":"2018-06-20T21:51:13.651Z","0.2.0-alpha.3a1e758e":"2018-06-25T22:23:23.223Z","0.1.1-rc.3":"2018-06-25T22:30:58.669Z","0.1.1-rc.4":"2018-06-26T03:41:50.780Z","0.2.0-alpha.dc6b5a17":"2018-06-26T03:45:28.557Z","0.1.1-rc.5":"2018-06-26T03:48:14.126Z","0.1.1-rc.6":"2018-06-26T04:03:52.508Z","0.1.1-rc.7":"2018-06-26T04:05:52.428Z","0.2.0-alpha.89893e4a":"2018-06-28T19:35:44.922Z","0.2.0-alpha.3091902b":"2018-06-28T19:46:59.636Z","0.1.1-rc.8":"2018-06-28T19:50:24.958Z","0.1.1-rc.9":"2018-06-28T20:06:44.363Z","0.1.1-rc.10":"2018-06-28T20:38:56.101Z","0.2.0-alpha.a134dbf7":"2018-06-28T23:16:12.523Z","0.2.0-alpha.effa8d7e":"2018-06-28T23:34:25.888Z","0.2.0-alpha.7d60d746":"2018-06-28T23:39:31.072Z","0.1.1-rc.11":"2018-06-29T16:56:50.952Z","0.2.0-alpha.ab698d5e":"2018-06-29T19:22:14.858Z","0.2.0-alpha.90b4f21c":"2018-06-29T19:49:54.127Z","0.1.1-rc.12":"2018-06-29T20:31:16.859Z","0.1.1-rc.13":"2018-06-29T20:56:25.087Z","0.1.2-rc.0":"2018-06-29T20:59:30.261Z","0.1.2":"2018-07-02T18:03:17.424Z","0.2.0-alpha.4901ed89":"2018-07-03T17:27:00.247Z","0.2.0-alpha.0b756ad4":"2018-07-03T17:32:43.448Z","0.2.0-alpha.fe4010eb":"2018-07-03T17:33:21.421Z","0.2.0-alpha.4103b139":"2018-07-03T17:43:16.077Z","0.2.0-alpha.eb7f6898":"2018-07-03T17:56:35.461Z","0.2.0-alpha.d773723d":"2018-07-03T17:57:52.066Z","0.2.0-alpha.dae40155":"2018-07-03T18:15:00.777Z","0.2.0-alpha.c417c2bc":"2018-07-03T18:35:20.784Z","0.1.2-rc.1":"2018-07-03T18:35:23.709Z","0.1.2-rc.2":"2018-07-03T18:51:00.332Z","0.1.3-rc.0":"2018-07-27T19:57:37.889Z","0.1.3-rc.1":"2018-07-27T20:29:28.231Z","0.1.3-rc.2":"2018-07-27T20:32:12.549Z","0.1.3":"2018-07-27T21:46:09.224Z","0.2.0-alpha.dc28805d":"2018-08-02T18:22:37.130Z","0.2.0-alpha.c66331d4":"2018-08-02T18:28:25.011Z","0.2.0-alpha.b19ce449":"2018-08-02T18:36:47.994Z","0.2.0-alpha.86ffde2d":"2018-08-02T22:38:40.749Z","0.1.4":"2018-08-03T18:52:47.153Z","0.2.0-alpha.c1adda16":"2018-08-23T18:37:30.303Z","0.2.0-alpha.602ed262":"2018-08-23T22:42:41.874Z","0.2.0-alpha.2e96422e":"2018-08-23T23:29:22.366Z","0.2.0-alpha.b669eefb":"2018-10-15T20:32:57.020Z","0.2.0-alpha.d9d741bc":"2018-10-15T21:27:58.042Z","0.2.0-alpha.671ec2a2":"2018-10-15T21:28:55.856Z","0.2.0-alpha.a0bd1a08":"2018-10-15T23:22:40.467Z","0.2.0-alpha.472eb506":"2018-10-15T23:48:45.755Z","0.1.4-rc.0":"2018-10-16T06:18:58.841Z","0.2.0-alpha.fdcbf941":"2018-10-16T20:52:37.152Z","0.1.4-rc.1":"2018-10-17T17:14:09.962Z","0.2.0-alpha.ba09cbcc":"2018-10-17T17:28:36.346Z","0.1.4-rc.2":"2018-10-17T19:19:08.488Z","0.2.0-alpha.a8b75a13":"2018-10-17T19:31:14.452Z","0.2.0-alpha.93e11282":"2018-10-17T19:32:11.976Z","0.2.0-alpha.01812ee2":"2018-10-17T19:37:49.541Z","0.2.0-alpha.76e9bd5d":"2018-10-17T20:04:16.218Z","0.2.0-alpha.56a6d9e8":"2018-10-17T20:10:11.834Z","0.2.0-alpha.d2876be1":"2018-10-17T20:32:53.212Z","0.2.0-alpha.8e9cccb4":"2018-10-17T20:43:00.506Z","0.2.0-alpha.9cac3410":"2018-10-17T20:56:23.559Z","0.2.0-alpha.9b72bf6f":"2018-10-17T20:58:31.849Z","0.2.0-alpha.3c406710":"2018-10-17T21:04:40.734Z","0.2.0-alpha.1938ff24":"2018-10-17T21:11:11.501Z","0.2.0-alpha.53c93082":"2018-10-17T21:23:13.364Z","0.2.0-alpha.0f5bbeba":"2018-10-17T21:31:46.547Z","0.2.0-alpha.c29e3d87":"2018-10-17T21:58:44.724Z","0.2.0-alpha.17f5537f":"2018-10-17T22:12:20.104Z","0.2.0-alpha.b67f7cc4":"2018-10-17T22:21:48.414Z","0.2.0-alpha.09cd6cad":"2018-10-18T17:01:05.856Z","0.1.4-rc.3":"2018-10-18T17:33:07.140Z","0.2.0-alpha.cef53ac4":"2018-10-18T18:31:59.107Z","0.2.0-alpha.b014d245":"2018-10-18T18:42:31.784Z","0.2.0-alpha.49d97c80":"2018-10-18T20:01:21.777Z","0.2.0-alpha.b5459caa":"2018-10-18T20:02:43.145Z","0.2.0-alpha.7c8d0e34":"2018-10-18T21:20:38.938Z","0.1.4-rc.4":"2018-10-18T21:32:13.722Z","0.2.0-alpha.c396b082":"2018-10-18T21:35:44.139Z","0.2.0-alpha.47902cf5":"2018-10-18T21:39:30.401Z","0.1.4-rc.5":"2018-10-18T21:43:26.933Z","0.1.4-rc.6":"2018-10-18T21:50:46.085Z","0.2.0-alpha.e61e3868":"2018-10-18T22:12:08.931Z","0.2.0-alpha.c8f9d606":"2018-10-18T22:25:03.647Z","0.2.0-alpha.8ae934a9":"2018-10-18T23:54:29.136Z","0.2.0-alpha.fc68e650":"2018-10-19T00:00:24.164Z","0.2.0-alpha.3080c2dc":"2018-10-19T04:12:16.095Z","0.2.0-alpha.2f50e954":"2018-10-19T18:18:52.652Z","0.1.4-rc.7":"2018-10-19T21:10:54.133Z","0.1.4-rc.8":"2018-10-22T17:45:19.342Z","0.2.0-alpha.3f5d8a65":"2018-10-22T20:22:06.158Z","0.2.0-alpha.ae5b46b8":"2018-10-22T22:10:56.793Z","0.1.4-rc.9":"2018-10-22T22:15:37.273Z","0.1.5-rc.0":"2018-10-22T23:35:31.657Z","0.2.0-alpha.d1ea413c":"2018-10-23T17:39:24.996Z","0.2.0-alpha.a9f6a8c2":"2018-10-23T18:04:47.357Z","0.1.5":"2018-10-23T20:05:43.598Z","0.2.0-alpha.7dd7d142":"2018-10-23T20:23:56.747Z","0.2.0-alpha.77a05b96":"2018-10-23T21:18:51.910Z","0.2.0-alpha.1871e8e5":"2018-10-23T21:34:51.001Z","0.2.0-alpha.44b1636e":"2018-10-25T15:09:13.457Z","0.2.0-alpha.260b88e3":"2018-10-25T19:43:52.121Z","0.2.0-alpha.d94059f1":"2018-10-25T20:27:01.181Z","0.2.0-alpha.1d86b11a":"2018-10-25T20:44:11.581Z","0.2.0-alpha.6e8eee0b":"2018-10-25T21:04:37.090Z","0.2.0-alpha.f5159d01":"2018-10-25T23:48:53.459Z","0.2.0-alpha.71d3dd4d":"2018-10-26T02:41:53.321Z","0.2.0-alpha.8147bf9e":"2018-10-26T02:51:26.694Z","0.2.0-alpha.ade07006":"2018-10-29T19:47:44.137Z","0.2.0-alpha.6e00d1f1":"2018-11-06T05:15:48.269Z","0.2.0-alpha.a81416ae":"2018-11-06T05:26:09.205Z","0.2.0-alpha.3487d68e":"2018-11-06T06:59:55.891Z","0.2.0-alpha.deb27cb4":"2018-11-06T07:09:20.386Z","0.2.0-alpha.c3a1ee2b":"2018-11-06T07:10:41.770Z","0.2.0-alpha.6ac5deb8":"2018-11-06T08:17:26.701Z","0.2.0-alpha.c12761d7":"2018-11-07T22:27:18.028Z","0.2.0-alpha.4a75e7bd":"2018-11-08T18:47:06.693Z","0.2.0-alpha.d76fd883":"2018-11-08T19:08:38.071Z","0.2.0-alpha.c2903f93":"2018-11-09T00:02:55.508Z","0.2.0-alpha.0fa93277":"2018-11-09T18:08:27.922Z","0.2.0-alpha.92274564":"2018-11-09T21:45:23.949Z","0.2.0-alpha.19834d12":"2018-11-09T22:19:47.192Z","0.2.0-alpha.1c6820e3":"2018-11-13T22:10:59.920Z","0.2.0-alpha.26a2ae18":"2018-11-13T23:28:48.244Z","0.1.5-rc.1":"2018-11-14T00:17:21.916Z","0.1.5-rc.2":"2018-11-15T21:37:39.943Z","0.2.0-alpha.d651913a":"2018-11-15T22:10:37.718Z","0.2.0-alpha.ea8762da":"2018-11-15T22:31:12.714Z","0.1.5-rc.3":"2018-11-15T22:59:25.770Z","0.2.0-alpha.389964ac":"2018-11-15T23:04:58.279Z","0.2.0-alpha.c144285b":"2018-11-15T23:48:24.236Z","0.1.5-rc.4":"2018-11-16T00:13:09.655Z","0.1.5-rc.5":"2018-11-17T05:02:15.862Z","0.1.6-rc.0":"2018-11-19T20:35:17.369Z","0.1.6-rc.1":"2018-11-19T20:47:20.592Z","0.2.0-alpha.e9889e24":"2018-11-19T21:40:08.384Z","0.1.6-rc.2":"2018-11-19T21:56:05.039Z","0.2.0-alpha.314bc862":"2018-11-19T22:12:20.844Z","0.1.6-rc.3":"2018-11-19T22:34:13.475Z","0.2.0-alpha.2afc388c":"2018-11-19T22:42:37.812Z","0.1.6-rc.4":"2018-11-19T22:47:32.326Z","0.1.6":"2018-11-20T00:05:15.109Z","0.2.0-alpha.ab2b4e17":"2018-11-20T18:39:06.650Z","0.2.0-alpha.62009446":"2018-11-20T18:45:11.422Z","0.2.0-alpha.bc9c43da":"2018-11-26T19:48:50.746Z","0.2.0-alpha.589611fb":"2018-11-29T18:23:00.238Z","0.2.0-alpha.640adae6":"2018-11-30T18:43:43.321Z","0.2.0-alpha.9abc2666":"2018-11-30T21:26:53.760Z","0.2.0-alpha.c96e9341":"2018-12-01T00:26:33.464Z","0.2.0-alpha.920cbb94":"2018-12-01T00:35:02.746Z","0.2.0-alpha.10b12bd7":"2018-12-01T00:49:59.638Z","0.2.0-alpha.60374339":"2018-12-01T00:52:07.835Z","0.2.0-alpha.72bcb091":"2018-12-04T20:40:38.553Z","0.2.0-alpha.406e3771":"2018-12-05T06:08:53.628Z","0.2.0-alpha.7b492b62":"2018-12-05T06:52:07.724Z","0.2.0-alpha.076a5833":"2018-12-05T09:37:03.735Z","0.2.0-alpha.87a7c3c7":"2018-12-05T09:53:35.412Z","0.2.0-alpha.2fb541e8":"2018-12-05T10:00:40.739Z","0.2.0-alpha.7ad3aaa6":"2018-12-05T10:01:34.108Z","0.2.0-alpha.335e7a0f":"2018-12-05T19:30:23.964Z","0.2.0-alpha.1d903df8":"2018-12-05T19:43:18.911Z","0.2.0-alpha.5505b4f9":"2018-12-05T20:01:12.932Z","0.2.0-alpha.c9c2ddd0":"2018-12-06T00:41:01.916Z","0.2.0-alpha.3a835d8f":"2018-12-06T18:38:21.354Z","0.2.0-alpha.a4606fae":"2018-12-06T19:01:10.429Z","0.2.0-alpha.1a319bd0":"2018-12-06T19:57:21.865Z","0.2.0-alpha.a59a2bd4":"2018-12-06T22:36:49.744Z","0.2.0-alpha.97a6e91d":"2018-12-07T08:40:16.295Z","0.2.0-alpha.a93e3ebd":"2018-12-07T09:40:08.415Z","0.2.0-alpha.46beb5a1":"2018-12-07T19:38:14.811Z","0.2.0-alpha.c20a7afb":"2018-12-07T22:40:31.156Z","0.2.0-alpha.a369dd35":"2018-12-07T22:43:16.613Z","0.2.0-alpha.d328fa90":"2018-12-07T23:04:05.098Z","0.2.0-alpha.bd244056":"2018-12-07T23:28:59.104Z","0.2.0-alpha.f7b11c63":"2018-12-08T00:17:34.436Z","0.2.0-alpha.714565b4":"2018-12-10T16:17:33.607Z","0.2.0-alpha.456be6d9":"2018-12-11T00:14:50.602Z","0.2.0-alpha.0b0d1941":"2018-12-14T05:48:55.358Z","0.2.0-alpha.7acee306":"2018-12-14T06:32:24.763Z","0.2.0-alpha.8d9b243e":"2018-12-14T06:39:24.419Z","0.2.0-alpha.084f709d":"2018-12-17T23:01:38.376Z","0.2.0-alpha.f5a89e25":"2018-12-17T23:12:46.273Z","0.2.0-alpha.4586004e":"2018-12-17T23:16:14.499Z","0.2.0-alpha.6289c294":"2018-12-17T23:36:28.034Z","0.2.0-alpha.d4f69a27":"2018-12-17T23:41:52.512Z","0.2.0-alpha.2a13841b":"2018-12-18T00:05:18.294Z","0.2.0-alpha.45c8cf83":"2018-12-18T00:11:48.727Z","0.2.0-alpha.8432e534":"2018-12-18T00:19:38.848Z","0.2.0-alpha.7a76b326":"2018-12-19T05:22:08.313Z","0.2.0-alpha.52d5b327":"2018-12-20T19:39:38.014Z","0.2.0-alpha.af57a500":"2018-12-20T22:32:49.769Z","0.2.0-alpha.4dab7fdf":"2018-12-20T22:38:59.991Z","0.2.0-alpha.47ed2750":"2018-12-20T22:50:39.296Z","0.2.0-alpha.82bac610":"2018-12-20T23:05:07.623Z","0.2.0-alpha.15a93353":"2018-12-20T23:15:00.249Z","0.2.0-alpha.50e7198e":"2018-12-21T19:21:32.111Z","0.2.0-alpha.6c54e75d":"2018-12-21T20:24:13.778Z","0.1.6-rc.5":"2018-12-21T22:40:34.149Z","0.1.6-rc.6":"2018-12-21T22:46:27.580Z","0.1.7-rc.0":"2018-12-21T22:59:15.531Z","0.1.7-rc.1":"2018-12-21T23:06:40.036Z","0.2.0-alpha.856f95ca":"2019-01-03T00:35:09.792Z","0.2.0-alpha.2bb3a027":"2019-01-03T05:58:07.730Z","0.2.0-alpha.5862b25f":"2019-01-03T06:15:33.666Z","0.2.0-alpha.ee297c75":"2019-01-03T06:59:53.960Z","0.2.0-alpha.413e9cf2":"2019-01-03T15:26:43.009Z","0.2.0-alpha.1092c5ae":"2019-01-04T18:30:11.324Z","0.2.0-alpha.d2790373":"2019-01-04T18:36:52.548Z","0.2.0-alpha.f83c67be":"2019-01-04T18:53:43.536Z","0.2.0-alpha.e7242c1b":"2019-01-04T19:09:21.645Z","0.2.0-alpha.3e5ab64a":"2019-01-04T19:53:22.502Z","0.2.0-alpha.e7877054":"2019-01-04T20:08:25.540Z","0.2.0-alpha.0b0648ab":"2019-01-04T21:13:12.281Z","0.2.0-alpha.955f170c":"2019-01-04T21:54:33.153Z","0.2.0-alpha.a5c1364f":"2019-01-04T23:14:33.320Z","0.2.0-alpha.d9c365a1":"2019-01-04T23:24:53.699Z","0.2.0-alpha.687ba691":"2019-01-07T19:02:22.466Z","0.2.0-alpha.95307c65":"2019-01-07T21:05:05.768Z","0.2.0-alpha.2a15788f":"2019-01-07T21:17:31.408Z","0.2.0-alpha.7324c66f":"2019-01-07T21:33:39.572Z","0.2.0-alpha.8d56c8e7":"2019-01-07T21:42:12.292Z","0.2.0-alpha.d9b3997c":"2019-01-07T21:47:05.817Z","0.2.0-alpha.da3ba6a1":"2019-01-07T22:40:09.817Z","0.2.0-alpha.426b85a5":"2019-01-07T23:26:43.835Z","0.2.0-alpha.e7c17f27":"2019-01-07T23:42:44.589Z","0.2.0-alpha.eb2780e6":"2019-01-07T23:44:54.477Z","0.1.7":"2019-01-07T23:46:35.584Z","0.2.0-alpha.93f4e152":"2019-01-08T00:09:39.614Z","0.2.0-alpha.82a598b3":"2019-01-08T00:39:25.148Z","0.2.0-alpha.ecdd8bad":"2019-01-08T00:48:04.078Z","0.2.0-alpha.50510ebc":"2019-01-08T06:07:27.883Z","0.2.0-alpha.f18919ba":"2019-01-08T17:44:08.335Z","0.2.0-alpha.c7a3eeeb":"2019-01-08T18:41:29.530Z","0.2.0-alpha.950bf2b7":"2019-01-08T18:56:15.267Z","0.2.0-alpha.7c07cf8e":"2019-01-08T19:11:07.387Z","0.2.0-alpha.076ed277":"2019-01-08T19:23:03.772Z","0.2.0-alpha.a4df514d":"2019-01-08T20:08:27.053Z","0.2.0-alpha.912f1fb8":"2019-01-08T20:09:20.030Z","0.2.0-alpha.97e04ebe":"2019-01-08T20:34:09.930Z","0.2.0-alpha.1ed322f8":"2019-01-08T21:29:46.227Z","0.2.0-alpha.a8d2d06c":"2019-01-08T22:48:05.189Z","0.2.0-alpha.4ee73d2a":"2019-01-08T22:54:33.244Z","0.2.0-alpha.36125bde":"2019-01-08T23:00:09.178Z","0.2.0-alpha.6a37bfd5":"2019-01-09T01:02:33.828Z","0.2.0-alpha.35d6afc4":"2019-01-09T01:19:37.541Z","0.2.0-alpha.88be8a95":"2019-01-09T18:09:37.000Z","0.2.0-alpha.4ab66aaa":"2019-01-09T18:13:37.108Z","0.2.0-alpha.6af250dd":"2019-01-09T19:39:26.653Z","0.2.0-alpha.d16597a4":"2019-01-09T19:47:14.712Z","0.2.0-alpha.100c45e0":"2019-01-09T21:35:07.542Z","0.2.0-alpha.c5a475ff":"2019-01-09T21:58:12.865Z","0.2.0-alpha.d2e6ee2d":"2019-01-09T22:09:38.483Z","0.2.0-alpha.3bd3259f":"2019-01-09T22:18:59.304Z","0.2.0-alpha.9798c944":"2019-01-09T23:56:17.893Z","0.2.0-alpha.6f43d81e":"2019-01-10T00:18:04.491Z","0.2.0-alpha.ef34ab55":"2019-01-10T00:25:40.533Z","0.2.0-alpha.a6cd7ee5":"2019-01-10T08:12:14.473Z","0.2.0-alpha.45cd0ac2":"2019-01-10T08:16:01.499Z","0.2.0-alpha.9db56652":"2019-01-10T22:07:47.982Z","0.2.0-alpha.629938f0":"2019-01-10T22:17:20.351Z","0.2.0-alpha.de967b8b":"2019-01-11T00:02:22.183Z","0.2.0-alpha.197cd065":"2019-01-11T00:24:51.432Z","0.2.0-alpha.4cdb2f3a":"2019-01-11T00:34:47.618Z","0.2.0-alpha.5d2d2289":"2019-01-11T00:35:08.368Z","0.2.0-alpha.1811653a":"2019-01-11T00:42:46.431Z","0.2.0-alpha.ec171b46":"2019-01-11T00:50:12.557Z","0.2.0-alpha.4f621c26":"2019-01-11T18:21:54.015Z","0.2.0-alpha.c71b51f1":"2019-01-11T18:23:26.754Z","0.2.0-alpha.141d2d88":"2019-01-11T18:24:09.232Z","0.2.0-alpha.5eefc7cd":"2019-01-11T19:12:01.734Z","0.2.0-alpha.2d2ba632":"2019-01-11T19:34:37.330Z","0.2.0-alpha.cf5e649c":"2019-01-11T19:43:39.480Z","0.2.0-alpha.c098d806":"2019-01-11T20:04:46.627Z","0.2.0-alpha.8212a1d1":"2019-01-11T22:32:52.557Z","0.2.0-alpha.2d744d75":"2019-01-11T22:33:53.687Z","0.2.0-alpha.7c2e8750":"2019-01-11T22:39:55.096Z","0.2.0-alpha.14293137":"2019-01-11T22:55:58.183Z","0.1.8":"2019-01-11T23:08:08.503Z","0.2.0-alpha.79e1959c":"2019-01-11T23:19:11.385Z","0.2.0-alpha.79aab1d6":"2019-01-14T22:47:51.690Z","0.2.0-alpha.f2b57801":"2019-01-15T19:34:25.106Z","0.2.0-alpha.ca348b59":"2019-01-15T19:42:59.823Z","0.2.0-alpha.a5658d30":"2019-01-15T19:43:51.854Z","0.2.0-alpha.7941d537":"2019-01-15T19:56:28.264Z","0.2.0-alpha.7a0f07a5":"2019-01-15T21:15:28.735Z","0.2.0-alpha.03430b81":"2019-01-15T21:33:10.566Z","0.2.0-alpha.2aa63435":"2019-01-15T21:40:47.098Z","0.2.0-alpha.51dbf9ab":"2019-01-15T21:45:12.287Z","0.2.0-alpha.87aaf87e":"2019-01-15T22:22:13.040Z","0.2.0-alpha.b1478763":"2019-01-16T23:06:10.942Z","0.2.0-alpha.e41bfddd":"2019-01-16T23:20:34.772Z","0.2.0-alpha.d93360bc":"2019-01-17T00:36:56.110Z","0.2.0-alpha.20dd7c15":"2019-01-17T06:49:12.721Z","0.2.0-alpha.5c653f08":"2019-01-17T06:56:20.619Z","0.2.0-alpha.4d5dbc0a":"2019-01-17T19:39:53.219Z","0.2.0-alpha.dace91e8":"2019-01-17T19:53:22.724Z","0.2.0-alpha.d8fa0fbf":"2019-01-17T22:42:42.848Z","0.2.0-alpha.0bc0eeca":"2019-01-17T22:53:27.055Z","0.2.0-alpha.d51305cd":"2019-01-17T23:16:50.292Z","0.2.0-alpha.946e3ad8":"2019-01-18T00:34:10.673Z","0.2.0-alpha.091e3379":"2019-01-18T17:48:31.114Z","0.2.0-alpha.ee6f7715":"2019-01-22T21:13:44.862Z","0.2.0-alpha.20da46e0":"2019-01-22T21:18:43.431Z","0.2.0-alpha.4b1305d3":"2019-01-22T22:33:46.509Z","0.2.0-alpha.a158835b":"2019-01-22T22:43:19.329Z","0.2.0-alpha.031b4784":"2019-01-22T22:45:41.548Z","0.2.0-alpha.a5b2d418":"2019-01-22T22:47:05.322Z","0.2.0-alpha.2507e037":"2019-01-22T22:48:38.140Z","0.2.0-alpha.333ee702":"2019-01-22T22:57:11.667Z","0.2.0-alpha.5b896e00":"2019-01-22T22:58:50.657Z","0.2.0-alpha.ef822821":"2019-01-22T23:10:04.598Z","0.2.0-alpha.fbc5fb3f":"2019-01-22T23:13:41.241Z","0.2.0-alpha.2ccb67f5":"2019-01-22T23:29:10.185Z","0.2.0-alpha.12b798b8":"2019-01-22T23:39:03.285Z","0.2.0-alpha.0e91d9c4":"2019-01-22T23:45:41.063Z","0.2.0-alpha.9d5ddbae":"2019-01-23T00:22:18.075Z","0.2.0-alpha.d8e36290":"2019-01-23T00:24:06.588Z","0.2.0-alpha.8d395281":"2019-01-23T00:26:18.618Z","0.2.0-alpha.7e8b2dae":"2019-01-23T04:59:52.479Z","0.2.0-alpha.113894c2":"2019-01-23T05:08:01.808Z","0.2.0-alpha.12076a07":"2019-01-23T05:47:15.004Z","0.2.0-alpha.33d1cca1":"2019-01-23T19:22:11.041Z","0.2.0-alpha.1a7850cf":"2019-01-23T19:41:47.734Z","0.2.0-alpha.2682bd3a":"2019-01-23T19:42:12.328Z","0.2.0-alpha.96f9fe02":"2019-01-23T21:50:20.492Z","0.2.0-alpha.7f53e5ff":"2019-01-23T22:53:24.044Z","0.2.0-alpha.78cb7baa":"2019-01-23T23:17:03.843Z","0.2.0-alpha.1c57a0a9":"2019-01-23T23:29:13.738Z","0.2.0-alpha.c9e70d2f":"2019-01-23T23:30:40.519Z","0.2.0-alpha.8d7000cb":"2019-01-23T23:40:27.665Z","0.2.0-alpha.127dd98f":"2019-01-24T00:04:41.553Z","0.2.0-alpha.61aab4bc":"2019-01-24T00:06:00.207Z","0.2.0-alpha.68c3e189":"2019-01-24T00:43:46.138Z","0.2.0-alpha.5a78e62d":"2019-01-24T19:03:02.073Z","0.2.0-alpha.80c32bd2":"2019-01-24T19:10:11.141Z","0.2.0-alpha.cb697793":"2019-01-24T19:16:39.896Z","0.2.0-alpha.2be44f23":"2019-01-24T19:34:16.863Z","0.2.0-alpha.28960460":"2019-01-24T22:48:55.958Z","0.2.0-alpha.77423703":"2019-01-24T22:54:00.701Z","0.2.0-alpha.e6d3dacb":"2019-01-24T22:54:41.357Z","0.2.0-alpha.618b7b78":"2019-01-25T01:24:13.728Z","0.2.0-alpha.24b4159c":"2019-01-25T19:57:03.990Z","0.2.0-alpha.645f5f82":"2019-01-25T21:38:40.751Z","0.2.0-alpha.10e3b361":"2019-01-25T21:50:00.226Z","0.2.0-alpha.b78e8ab3":"2019-01-25T22:07:35.755Z","0.2.0-alpha.eba8f309":"2019-01-25T22:17:55.448Z","0.2.0-alpha.a75d1fb5":"2019-01-25T23:07:54.266Z","0.2.0-alpha.78600794":"2019-01-25T23:10:03.597Z","0.2.0-alpha.55f783ab":"2019-01-25T23:21:55.904Z","1.1.0-alpha.dee1eb40":"2019-01-25T23:26:21.611Z","1.1.0-alpha.82c06bb2":"2019-01-25T23:49:12.058Z","1.0.0":"2019-01-26T00:00:40.823Z","1.1.0-alpha.e45cefe1":"2019-01-26T00:04:54.952Z","1.1.0-alpha.658f95a6":"2019-01-28T20:32:29.191Z","1.1.0-alpha.12fdfce5":"2019-01-29T00:48:49.911Z","1.1.0-alpha.74cf4cd4":"2019-01-29T04:52:05.289Z","1.1.0-alpha.0a57e1d1":"2019-01-29T18:27:29.557Z","1.1.0-alpha.94655d9d":"2019-01-29T18:43:22.148Z","1.1.0-alpha.8348e823":"2019-01-29T19:03:48.032Z","1.1.0-alpha.748df56f":"2019-01-29T22:56:30.255Z","1.1.0-alpha.d5a982e8":"2019-02-01T20:58:13.760Z","1.1.0-alpha.880aa354":"2019-02-04T21:05:23.371Z","1.1.0-alpha.0e97ea6c":"2019-02-13T19:20:39.505Z","1.1.0-alpha.df004242":"2019-02-14T20:46:51.297Z"},"bugs":{"url":"https://github.com/primer/primer/issues"},"author":{"name":"GitHub, Inc."},"license":"MIT","homepage":"http://primer.github.io/","keywords":["github","primer"],"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-popover","type":"git"},"description":"Popover for suggesting, guiding, and bringing attention to specific UI elements on a page.","maintainers":[{"email":"manuelpuyol@github.com","name":"manuelpuyol"},{"email":"yes@jonrohan.codes","name":"jonrohan"},{"email":"design-systems@github.com","name":"primer-css"},{"email":"lugraciecy@gmail.com","name":"gracepark"},{"email":"jibrang@github.com","name":"jibrangarcia"},{"email":"arelia.jones@gmail.com","name":"arelia"},{"email":"tylerjdev@github.com","name":"tylerthedev"},{"email":"clay@smockle.com","name":"smockle"},{"email":"sim@simurai.com","name":"simurai"},{"email":"katehiga8@gmail.com","name":"khiga8"},{"email":"simon.taranto@gmail.com","name":"srt32"},{"email":"dgreif+githubbotnpm@github.com","name":"githubbot"},{"email":"jonathan.fuchs@gmail.com","name":"jfuchs"},{"email":"andri.j.alexandrou@gmail.com","name":"andrialexandrou"},{"email":"joycezhu@github.com","name":"joycezhu"},{"email":"bteng22@gmail.com","name":"bteng22"},{"email":"dustin.savery@gmail.com","name":"dustin.savery"},{"email":"ncalteen@github.com","name":"ncalteen"},{"email":"alaingoga@gmail.com","name":"alaingoga"},{"email":"andrei.girip99@gmail.com","name":"andreiig"}],"readme":"","readmeFilename":""}