What's HTMLPLUS?Why HTMLPLUS?UI Components
HTMLPLUS

Tooltip
Experimental

It's the often used to specify extra information about something when the user moves the mouse pointer over an element (Hover or Focus).

Usage

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

API

PlusTooltip

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
animation
Type
"fade" | "perspective" | "perspective-extreme" | "perspective-subtle" | "scale" | "scale-extreme" | "scale-subtle" | "shift-away" | "shift-away-extreme" | "shift-away-subtle" | "shift-toward" | "shift-toward-extreme" | "shift-toward-subtle""fade" | "perspective" | "perspective-extreme" | "perspective-subtle" | "scale" | "scale-extreme" | "scale-subtle" | "shift-away" | "shift-away-extreme" | "shift-away-subtle" | "shift-toward" | "shift-toward-extreme" | "shift-toward-subtle"
Default
'fade'
Tooltip animation.
Name
appendTo
Type
anyany
Default
undefined
Tooltip append to a element.
Name
arrow
Type
"default" | "large" | "narrow" | "round" | "small" | "wide""default" | "large" | "narrow" | "round" | "small" | "wide"
Default
'default'
Tooltip arrow model.
Name
delay
Type
numbernumber
Default
undefined
Delay for show tooltip.
Name
disabled
Type
booleanboolean
Default
undefined
Tooltip disable.
Name
fixed
Type
booleanboolean
Default
undefined
Add fixed strategy to popper.
Name
flip
Type
booleanboolean
Default
undefined
Add fixed strategy to popper.
Name
placement
Type
"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start""auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"
Default
'auto'
How to position the tooltip.
Name
trigger
Type
"click" | "focus" | "hover" | TooltipTrigger[]"click" | "focus" | "hover" | TooltipTrigger[]
Default
['focus', 'hover']
How tooltip is triggered, include click, hover, focus.
Name
--plus-tooltip-background-color
TODO
Name
--plus-tooltip-border-radius
TODO
Name
--plus-tooltip-color
TODO
Name
--plus-tooltip-padding
TODO
Name
--plus-tooltip-z-index
TODO
Name
--plus-tooltip-animation-delay
TODO
Name
--plus-tooltip-max-width
TODO

Examples

Below is a collection of simple to complex examples.

Default

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Tooltip } from "@htmlplus/react";

const App = () => {
  return <>    
    <div className="center">      
      <button>
        Button
        <Tooltip>          Tooltip</Tooltip>        
      </button>      
    </div>    
  </>;
};

export default App;
.center {
  text-align: center;
}

Placement

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Tooltip } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid gutter="md">      
      <Grid.Item xs="12" sm="4">        
        <button>
          Top
          <Tooltip placement="top">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Top Start
          <Tooltip placement="top-start">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Top End
          <Tooltip placement="top-end">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Right
          <Tooltip placement="right">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Right Start
          <Tooltip placement="right-start">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Right End
          <Tooltip placement="right-end">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Bottom
          <Tooltip placement="bottom">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Bottom Start
          <Tooltip placement="bottom-start">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Bottom End
          <Tooltip placement="bottom-end">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Left
          <Tooltip placement="left">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Left Start
          <Tooltip placement="left-start">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item xs="12" sm="4">        
        <button>
          Left End
          <Tooltip placement="left-end">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
button {
  display: block;
  width: 100%;
  padding: 0.5rem;
}

Trigger

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Tooltip } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid justifyContent="evenly">      
      <Grid.Item>        
        <button>
          Hover
          <Tooltip trigger="hover">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item>        
        <button>
          Focus
          <Tooltip trigger="focus">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
      <Grid.Item>        
        <button>
          Click
          <Tooltip trigger="click">
            Tooltip
          </Tooltip>          
        </button>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
Contributors
Prev
Sticky
Next
Transition
SELECT YOUR FRAMEWORK
React logo
React
© 2020 HTMLPLUS. Released under MIT License.