Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-single-tooltip

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-single-tooltip - npm Package Compare versions

Comparing version 0.0.1-canary.3 to 0.0.1-canary.4

6

dist/index.d.ts

@@ -16,4 +16,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';

declare function SingleTooltip({ backgroundColor, zIndex, borderRadius, offset, padding, fontSize, color, maxWidth, trangleWidth, trangleHeight }: Props): react_jsx_runtime.JSX.Element;
declare function useTooltipRef<T extends HTMLElement | SVGSVGElement>(text: string, show?: boolean): (element: HTMLElement | SVGSVGElement | null) => void;
interface TooltipRef<T> {
(element: T | null): void;
current: T | null;
}
declare function useTooltipRef<T extends HTMLElement | SVGSVGElement>(text: string, show?: boolean): TooltipRef<T>;
export { SingleTooltip, SingleTooltip as default, useTooltipRef };

4

dist/index.js
"use client"
function P(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",o==="top"&&r.firstChild?r.insertBefore(s,r.firstChild):r.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}P(`.single-tooltip{position:fixed;display:flex;transform:translate(-50%);flex-direction:column}.single-tooltip--text{position:relative;width:-moz-max-content;width:max-content;max-width:360px;white-space:normal;word-break:break-all}@media (max-width: 640px){.single-tooltip--text{max-width:200px}}.single-tooltip--pointer{margin:0 auto}
`);import{useCallback as Y,useEffect as Z,useLayoutEffect as J,useRef as I,useState as g}from"react";function $(){if(typeof navigator=="undefined"||typeof window=="undefined")return!1;let t=navigator.userAgent||navigator.vendor||window.opera;return/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(t==null?void 0:t.substr(0,4))}function X(t){if(!(t instanceof HTMLElement||t instanceof SVGElement))return!1;let o=getComputedStyle(t);return["overflow","overflow-x","overflow-y"].some(r=>{let s=o.getPropertyValue(r);return s==="auto"||s==="scroll"})}var B=t=>{if(!t)return null;let o=t.parentElement;for(;o;){if(X(o))return o;o=o.parentElement}return null};import{jsx as T,jsxs as Q}from"react/jsx-runtime";var G=$(),v=-.3,V=()=>({setStyle:t=>{reportError("SingleTooltip has not been initialized yet!")},setTextStyle:t=>{},setPointerStyle:t=>{},setText:t=>{},hover:!1,current:null,scrollableParents:new Map,init:!1}),e=V();function se({backgroundColor:t="rgba(0, 0, 0, 0.8)",zIndex:o=99,borderRadius:r=12,offset:s=4,padding:n=12,fontSize:i=14,color:c="white",maxWidth:d,trangleWidth:l=16,trangleHeight:a=6}){let[b,x]=g(""),C=I(null),[R,D]=g({display:"none"}),[N,_]=g({display:"none"}),[q,L]=g({}),[F,z]=g({});return Z(()=>{e.init&&reportError("SingleTooltip can only be initialized once!");let u=m=>{D(m),_(m)};return e.setStyle=u,e.setTextStyle=L,e.setPointerStyle=z,e.setText=x,e.init=!0,()=>{Object.assign(e,V())}},[]),J(()=>{if(R.display!=="none"&&e.current){let{x:u,y:m,right:O,width:W}=C.current.getBoundingClientRect(),M=(W-2*r)/2-10,w=O-window.innerWidth;if(u>=0&&w<=0&&m>0)return;let{y:h,x:k,height:E,width:H}=e.current.getBoundingClientRect(),p=null,y=null,f=null;m<0&&(p={flexDirection:"column-reverse",top:h+E,left:k+H/2},f={transform:"rotate(180deg)",marginBottom:v}),u<0?-u>M?(p={flexDirection:"row-reverse",alignItems:"center",transform:"translate(0,-50%)",top:h+E/2,left:k+H},f={transform:"rotate(90deg)",margin:`0 ${(a-l)/2}px`,marginRight:(a-l)/2+v}):y={left:-u}:w>0&&(w>M?(p={flexDirection:"row",alignItems:"center",transform:"translate(0,-50%)",top:h+E/2,right:window.innerWidth-k},f={transform:"rotate(-90deg)",margin:`0 ${(a-l)/2}px`,marginLeft:(a-l)/2+v}):y={right:w}),p&&_(p),y&&L(y),f&&z(f)}},[R]),Q("div",{className:"single-tooltip",style:{...N,zIndex:o,position:"fixed",padding:s},children:[T("div",{ref:C,style:{...q,backgroundColor:t,borderRadius:r,padding:n,fontSize:i,color:c,maxWidth:d},className:"single-tooltip--text",children:b}),T("svg",{className:"single-tooltip--pointer",width:l,height:a,viewBox:`0 0 ${l} ${a}`,style:F,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:T("path",{d:`M0 0C${l/2*6.5/6} ${a*6.5/6},${l/2*5.5/6} ${a*6.5/6},${l} 0Z`,fill:t})})]})}var S=()=>{e.init&&e.hover&&(e.hover=!1,e.setStyle({display:"none"}),e.current=null)},j=()=>{if(e.hover&&e.current){let{y:t,x:o,width:r}=e.current.getBoundingClientRect();e.setTextStyle({}),e.setPointerStyle({}),e.setStyle({bottom:window.innerHeight-t,left:r/2+o})}};function A(t){e.scrollableParents.has(t)?e.scrollableParents.set(t,e.scrollableParents.get(t)+1):(t.addEventListener("scroll",j),e.scrollableParents.set(t,0))}function K(t){if(e.scrollableParents.has(t)){let o=e.scrollableParents.get(t);o>1?e.scrollableParents.set(t,o-1):(t.removeEventListener("scroll",j),e.scrollableParents.delete(t))}}A(window);function le(t,o=!0){let r=I(null),s=Y(n=>{if(r.current){let i=r.current;typeof i._st_clear=="function"&&(i._st_clear(),delete i._st_clear)}if(n&&o){let i=()=>{e.setTextStyle({}),e.setPointerStyle({}),e.setText(t),e.hover=!0,e.current=n;let{y:a,x:b,width:x}=n.getBoundingClientRect();e.setStyle({bottom:window.innerHeight-a,left:x/2+b}),e.setPointerStyle({marginTop:v})},c=()=>{(e.current===null||e.current!==n)&&(i(),setTimeout(()=>window.addEventListener("click",()=>e.current===n&&S(),{once:!0})))};G?n.addEventListener("click",c):(n.addEventListener("mouseenter",i),n.addEventListener("mouseleave",S));let d=B(n);d&&A(d);let l=()=>{G?n.removeEventListener("click",c):(n.removeEventListener("mouseenter",i),n.removeEventListener("mouseleave",S)),d&&K(d),e.current===n&&S()};n._st_clear=l}r.current=n},[o]);return new Proxy(s,{get(n,i,c){return i==="current"?r.current:Reflect.get(n,i,c)},set(n,i,c,d){return i==="current"&&(r.current=c),Reflect.set(n,i,c,d)}})}export{se as SingleTooltip,se as default,le as useTooltipRef};
function E(t,{insertAt:o}={}){if(!t||typeof document=="undefined")return;let r=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css",o==="top"&&r.firstChild?r.insertBefore(l,r.firstChild):r.appendChild(l),l.styleSheet?l.styleSheet.cssText=t:l.appendChild(document.createTextNode(t))}E(`.single-tooltip{position:fixed;display:flex;transform:translate(-50%);flex-direction:column}.single-tooltip--text{position:relative;width:-moz-max-content;width:max-content;max-width:360px;white-space:normal;word-break:break-all}@media (max-width: 640px){.single-tooltip--text{max-width:200px}}.single-tooltip--pointer{margin:0 auto}
`);import{useCallback as Y,useEffect as Z,useLayoutEffect as J,useRef as I,useState as g}from"react";function $(){if(typeof navigator=="undefined"||typeof window=="undefined")return!1;let t=navigator.userAgent||navigator.vendor||window.opera;return/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(t==null?void 0:t.substr(0,4))}function X(t){if(!(t instanceof HTMLElement||t instanceof SVGElement))return!1;let o=getComputedStyle(t);return["overflow","overflow-x","overflow-y"].some(r=>{let l=o.getPropertyValue(r);return l==="auto"||l==="scroll"})}var B=t=>{if(!t)return null;let o=t.parentElement;for(;o;){if(X(o))return o;o=o.parentElement}return null};import{jsx as P,jsxs as Q}from"react/jsx-runtime";var G=$(),v=-.3,V=()=>({setStyle:t=>{reportError("SingleTooltip has not been initialized yet!")},setTextStyle:t=>{},setPointerStyle:t=>{},setText:t=>{},hover:!1,current:null,scrollableParents:new Map,init:!1}),e=V();function le({backgroundColor:t="rgba(0, 0, 0, 0.8)",zIndex:o=99,borderRadius:r=12,offset:l=4,padding:n=12,fontSize:i=14,color:c="white",maxWidth:d,trangleWidth:s=16,trangleHeight:a=6}){let[b,x]=g(""),C=I(null),[R,D]=g({display:"none"}),[N,_]=g({display:"none"}),[q,L]=g({}),[F,z]=g({});return Z(()=>{e.init&&reportError("SingleTooltip can only be initialized once!");let u=m=>{D(m),_(m)};return e.setStyle=u,e.setTextStyle=L,e.setPointerStyle=z,e.setText=x,e.init=!0,()=>{Object.assign(e,V())}},[]),J(()=>{if(R.display!=="none"&&e.current){let{x:u,y:m,right:O,width:W}=C.current.getBoundingClientRect(),M=(W-2*r)/2-10,w=O-window.innerWidth;if(u>=0&&w<=0&&m>0)return;let{y:h,x:T,height:k,width:H}=e.current.getBoundingClientRect(),p=null,y=null,f=null;m<0&&(p={flexDirection:"column-reverse",top:h+k,left:T+H/2},f={transform:"rotate(180deg)",marginBottom:v}),u<0?-u>M?(p={flexDirection:"row-reverse",alignItems:"center",transform:"translate(0,-50%)",top:h+k/2,left:T+H},f={transform:"rotate(90deg)",margin:`0 ${(a-s)/2}px`,marginRight:(a-s)/2+v}):y={left:-u}:w>0&&(w>M?(p={flexDirection:"row",alignItems:"center",transform:"translate(0,-50%)",top:h+k/2,right:window.innerWidth-T},f={transform:"rotate(-90deg)",margin:`0 ${(a-s)/2}px`,marginLeft:(a-s)/2+v}):y={right:w}),p&&_(p),y&&L(y),f&&z(f)}},[R]),Q("div",{className:"single-tooltip",style:{...N,zIndex:o,position:"fixed",padding:l},children:[P("div",{ref:C,style:{...q,backgroundColor:t,borderRadius:r,padding:n,fontSize:i,color:c,maxWidth:d},className:"single-tooltip--text",children:b}),P("svg",{className:"single-tooltip--pointer",width:s,height:a,viewBox:`0 0 ${s} ${a}`,style:F,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:P("path",{d:`M0 0C${s/2*6.5/6} ${a*6.5/6},${s/2*5.5/6} ${a*6.5/6},${s} 0Z`,fill:t})})]})}var S=()=>{e.init&&e.hover&&(e.hover=!1,e.setStyle({display:"none"}),e.current=null)},j=()=>{if(e.hover&&e.current){let{y:t,x:o,width:r}=e.current.getBoundingClientRect();e.setTextStyle({}),e.setPointerStyle({}),e.setStyle({bottom:window.innerHeight-t,left:r/2+o})}};function A(t){e.scrollableParents.has(t)?e.scrollableParents.set(t,e.scrollableParents.get(t)+1):(t.addEventListener("scroll",j),e.scrollableParents.set(t,0))}function K(t){if(e.scrollableParents.has(t)){let o=e.scrollableParents.get(t);o>1?e.scrollableParents.set(t,o-1):(t.removeEventListener("scroll",j),e.scrollableParents.delete(t))}}A(window);function se(t,o=!0){let r=I(null),l=Y(n=>{if(r.current){let i=r.current;typeof i._st_clear=="function"&&(i._st_clear(),delete i._st_clear)}if(n&&o){let i=()=>{e.setTextStyle({}),e.setPointerStyle({}),e.setText(t),e.hover=!0,e.current=n;let{y:a,x:b,width:x}=n.getBoundingClientRect();e.setStyle({bottom:window.innerHeight-a,left:x/2+b}),e.setPointerStyle({marginTop:v})},c=()=>{(e.current===null||e.current!==n)&&(i(),setTimeout(()=>window.addEventListener("click",()=>e.current===n&&S(),{once:!0})))};G?n.addEventListener("click",c):(n.addEventListener("mouseenter",i),n.addEventListener("mouseleave",S));let d=B(n);d&&A(d);let s=()=>{G?n.removeEventListener("click",c):(n.removeEventListener("mouseenter",i),n.removeEventListener("mouseleave",S)),d&&K(d),e.current===n&&S()};n._st_clear=s}r.current=n},[o]);return new Proxy(l,{get(n,i,c){return i==="current"?r.current:Reflect.get(n,i,c)},set(n,i,c,d){return i==="current"&&(r.current=c),Reflect.set(n,i,c,d)}})}export{le as SingleTooltip,le as default,se as useTooltipRef};
//# sourceMappingURL=index.js.map
{
"name": "react-single-tooltip",
"version": "0.0.1-canary.3",
"version": "0.0.1-canary.4",
"type": "module",

@@ -5,0 +5,0 @@ "description": "A tiny tooltip component.",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc