{"id":13998540,"url":"https://github.com/AdamJaggard/text-tip","last_synced_at":"2025-07-23T06:32:05.454Z","repository":{"id":47986476,"uuid":"196836602","full_name":"AdamJaggard/text-tip","owner":"AdamJaggard","description":"TextTip is a customisable JavaScript text selection tooltip library with zero dependencies.","archived":false,"fork":false,"pushed_at":"2023-01-07T08:12:05.000Z","size":1752,"stargazers_count":8,"open_issues_count":18,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-08-10T19:17:12.536Z","etag":null,"topics":["javascript","javascript-library","text-selection","tooltip"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/AdamJaggard.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}},"created_at":"2019-07-14T12:56:44.000Z","updated_at":"2024-03-04T15:19:37.000Z","dependencies_parsed_at":"2023-02-06T15:46:29.254Z","dependency_job_id":null,"html_url":"https://github.com/AdamJaggard/text-tip","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamJaggard%2Ftext-tip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamJaggard%2Ftext-tip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamJaggard%2Ftext-tip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdamJaggard%2Ftext-tip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdamJaggard","download_url":"https://codeload.github.com/AdamJaggard/text-tip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227245184,"owners_count":17753239,"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":["javascript","javascript-library","text-selection","tooltip"],"created_at":"2024-08-09T19:01:45.839Z","updated_at":"2024-11-30T00:31:41.949Z","avatar_url":"https://github.com/AdamJaggard.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/AdamJaggard/text-tip/master/img/logo.png\" alt=\"TextTip logo\" width=\"200\"\u003e\n\n# TextTip - Tooltips for selected text\n\n\u003cimg src=\"https://raw.githubusercontent.com/AdamJaggard/text-tip/master/img/texttip.gif\" alt=\"TextTip example\" width=\"300\"\u003e\n\n## Currently in beta but usable. Testing needed.\n\nTextTip is a JavaScript text selection tooltip library with no dependencies.\n\nYou can use TextTip to show a list of buttons when text is selected on a page. You can choose which blocks of text trigger the tooltip, how short or long the selection must be in order for it to show and other options. TextTip comes with no icons out of the box, these must be provided.\n\n## Installing\n\nGo to [releases](https://github.com/AdamJaggard/text-tip/releases) and download the files you need.\n\nWith a script tag\n\n```javascript\n\u003cscript src=\"TextTip.js\"\u003e\u003c/script\u003e\n```\n\nInclude the css too\n```html\n\u003clink rel=\"stylesheet\" href=\"TextTip.css\"\u003e\n```\n\nThe library is built as a UMD module so should also work with CommonJS (Require) AMD, etc, just require 'TextTip'.\n\n## How to use\n\n### Minimum setup\n\nTriggered by any text selection on the page. `buttons` are required. `icon` is a url to an image file by default.\n\n```javascript\nconst tooltip = new TextTip({\n\tbuttons: [\n\t\t{title: 'Button 1', icon: 'icon1.svg', callback: callbackFunction},\n\t\t{title: 'Button 2', icon: 'icon2.svg', callback: callbackFunction},\n\t]\n});\n```\n\n### Scope\n\nScope lets you choose which blocks of text will trigger the tooltip. Selections beginning or ending outside of the scope will not trigger the tooltip. The selection must fall within the scope specified.\n\n```javascript\nconst tooltip = new TextTip({\n\tscope: '.main-text',\n\tbuttons: [\n\t\t{title: 'Button 1', icon: 'icon1.svg', callback: callbackFunction},\n\t\t{title: 'Button 2', icon: 'icon2.svg', callback: callbackFunction},\n\t]\n});\n```\n\n### Icons\n\nIcons can be provided in three different formats. Either as a `url`, `svgsprite` or `font` depending on what kind of icon system you are using. Use the `iconFormat` property to specify which format you plan to supply in the buttons array.\n\n```javascript\nconst tooltip = new TextTip({\n\ticonFormat: 'url',\n\tbuttons: [\n\t\t{title: 'Button 1', icon: 'icon1.svg', callback: callbackFunction},\n\t]\n});\n\nconst tooltip2 = new TextTip({\n\ticonFormat: 'svgsprite',\n\tbuttons: [\n\t\t{title: 'Button 1', icon: 'path/to/sprites.svg#icon-name', callback: callbackFunction},\n\t]\n});\n\nconst tooltip3 = new TextTip({\n\ticonFormat: 'font',\n\tbuttons: [\n\t\t{title: 'Button 1', icon: 'fa fa-heart', callback: callbackFunction},\n\t]\n});\n```\n\n## All options\n\n```javascript\n{\n\tscope: HTMLElement | string,\n\t// Optional - A single Element or a selector string\n\t// Default - 'body'\n\n\tminLength: number,\n\t// Optional - Minimum length selection should be before triggering the tooltip\n\t// Default - 0\n\n\tmaxLength: number,\n\t// Optional - Maximum length selection should be before triggering the tooltip\n\t// Default - Infinity\n\n\ticonFormat: 'url' | 'svgsprite' | 'font',\n\t// Optional - What format you will be supplying icons in\n\n\tbuttons: [{title: string, icon: string, callback: Function},...],\n\t// Required - Array of button objects to show in the tooltip\n\t// icon is relative to iconFormat option\n\t// if iconFormat is 'url' - icon should be a path to an image file, png, svg, etc.\n\t// if iconFormat is 'svgsprite' - icon should be a path to an svg sprite file with an icon id\n\t//     e.g. 'path/to/sprites.svg#icon-name'\n\t// if iconFormat is 'font' - icon shoud be a string of class names that the icon font uses\n\t//     e.g. 'fa fa-heart'.\n\n\ttheme: 'none' | 'default',\n\t// Optional - Use 'none' if you wish to style the tooltip yourself\n\t// Default - 'default'\n\n\tmobileOSBehaviour: 'hide' | 'normal',\n\t// Optional - Because of native tooltips, the default behaviour is not to show to avoid conflicts\n\t// Default - 'hide'\n\n\ton: {\n\t\tshow: Function,\n\t\thide: Function\n\t}\n\t// Optional - Callbacks for when the tooltip is shown and hidden\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdamJaggard%2Ftext-tip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAdamJaggard%2Ftext-tip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAdamJaggard%2Ftext-tip/lists"}