{"id":15295885,"url":"https://github.com/andreivictor/bootstrap-tooltip-custom-class","last_synced_at":"2025-07-28T09:37:12.713Z","repository":{"id":39773068,"uuid":"87624191","full_name":"andreivictor/bootstrap-tooltip-custom-class","owner":"andreivictor","description":"Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.","archived":false,"fork":false,"pushed_at":"2023-03-24T15:27:31.000Z","size":2232,"stargazers_count":17,"open_issues_count":6,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T09:12:28.490Z","etag":null,"topics":["bootstrap","bootstrap-3","bootstrap-4","bootstrap3","bootstrap4"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/andreivictor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-04-08T09:53:48.000Z","updated_at":"2025-03-10T20:28:16.000Z","dependencies_parsed_at":"2024-11-15T05:33:15.673Z","dependency_job_id":null,"html_url":"https://github.com/andreivictor/bootstrap-tooltip-custom-class","commit_stats":{"total_commits":68,"total_committers":3,"mean_commits":"22.666666666666668","dds":"0.19117647058823528","last_synced_commit":"7f3f3ee7899d249e717f881173df7eba82698f13"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreivictor%2Fbootstrap-tooltip-custom-class","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreivictor%2Fbootstrap-tooltip-custom-class/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreivictor%2Fbootstrap-tooltip-custom-class/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreivictor%2Fbootstrap-tooltip-custom-class/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreivictor","download_url":"https://codeload.github.com/andreivictor/bootstrap-tooltip-custom-class/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760529,"owners_count":21157376,"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","bootstrap-3","bootstrap-4","bootstrap3","bootstrap4"],"created_at":"2024-09-30T18:08:31.186Z","updated_at":"2025-04-13T18:33:57.798Z","avatar_url":"https://github.com/andreivictor.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Tooltip Custom Class\nExtends Bootstrap Tooltips and Popovers by adding custom classes. Available for **Bootstrap 3** and **Bootstrap 4**.\n\nDefine your own custom class or use the predefined custom classes: \n- tooltips: `.tooltip-primary`, `.tooltip-success`, `.tooltip-info`, `.tooltip-warning`, `.tooltip-danger`.\n- popovers: `.popover-primary`, `.popover-success`, `.popover-info`, `.popover-warning`, `.popover-danger`.\n\n![Bootstrap Tooltip Custom Class Preview](https://i.imgur.com/jxNbT5S.png)\n\n![Bootstrap Popover Custom Class Preview](https://i.imgur.com/FFUqwUq.png)\n\nIn **Bootstrap 4**, the predefined tooltips and popovers are built from the `$theme-colors` map, so there are 3 more custom classes:\n- tooltips: `.tooltip-secondary`, `.tooltip-light`, `.tooltip-dark`.\n- popovers: `.popover-secondary`, `.popover-light`, `.popover-dark`.\n\n\n## Installation\nTo install latest version via `npm` run:\n\n```\nnpm install bootstrap-tooltip-custom-class\n```\nor via `yarn` run:\n\n```\nyarn add bootstrap-tooltip-custom-class\n```\n\n## Setup\n\n**The implementations for [Tooltips][1] and [Popovers][2] are independent. You can include them together or you can use them separately.**\n\n**Use the appropriate files according to Bootstrap version that you use: `bootstrap-v3`, `bootstrap-v4` or `bootstrap-v4-alpha`.**\n\n### Tooltips\n\n#### CSS\nInclude `bootstrap-tooltip-custom-class.css` in your project or use the `.scss` file:\n```html\n\u003clink rel=\"stylesheet\" href=\"bootstrap-tooltip-custom-class.css\" media=\"all\" /\u003e\n```\n#### SASS:\n```sass\n@import \"bootstrap-tooltip-custom-class\";\n```\nUse the mixin `tooltip-custom` to create styles for your custom tooltip:\n````sass\n.tooltip-custom {\n  @include tooltip-custom(#f2653c, #fff);\n}\n````\n\n#### Less (only for Bootstrap v3):\n```less\n@import \"bootstrap-tooltip-custom-class.less\";\n```\nUse the mixin `tooltip-custom`:\n````less\n.tooltip-custom {\n  .tooltip-custom(#f2653c, #fff);\n}\n````\n\n#### Javascript\nInclude the script after Bootstrap's main javascript file:\n```html\n\u003cscript src=\"bootstrap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bootstrap-tooltip-custom-class.js\"\u003e\u003c/script\u003e\n```\n\n### Popovers\n#### CSS\nInclude `bootstrap-popover-custom-class.css` in your project or use the `.scss` file:\n```html\n\u003clink rel=\"stylesheet\" href=\"bootstrap-popover-custom-class.css\" media=\"all\" /\u003e\n```\n#### SASS:\n```sass\n@import \"bootstrap-popover-custom-class\";\n```\nUse the mixin `popover-custom` to create styles for your custom popover:\n````sass\n.popover-custom {\n  @include popover-custom(#f2653c, #fff);\n}\n````\n\n#### Less (only for Bootstrap v3):\n```less\n@import \"bootstrap-popover-custom-class.less\";\n```\nUse the mixin `popover-custom`:\n````less\n.popover-custom {\n  .popover-custom(#f2653c, #fff);\n}\n````\n\n#### Javascript\nInclude the script after Bootstrap's main javascript file:\n```html\n\u003cscript src=\"bootstrap.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bootstrap-popover-custom-class.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n- Use `data-custom-class` attribute:\n\n```html\n\u003cbutton type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"top\" data-custom-class=\"tooltip-custom\" title=\"Custom tooltip example\"\u003eTooltip example\u003c/button\u003e\n```\n```html\n\u003cbutton type=\"button\" class=\"btn btn-default\" data-toggle=\"popover\" data-placement=\"top\" data-custom-class=\"popover-custom\" title=\"Custom popover example\" data-content=\"Vivamus sagittis lacus vel augue laoreet\"\u003ePopover example\u003c/button\u003e\n```\n\nor\n\n- Use `customClass` parameter on plugin initialization:\n```javascript\n$(function () {\n  $('.has-tooltip').tooltip({\n    customClass: 'tooltip-custom'\n  });\n});\n```\n```javascript\n$(function () {\n  $('.has-popover').popover({\n    customClass: 'popover-custom'\n  });\n});\n```\n\n## Demo\n\n#### Local\nLocal demo files can be found in the `demo` folder of each project.\nFirst, execute the following instructions in the root:\n\n```\n$ npm install\n$ npm run install-#project_alias# (or) npm run install-all\n$ npm run build-#project_alias# (or) npm run build-all\n\n(project_alias = v3 / v4 / v4-alpha)\n```\n\n#### Online\n\n##### Tooltip\n- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/full/ayewjW)\n- Bootstrap v4-alpha: [Codepen](http://codepen.io/andreivictor/full/MpNQNL)\n- Bootstrap v3: [Codepen](https://codepen.io/andreivictor/full/gmNeJq)\n\n##### Popover\n- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/full/bGNZVVX)\n- Bootstrap v4-alpha: [Codepen](https://codepen.io/andreivictor/full/KKwEdXg)\n- Bootstrap v3: [Codepen](https://codepen.io/andreivictor/full/wvBOKJw)\n\n##### Tooltip + Popover\n- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/full/PoqwKNj)\n- Bootstrap v3: [Codepen](https://codepen.io/andreivictor/full/OJVPjEv)\n\n[1]: #tooltips\n[2]: #popovers\n\n\n## Integrations with other libraries\n\nFor the CSS part, this project can also be used with the following libraries:\n\n#### React Bootstrap [https://react-bootstrap.github.io/]: \n- Tooltips: https://codesandbox.io/s/react-bootstrap-with-bootstrap-tooltip-custom-class-n5x8u\n- Popovers: https://codesandbox.io/s/react-bootstrap-with-bootstrap-tooltip-custom-class-0erhx\n\n#### ngx-bootstrap [https://valor-software.com/ngx-bootstrap]\n- Tooltips: https://stackblitz.com/edit/angular-qibctz\n- Popovers: https://stackblitz.com/edit/angular-bpmfzc\n\n#### ng-bootstrap [https://ng-bootstrap.github.io/]\n- Tooltips: https://stackblitz.com/edit/angular-culnfu\n- Popovers: https://stackblitz.com/edit/angular-evxzym\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreivictor%2Fbootstrap-tooltip-custom-class","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreivictor%2Fbootstrap-tooltip-custom-class","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreivictor%2Fbootstrap-tooltip-custom-class/lists"}