Themeable Tooltip In Pure CSS – themable-css-tooltip.css

Category: CSS & CSS3 , Tooltip | October 15, 2018
Views Total:228 views
Official Page:Go to website
Last Update:October 15, 2018


Themeable Tooltip In Pure CSS – themable-css-tooltip.css


The themable-css-tooltip.css lets you create simple, clean, animated, and customizable tooltips using pure CSS/CSS3.

How to use it:

Download and import the themable-css-tooltip.css into the document.

<link href="themable-css-tooltip.css" rel="stylesheet">

Add the CSS class ‘tooltip’ to any element the tooltip will be appended to.

<div class="tooltip">
  Hover Me

Add text content to the tooltip using the ‘alt’ attribute.

<div class="tooltip"
     title="Tooltip here">
     Hover Me

Apply built-in themes to the tooltip using the following classes.

  • .fixed: fixed width
  • .sticky: sticky tooltip
  • .mini: mini tooltip
  • .round: rounded borders
  • .border: shows borders
  • .north: shown on the top
  • .east: shown on the right
  • .south: shown on the bottom
  • .west: shown on the left

Feel free to change the default variables to create your own styles.

.tooltip {
  --tooltip-spacing-base: 2px;
  --tooltip-multiline-width: 20em;
  --tooltip-font-size: 14px;
  --tooltip-font-family: Arial, 'Helvetica', sans;
  --tooltip-background-color: #303030;
  --tooltip-border-color: #40a6ff;
  --tooltip-border-width: var(--tooltip-spacing-base);
  --tooltip-border-style: solid;
  --tooltip-border-radius: calc(var(--tooltip-spacing-base) * 4);
  --tooltip-shadow-color: rgba(0, 0, 0, 0.8);
  --tooltip-shadow-x: 0px;
  --tooltip-shadow-y: 0px;
  --tooltip-shadow-blur: 5px;
  --tooltip-shadow-spread: 0px;
  --tooltip-color: #DCDCDC;
  --tooltip-triangle-size: 8px;
  --tooltip-padding-vertical: calc(var(--tooltip-spacing-base) * 6);
  --tooltip-padding-horizontal: calc(var(--tooltip-spacing-base) * 12);



  • adding willchange

You Might Be Interested In:

Leave a Reply