29:null 2a:["$","title",null,{"children":"Tippify | Adam Krawitz | Observable"}] 2f:T672,## Parameters The tippify function is called like this: ~~~js tippify({delegate = 'body', target = '[data-tippy-content]', ...}) ~~~ which returns a Promise that resolves to a [Tippy.js Instance or array of Instances](https://atomiks.github.io/tippyjs/v6/tippy-instance/), as returned by Tippy.js's [delegate](https://atomiks.github.io/tippyjs/v6/addons/#return-type) function. * delegate specifies which HTML element or elements will handle creation of the tooltips. It will be used as the `targets` argument to Tippy.js [delegate()](https://atomiks.github.io/tippyjs/v6/addons/#event-delegation). As with the target types for the Tippy.js [constructor](https://atomiks.github.io/tippyjs/v6/constructor/#target-types), it can be a String specifying a CSS selector, an HTML Element, an array of HTML Elements, or a NodeList. It defaults to `'body'`, which selects the HTML `` tag. * target specifies which HTML elements will receive tooltips. It is a String specifying a CSS selector. It will be used as the `target` prop for Tippy.js [delegate()](https://atomiks.github.io/tippyjs/v6/addons/#usage-1). It defaults to `'[data-tippy-content]'`, which will select every element with a data-tippy-content attribute. * ...<props> indicates that an arbitrary number of additional [Tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/) can be passed in. These will be applied to every tooltip, unless an individual element overrides one with the corresponding data-tippy-* attribute.30:T478,tippify = async function({delegate = 'body', target = '[data-tippy-content]', ...props} = {}) { // Load animations const animations = ['perspective', 'scale', 'shift-away', 'shift-toward']; const variants = ['', '-subtle', '-extreme']; const animationCss = (await Promise.all(animations.map(async (animation) => { return await Promise.all(variants.map(async (variant) => { return await (await fetch(`https://unpkg.com/tippy.js@6/animations/${animation}${variant}.css`)).text(); })); }))).flat(); // Load themes const themes = ['light', 'light-border', 'material', 'translucent']; const themeCss = await Promise.all(themes.map(async (theme) => { return await (await fetch(`https://unpkg.com/tippy.js@6/themes/${theme}.css`)).text(); })); // Add animations and themes to page document.head.insertAdjacentHTML("beforeend", ``) // Setup Tippy.js delegation! const delegates = tippyJs.delegate(delegate, {target, ...props}); invalidation.then(() => { delegates.forEach((delegate) => { console.log('destroy'); delegate.destroy(); }); }); return delegates; }31:[] 2d:{"id":"c09f583ebaed377f","slug":"tippify","title":"Tippify","thumbnail":"97521859c413a8996be3ff82816237a155aa0d331b3aac307e0751ab2e008d04","access_level":"public","create_time":"$D2021-11-27T21:41:31.313Z","update_time":"$D2023-06-01T18:40:05.700Z","view_time":null,"first_public_time":"$D2021-11-28T03:06:52.830Z","has_unpublished_edits":null,"fork":{"id":"85754a359a5585bc","slug":"pleasant-colors","title":"Pleasant Colors","owner":{"id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024"},"version":518,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null}],"members":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"bb4f3dd51b3bc8ff","slug":"shared-resources","title":"Shared Resources","owner":{"id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz"}},"type":"notebook","body":{"titling":"auto","title":"Tippify","cells":[{"id":0,"value":"# Tippify\nEnable beautiful touch-friendly tooltips with a single call to tippify. Thank you [Tippy.js](https://atomiks.github.io/tippyjs/)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## Usage\nTo use the tippify function you need to `import` it from this notebook:\n~~~js\n import {tippify} from '@akrawitz/tippify'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Then activate tooltips as simply as this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"tippify()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"And now any HTML tag with a data-tippy-content attribute will display a tooltip:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"Any standard [Tippy.js prop](https://atomiks.github.io/tippyjs/v6/all-props/) can be applied to a tooltip using a data-tippy-* attribute:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"Interesting.","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"If you want to apply [Tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/) to *all* of your tooltips, then it's easier to pass them in when you call tippify (props in HTML attributes will override these defaults):\n~~~js\n tippify({duration: [5000, 5000], placement: 'right'})\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"By default, the handling of tooltips is delegated to the HTML `` tag, so that tooltips can be used anywhere in the notebook. You can provide a different delegate or group of delegates by passing in a delegate parameter:\n~~~js\n tippify({delegate: 'div'})\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"And while, by default, any element with a data-tippy-content attribute will get a tooltip, you can specify a different CSS selector to pick out elements with a target parameter:\n~~~js\n tippify({target: '.tooltip'})\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":475,"value":"Once you've called tippify somewhere in your notebook, you can add tooltips to HTML or SVG like this:\n~~~html\n Stuff\n~~~\nwhere the value of data-tippy-content is what will show up in the tooltip.\n\nOther [Tippy.js props](https://atomiks.github.io/tippyjs/v6/all-props/) can be set like this:\n~~~html\n Stuff\n~~~\nwhere {prop} should be replaced with the name of the prop in kebab case. For example, for the `animation` prop use data-tippy-animation, or for the `followCursor` prop use data-tippy-follow-cursor.\n\n**Note:** I've preloaded the Tippy.js [included themes](https://atomiks.github.io/tippyjs/v6/themes/) and [included animations](https://atomiks.github.io/tippyjs/v6/animations/), so they can be used without any further effort.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"## Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Load [Tippy.js](https://atomiks.github.io/tippyjs/), \"the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tippyJs = require('tippy.js@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2e:"$2d:body"