{"id":20645506,"url":"https://github.com/pedrohenriques/css_js_tooltips","last_synced_at":"2025-07-29T10:05:13.849Z","repository":{"id":91937337,"uuid":"58865052","full_name":"PedroHenriques/CSS_JS_ToolTips","owner":"PedroHenriques","description":"CSS \u0026 JS ToolTips - Dynamic and Completely Customizable","archived":false,"fork":false,"pushed_at":"2016-05-15T16:51:26.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T12:31:40.293Z","etag":null,"topics":["css-tooltips","tooltip","web-tooltip"],"latest_commit_sha":null,"homepage":"http://www.pedrojhenriques.com/samples/CSS_JS_ToolTips/","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/PedroHenriques.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":"2016-05-15T14:09:01.000Z","updated_at":"2017-05-07T16:53:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5c60d12-a3fc-4955-b190-b1615d16881a","html_url":"https://github.com/PedroHenriques/CSS_JS_ToolTips","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PedroHenriques/CSS_JS_ToolTips","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroHenriques%2FCSS_JS_ToolTips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroHenriques%2FCSS_JS_ToolTips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroHenriques%2FCSS_JS_ToolTips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroHenriques%2FCSS_JS_ToolTips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PedroHenriques","download_url":"https://codeload.github.com/PedroHenriques/CSS_JS_ToolTips/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroHenriques%2FCSS_JS_ToolTips/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267668315,"owners_count":24124963,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css-tooltips","tooltip","web-tooltip"],"created_at":"2024-11-16T16:20:10.004Z","updated_at":"2025-07-29T10:05:13.820Z","avatar_url":"https://github.com/PedroHenriques.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS \u0026 JS ToolTips - Dynamic and Completely Customizable\n\nAn easy to use ToolTip, built in CSS and JS, that will be dynamically positioned and can be fully customizable by you.\n\nThe code will show the tooltip when an HTML element is hovered over and will dynamically adjust the tooltip's position and size to make sure it fits the viewport.\n\nYou can find a **DEMO** at [www.pedrojhenriques.com/samples/CSS_JS_ToolTips](http://www.pedrojhenriques.com/samples/CSS_JS_ToolTips/).\n\n## Instructions\n\n### Setup\n\n1. Copy the `tooltips.css` and `tooltips.js` files into your project, or their respective minimized versions.\n2. Add a link to the CSS file inside the `\u003chead\u003e\u003c/head\u003e` tags, on the webpages you wish to use the tooltips, using `\u003clink rel='stylesheet' type='text/css' href='path/to/tooltips.css'/\u003e`.\n3. Add a link to the JS file and call the starting function before the `\u003c/body\u003e` tag, on the webpages you wish to use the tooltips, using `\u003cscript type='text/javascript' src='path/to/tooltips.js'\u003e\u003c/script\u003e\n\u003cscript\u003eaddTooltipEventListeners();\u003c/script\u003e`.\n\n### Using the ToolTips\n\nIn order to use the tooltips, add the `tooltip` css class to a wrapper html element (NOTE: this HTML element must be able to have inner HTML elements. If need be create a span element for this purpose).\n\nThen create another HTML element, inside the wrapper element, with the `tooltip_text` css class. Inside this element insert the text you want displayed on the tooltip.\n\nAs an example, the following code will use the default tooltip:\n```\n\u003cspan class=\"tooltip\"\u003e\n\t\u003cspan class=\"tooltip_text\"\u003eTooltip text goes here!\u003c/span\u003e\n\tHover Me!\n\u003c/span\u003e\n```\nOn the webpage there will be the text `Hover Me!` that will trigger the tooltip.\n\nIf you want to, it's possible to have an arrow pointing to where the tooltip is coming from.  \nTo display the arrow, add the `with_arrow` css class to the wrapper element.  \nAs an example:\n```\n\u003cspan class=\"tooltip with_arrow\"\u003e\n\t\u003cspan class=\"tooltip_text\"\u003eTooltip text goes here!\u003c/span\u003e\n\tHover Me!\n\u003c/span\u003e\n```\n\nThe arrow's color will be the same as the tooltip_text's border color.\n\n### Customizing the ToolTips\n\n**Changing the tooltip's text style**\n\nThese tooltips are completely customizable by you.  \nIn order to change the style of the tooltip, add to the HTML element with the `tooltip_text` css class your own custom css classes.\n\nAs an example, the tooltip\n```\n\u003cspan class=\"tooltip with_arrow\"\u003e\n\t\u003cspan class=\"tooltip_text alt_style\"\u003eTooltip text goes here!\u003c/span\u003e\n\tHover Me!\n\u003c/span\u003e\n```\nwill use whatever styles are set for the custom `alt_style` css class.\n\n**Using icons as the triggers for the tooltips**\n\nThis repository comes with 2 icons and their respective CSS code, which serve as an example of how to set up icons as the tooltip triggers.\n\nCreate a CSS class with the `after` pseudo-element and set its `content` css property to the icon's url.\n\nAs an example, the information icon that is available with this repository has the following CSS:\n```\n.tooltip_info:after {\n\tcursor: help;\n\tcontent: url(\"path/to/info.png\");\n}\n```\n\nAnd to use it:\n```\n\u003cspan class=\"tooltip tooltip_info\"\u003e\n\t\u003cspan class=\"tooltip_text\"\u003eTooltip text goes here!\u003c/span\u003e\n\u003c/span\u003e\n```\nNote that there is no need to have any text to hover over, since there will be an icon instead.\n\n### Demo\n\nA demo can be found at [www.pedrojhenriques.com/samples/CSS_JS_ToolTips](http://www.pedrojhenriques.com/samples/CSS_JS_ToolTips/).\n\n## Technical Information\n\n### Placement of the ToolTip\n\nBy default the tooltip will be placed below the respective wrapper element and aligned with it's west border.  \n\nHowever, if there isn't enough space on the viewport for the default placement, the code will try moving the tooltip around the wrapper element to check if it fits on the viewport.  \nIf no position can be found, then the tooltip will try using the entire viewport width, i.e., it will no longer be aligned with the wrapper element's west border.  \nIf it still doesn't fit the viewport, then the code will start reducing the font size of the tooltip text until it either fits or the font size reaches 1px.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrohenriques%2Fcss_js_tooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedrohenriques%2Fcss_js_tooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrohenriques%2Fcss_js_tooltips/lists"}