logo polydile dile-components

dile-tooltip

Web component to display a configurable tooltip.

Installation

npm install @dile/ui

In this package you also will find dile-chip-tooltip component.

Usage

Import the component.

import '@dile/ui/components/tooltip/tooltip';

Use the component.

<dile-tooltip tooltip="tooltip text" position="top" arrow fadeIn > Text </dile-tooltip>

Properties

The component has the properties bellow:

Styling

Custom property Description Default
--dile-tooltip-background-color The background color of the tooltip #e74c3c
--dile-tooltip-width The width of the tooltip 120px
--dile-tooltip-border-radius The border radius of the tooltip 6px
--dile-tooltip-padding The padding of the tooltip text 5px
--dile-tooltip-time-transition The time of transition of the animation if fadeIn sets true 1s
--dile-tooltip-font-size The font size of the tooltip 16px
--dile-tooltip-color The text color of the tooltip #fff
--dile-tooltip-text-align Text align for the tooltip center

dile-tooltip demos

Default tooltips

I have a top tooltip | I have a right tooltip | I have a left tooltip | I have a bottom tooltip
<style>
  dile-tooltip {
    color: #777;
  }
</style>
<dile-tooltip tooltip="tooltip text" position="top" fadeIn>I have a top tooltip</dile-tooltip> | 
<dile-tooltip tooltip="tooltip text" position="right" fadeIn>I have a right tooltip</dile-tooltip> | 
<dile-tooltip tooltip="tooltip text" position="left" fadeIn>I have a left tooltip</dile-tooltip> | 
<dile-tooltip tooltip="tooltip text" position="bottom" fadeIn>I have a bottom tooltip</dile-tooltip> 

Arrow tooltips

I have a top tooltip | I have a right tooltip | I have a left tooltip | I have a bottom tooltip
<dile-tooltip tooltip="tooltip text" position="top" fadeIn arrow>I have a top tooltip</dile-tooltip> | 
<dile-tooltip tooltip="tooltip text" position="right" fadeIn arrow>I have a right tooltip</dile-tooltip> | 
<dile-tooltip tooltip="tooltip text" position="left" fadeIn arrow>I have a left tooltip</dile-tooltip> | 
<dile-tooltip tooltip="tooltip text" position="bottom" fadeIn arrow>I have a bottom tooltip</dile-tooltip> 

Styled tooltips

I have a top tooltip | I have a right tooltip | I have a left tooltip | I have a bottom tooltip
<style>
.styled {
  --dile-tooltip-background-color: #cef;
  --dile-tooltip-color: #303030;
  --dile-tooltip-padding: 8px;
  --dile-tooltip-font-size: 1.1rem;
}
</style>
<dile-tooltip class="styled" tooltip="tooltip text" position="top" fadeIn arrow>I have a top tooltip</dile-tooltip> | 
<dile-tooltip class="styled" tooltip="tooltip text" position="right" fadeIn arrow>I have a right tooltip</dile-tooltip> | 
<dile-tooltip class="styled" tooltip="tooltip text" position="left" fadeIn arrow>I have a left tooltip</dile-tooltip> | 
<dile-tooltip class="styled" tooltip="tooltip text" position="bottom" fadeIn arrow>I have a bottom tooltip</dile-tooltip>