ywana-core8 0.0.274 → 0.0.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.274",
+  "version": "0.0.275",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/html/tooltip-test.js

@@ -0,0 +1,13 @@
+import React, { useState } from 'react'
+import { Tooltip } from './tooltip'
+
+const TooltipTest = (prop) => {
+
+    return (
+        <>
+           <Tooltip text="role1" top="2rem" >
+               John Smith
+           </Tooltip>
+        </>
+    )
+}

package/src/html/tooltip.css

@@ -1,3 +1,18 @@
 .tooltip {
-    
+    position: relative;
+    cursor: pointer;
+}
+
+.tooltip-text {
+    display: none;
+}
+
+.tooltip:hover .tooltip-text {
+    display: block;
+    position: absolute;
+    border: solid 1px var(--divider-color);
+    background-color: var(--text-color-light);
+    color: var(--paper-color);
+    padding: .5rem;
+    border-radius: 4px;
 }

package/src/html/tooltip.js

@@ -6,12 +6,15 @@ import './tooltip.css'
  */
 export const Tooltip = (props) => {
 
-    const { text = "..." } = props
+    const { text = "...", top = "1rem", left = "1rem" } = props
+
+    const style = { top, left }
 
     return (
-        <ReactTooltip id="filters" effect="solid" className="tooltip">
-            <Text use="body2">{text}</Text>
-        </ReactTooltip>
+        <div className="tooltip" >
+            <span className="tooltip-text" style={style}>{text}</span>
+            {props.children}
+        </div>
     )
 
 }