{"action":"created","issue":{"url":"https://api.github.com/repos/ng-bootstrap/core/issues/145","repository_url":"https://api.github.com/repos/ng-bootstrap/core","labels_url":"https://api.github.com/repos/ng-bootstrap/core/issues/145/labels{/name}","comments_url":"https://api.github.com/repos/ng-bootstrap/core/issues/145/comments","events_url":"https://api.github.com/repos/ng-bootstrap/core/issues/145/events","html_url":"https://github.com/ng-bootstrap/core/issues/145","id":124075245,"number":145,"title":"[tooltip] exploring various API options","user":{"login":"pkozlowski-opensource","id":973550,"avatar_url":"https://avatars.githubusercontent.com/u/973550?v=3","gravatar_id":"","url":"https://api.github.com/users/pkozlowski-opensource","html_url":"https://github.com/pkozlowski-opensource","followers_url":"https://api.github.com/users/pkozlowski-opensource/followers","following_url":"https://api.github.com/users/pkozlowski-opensource/following{/other_user}","gists_url":"https://api.github.com/users/pkozlowski-opensource/gists{/gist_id}","starred_url":"https://api.github.com/users/pkozlowski-opensource/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkozlowski-opensource/subscriptions","organizations_url":"https://api.github.com/users/pkozlowski-opensource/orgs","repos_url":"https://api.github.com/users/pkozlowski-opensource/repos","events_url":"https://api.github.com/users/pkozlowski-opensource/events{/privacy}","received_events_url":"https://api.github.com/users/pkozlowski-opensource/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ng-bootstrap/core/labels/component:%20modal","name":"component: modal","color":"ffffff"},{"url":"https://api.github.com/repos/ng-bootstrap/core/labels/component:%20popover","name":"component: popover","color":"ffffff"},{"url":"https://api.github.com/repos/ng-bootstrap/core/labels/component:%20tooltip","name":"component: tooltip","color":"ffffff"},{"url":"https://api.github.com/repos/ng-bootstrap/core/labels/convention","name":"convention","color":"eb6420"},{"url":"https://api.github.com/repos/ng-bootstrap/core/labels/needs:%20investigation","name":"needs: investigation","color":"eb6420"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-12-28T14:35:01Z","updated_at":"2016-06-10T15:23:33Z","closed_at":"2016-06-10T15:23:33Z","body":"I would like to kick-off the discussion on the various API styles we can offer for tooltip / popover / modal users. We need to put a bit of thinking into it a with Angular2 one can't simply say \"here is a URL of a template, load me this here\". We've got view boundaries and the only things we can insert are:\r\n* templates (things wrapped in the `template` tag)\r\n* components\r\n\r\nActually the same limitations apply to the Angular 2 router.\r\n\r\nNow, as of today I can think of the 3 different styles of API (at this point I'm not even sure if all of them are implementable):\r\n\r\n### Named TemplateRef \r\n\r\n```html\r\n<template #foo>\r\n    Some <b>fancy</b> content\r\n</template>\r\n<div [ngb-tooltip]=\"foo\">\r\n```\r\n\r\n### Embedded TemplateRef \r\n\r\n```html\r\n<div [ngb-tooltip]=\"foo\">\r\n    <template #foo>\r\n        Some <b>fancy</b> content\r\n    </template>\r\n</div>\r\n```\r\n\r\n### ComponentRef \r\nAssuming that `Foo` is a component:\r\n```html\r\n<div [ngb-tooltip]=\"Foo\">\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/ng-bootstrap/core/issues/comments/225212997","html_url":"https://github.com/ng-bootstrap/core/issues/145#issuecomment-225212997","issue_url":"https://api.github.com/repos/ng-bootstrap/core/issues/145","id":225212997,"user":{"login":"pkozlowski-opensource","id":973550,"avatar_url":"https://avatars.githubusercontent.com/u/973550?v=3","gravatar_id":"","url":"https://api.github.com/users/pkozlowski-opensource","html_url":"https://github.com/pkozlowski-opensource","followers_url":"https://api.github.com/users/pkozlowski-opensource/followers","following_url":"https://api.github.com/users/pkozlowski-opensource/following{/other_user}","gists_url":"https://api.github.com/users/pkozlowski-opensource/gists{/gist_id}","starred_url":"https://api.github.com/users/pkozlowski-opensource/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkozlowski-opensource/subscriptions","organizations_url":"https://api.github.com/users/pkozlowski-opensource/orgs","repos_url":"https://api.github.com/users/pkozlowski-opensource/repos","events_url":"https://api.github.com/users/pkozlowski-opensource/events{/privacy}","received_events_url":"https://api.github.com/users/pkozlowski-opensource/received_events","type":"User","site_admin":false},"created_at":"2016-06-10T15:23:32Z","updated_at":"2016-06-10T15:23:32Z","body":"Things have moved on the ng2 side and the current proposal is to have:\r\n\r\n```javascript\r\n@Directive({\r\n    selector: '[ngbTooltip]'\r\n})\r\nexport class NgbTooltip {\r\n    @Input() ngbTooltip: string | TemplateRef;\r\n}\r\n```\r\n\r\nwhich means that a user could `<div ngbTooltip=\"Hey, turn around!\">` for simple string-based tooltips or \r\n\r\n```\r\n<template #ttipContent>\r\n   I'e got <b>HTML</b> and {{ng2Stuff}}.\r\n</template>\r\n<div [ngbTooltip]=\"ttipContent\">\r\n```\r\n\r\nfor more complex scenarios involving HTML and / or Angular directives / interpolation / bindings.\r\n\r\nGoing to close this one as I think this is a good API to work with. But if anyone has objections - speak up!"}}
{"actor":{"display_login":"pkozlowski-opensource"}}