{"id":14972450,"url":"https://github.com/cybertoothca/ember-cli-bootstrap3-tooltip","last_synced_at":"2025-10-26T19:31:25.875Z","repository":{"id":12567648,"uuid":"72168388","full_name":"cybertoothca/ember-cli-bootstrap3-tooltip","owner":"cybertoothca","description":"An EmberJs addon allowing you to quickly and conveniently create a Bootstrap3 Tooltip (https://getbootstrap.com/docs/3.3/javascript/#tooltips).","archived":false,"fork":false,"pushed_at":"2023-03-04T15:11:54.000Z","size":2553,"stargazers_count":0,"open_issues_count":18,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T22:51:15.193Z","etag":null,"topics":["bootstrap-tooltip","bootstrap3","bootstrap3-abbr","bootstrap3-cite","bootstrap3-span","bootstrap3-tooltip","cybertooth-io"],"latest_commit_sha":null,"homepage":"http://ember-cli-bootstrap3-tooltip.cybertooth.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cybertoothca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-28T03:01:21.000Z","updated_at":"2022-03-30T20:52:53.000Z","dependencies_parsed_at":"2024-09-23T11:40:47.545Z","dependency_job_id":null,"html_url":"https://github.com/cybertoothca/ember-cli-bootstrap3-tooltip","commit_stats":{"total_commits":131,"total_committers":7,"mean_commits":"18.714285714285715","dds":0.633587786259542,"last_synced_commit":"8b201351e251adf3643024d0ae48f3da125ecfb5"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-bootstrap3-tooltip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-bootstrap3-tooltip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-bootstrap3-tooltip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-bootstrap3-tooltip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cybertoothca","download_url":"https://codeload.github.com/cybertoothca/ember-cli-bootstrap3-tooltip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-tooltip","bootstrap3","bootstrap3-abbr","bootstrap3-cite","bootstrap3-span","bootstrap3-tooltip","cybertooth-io"],"created_at":"2024-09-24T13:46:56.419Z","updated_at":"2025-10-26T19:31:25.471Z","avatar_url":"https://github.com/cybertoothca.png","language":"JavaScript","readme":"# ember-cli-bootstrap3-tooltip\n\n[![npm version](http://badge.fury.io/js/ember-cli-date-textbox.svg)](http://badge.fury.io/js/ember-cli-date-textbox) ![downloads](https://img.shields.io/npm/dy/ember-cli-date-textbox.svg) [![Code Climate](http://codeclimate.com/github/cybertoothca/ember-cli-date-textbox/badges/gpa.svg)](http://codeclimate.com/github/cybertoothca/ember-cli-date-textbox)\n\n[![ember-observer-badge](http://emberobserver.com/badges/ember-cli-date-textbox.svg)](http://emberobserver.com/addons/ember-cli-date-textbox)\n\nThis addon allows you to quickly and conveniently create a [Bootstrap3 Tooltip](https://getbootstrap.com/docs/3.3/javascript/#tooltips).\n\n## Compatibility\n\n- Ember.js v2.18 or above\n- Ember CLI v2.13 or above\n- Node.js v8 or above\n\n## Installation\n\nThe following will install this addon:\n\n```\nember install ember-cli-bootstrap3-tooltip\n```\n\n### Dependencies\n\n- You must have Bootstrap 3.x installed in your Ember application. Feel free to use the\n  [ember-cli-bootstrap3-sass](http://emberobserver.com/addons/ember-cli-bootstrap3-sass)\n  addon to setup Bootstrap if you haven't already done so.\n- Tooltips require the _tooltip_ plugin to be included in your version of Bootstrap.\n\n## Demo\n\nThe demonstration web application can be found here:\n[http://ember-cli-bootstrap3-tooltip.cybertooth.io/](http://ember-cli-bootstrap3-tooltip.cybertooth.io/).\n\n## Usage\n\n### What Does This Addon Do?\n\nThis addon supplied the following _components_:\n\n- `twbs-abbr` - an `\u003cabbr\u003e` element whose title attribute is rendered\n  as a Bootstrap tooltip.\n- `twbs-button` - a `\u003cbutton\u003e` element whose title attribute is rendered\n  as a Bootstrap tooltip. Accepts all standard HTML5 attributes.\n- `twbs-cite` - a `\u003ccite\u003e` element whose title attribute is rendered\n  as a Bootstrap tooltip.\n- `twbs-i` - an `\u003ci\u003e` element whose title attribute is rendered\n  as a Bootstrap tooltip.\n- `twbs-span` - a `\u003cspan\u003e` element whose title attribute is rendered\n  as a Bootstrap tooltip. This is very convenient when you want to embed\n  a tooltip into `\u003ca\u003e`nchor or `\u003cbutton\u003e` elements.\n- `twbs-time` - a `\u003ctime\u003e` element whose title attribute is rendered\n  as a Bootstrap tooltip. Accepts the HTML5 `datetime` attribute.\n\n...and the following _mixin_:\n\n- `TwbsTooltip` - imported as\n  `import TwbsTooltip as 'ember-cli-bootstrap3-tooltip/mixins/twbs-tooltip'` and\n  can be added to new or existing components.\n\n### Components\n\n#### `{{twbs-abbr title=\"Some tooltip value\"}}`\n\nCreate an `\u003cabbr\u003e` element whose `title` property will be used to\ngenerate a tooltip.\n\n##### Arguments\n\n- _All of the properties listed in the `TwbsTooltip` mixin_.\n- `title` - the tooltip String.\n- `class` - any additional CSS classes (e.g. `initialism`)\n\n##### Examples\n\n[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)\n\n#### `{{twbs-button class=\"btn-default title=\"Some tooltip value\"}}`\n\nCreate a `\u003cbutton\u003e` element whose `title` property will be used to\ngenerate a tooltip.\n\n##### Arguments\n\n- _All of the properties listed in the `TwbsTooltip` mixin_.\n- _All HTML5 [button](https://www.w3schools.com/TAgs/tag_button.asp) attributes._\n- `title` - the tooltip String.\n- `class` - any additional CSS classes (e.g. `btn-default`)\n\n##### Examples\n\n[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)\n\n#### `{{twbs-cite title=\"Some tooltip value\"}}`\n\nCreate a `\u003ccite\u003e` element whose `title` property will be used to\ngenerate a tooltip.\n\n##### Arguments\n\n- _All of the properties listed in the `TwbsTooltip` mixin_.\n- `title` - the tooltip String.\n\n##### Examples\n\n[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)\n\n#### `{{twbs-i title=\"Some tooltip value\"}}`\n\nCreate an `\u003ci\u003e` element whose `title` property will be used to\ngenerate a tooltip.\n\n##### Arguments\n\n- _All of the properties listed in the `TwbsTooltip` mixin_.\n- `title` - the tooltip String.\n- `class` - any additional CSS classes (e.g. `fa fa-clock`)\n\n##### Examples\n\n[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)\n\n#### `{{twbs-span title=\"Some tooltip value\"}}`\n\nCreate an `\u003cspan\u003e` element whose `title` property will be used to\ngenerate a tooltip.\n\n##### Arguments\n\n- _All of the properties listed in the `TwbsTooltip` mixin_.\n- `title` - the tooltip String.\n\n##### Examples\n\n[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)\n\n#### `{{twbs-time datetime=\"2001-09-11T04:00:00.000Z\" title=\"Some tooltip value\"}}`\n\nCreate an `\u003ctime\u003e` element whose `title` property will be used to\ngenerate a tooltip.\n\n##### Arguments\n\n- _All of the properties listed in the `TwbsTooltip` mixin_.\n- _All HTML5 [time](https://www.w3schools.com/TAgs/tag_time.asp) attributes._\n- `title` - the tooltip String.\n\n##### Examples\n\n[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)\n\n#### `title` Component\n\nWhen you have a tooltip title that is another rendered component or some sort of dynamic content, use\nthe nested title component on any one of the above `twbs-*` tags.\n\nHere's an example from the [demo site](http://ember-cli-bootstrap3-tooltip.cybertooth.io/) of a clock\nicon with the current time changing in the tooltip:\n\n```hbs\n{{#twbs-i class='glyphicon glyphicon-time' placement='right' as |i|}}\n  {{#i.title}}{{clock.hour}}:{{clock.minute}}:{{clock.second}}{{/i.title}}\n{{/twbs-i}}\n```\n\n### Mixins\n\n#### `TwbsTooltip`\n\nCheck out the [Bootstrap Tooltip Options documentation](http://getbootstrap.com/javascript/#tooltips-options)\nas all have been exposed in this mixin, with the following cavaets:\n\n- The boolean options have been renamed to include\n  a question mark; e.g. `animation` is `animation?` and `html` is\n  `html?`.\n- For conveneince, the `delay` option has been enhanced to accept two\n  arguments: `delayHide` and `delayShow`.\n- `title` is changed to `defaultTitle` because\n  `title` is already used for the actual tooltip.\n- `container` and `trigger` is also renamed to `tooltipContainer`\n  and `tooltipTrigger` respectively to avoid a naming conflict with\n  Ember.\n\n##### Properties\n\n- `animation` - Readonly alias to `animation?`.\n- `animation?` - Apply a CSS fade transition to the tooltip (`boolean` defaults to `true`)\n- `defaultTitle` - Default title value if title attribute isn't present. If a function is given, it will be called with its this reference set to the element that the tooltip is attached to. (`String` defaults to ''; or a function)\n- `delayHide` - Delay hiding the tooltip (ms) - does not apply to manual trigger type (`number` defaults to 0)\n- `delayShow` - Delay showing the tooltip (ms) - does not apply to manual trigger type (`number` defaults to 0)\n- `html` - Readonly alias to `html?`.\n- `html?` - Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. (`boolean` defaults to `false`)\n- `placement` - How to position the tooltip: `top` | `bottom` | `left` | `right` | `auto`. When `auto` is specified, it will dynamically reorient the tooltip. For example, if placement is `auto left`, the tooltip will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance. (`String` defaulting to `top`; or a function)\n- `selector` - If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See [this](https://github.com/twbs/bootstrap/issues/4215) and an [informative example](http://jsbin.com/zopod/1/edit). (`String` defaults to `false`)\n- `template` - Base HTML to use when creating the tooltip. The tooltip's title will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class. (`String` defaults to `\u003cdiv class=\"tooltip\" role=\"tooltip\"\u003e\u003cdiv class=\"tooltip-arrow\"\u003e\u003c/div\u003e\u003cdiv class=\"tooltip-inner\"\u003e\u003c/div\u003e\u003c/div\u003e`)\n- `tooltipContainer` - Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. (`String` defaults to `false`)\n- `tooltipTrigger` - How tooltip is triggered: `click` | `hover` | `focus` | `manual`. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger. (`String` defaults to `'hover focus'`)\n- `viewport` - Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { \"selector\": \"#viewport\", \"padding\": 0 }. If a function is given, it is called with the triggering element DOM node as its only argument. The this context is set to the tooltip instance. (`String` or `Object` or function; defaulting to `{ selector: 'body', padding: 0 }`)\n\n### Troubleshooting And Tips\n\n1. If you have a title that is dynamic use the nested title component.\n1. Make sure the Bootstrap3 CSS and the tooltip Javascript plugin is installed.\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybertoothca%2Fember-cli-bootstrap3-tooltip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcybertoothca%2Fember-cli-bootstrap3-tooltip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybertoothca%2Fember-cli-bootstrap3-tooltip/lists"}