Skip to content
Useful CSS houdini worklets
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots
README.md
index.html
paintworklet.js

README.md

css-houdini

Some helpful CSS snippets written in Houdini.

How to use

  1. Check compatibility: Check the "Paint API" row in the Houdini readiness table.
  2. Load the paint worklet CSS.paintWorklet.addModule('paintworklet.js').
  3. Use them in CSS!

1. Tooltip: (preview)

screenshot

Tip: You can inspect the preview page to see them in action and play around with them.

Usage

<span>This is a tip</span>
<style>
  span {
    background-image: paint(tooltip);  /* Apply the tooltip paint rule */
    /* ... Optional: customize variables (see below) and other normal CSS for positioning, etc. */
  }
</style>

<!-- Import the CSS Houdini -->
<script>CSS.paintWorklet.addModule('paintworklet.js');</script>

Customizable CSS variables

Name Meaning Value
--direction Direction of the triangle 'top'/'bottom'/'left'/'right', default: 'left'
--position Position of the triangle on the rectangle edge number 0 - 100 (percentage), or a keyword 'center', default: center
--triangle-size The length of the long edge of the pointing triangle number, default: 16
--round-radius Corner radius of the rectangle in pixels number, default: 5
--background-color Background color color, default: #fff
--border-width Border width number, default: 0
--border-color Border color color, default: #000
You can’t perform that action at this time.