Solid Trigger Component
Include the default styling and then:
import { render } from "solid-js/web";
import Trigger from "solid-trigger";
function HelloWorld() {
return <div>Hello World!</div>;
}
function Button() {
return <div>button</div>;
}
render(
() => (
<Trigger popup={<HelloWorld />}>
<Button />
</Trigger>
),
document.getElementById("app")
);
name | type | default | description |
---|---|---|---|
open | Boolean | whether popup is open | |
defaultOpen | Boolean | whether popup is open initially | |
disabled | Boolean | false | Whether to disable |
popup | JSX.Element | popup content | |
placement | string | popup position | |
showArrow | Boolean | false | whether arrow is open |
offset | number | 12 | offset of the popup |
class | string | ||
style | JSX.CSSProperties | ||
trigger | enum | hover | How should the popup be triggered (to show) |
strategy | enum | fixed | |
mouseEnterDelay | number | 100 | Delay in seconds, before popup is shown on mouse enter |
mouseLeaveDelay | number | 100 | Delay in seconds, before tooltip is hidden on mouse leave |
onOpenChange | Function | Callback executed when visibility of the popup is changed | |
background | string | Background color of popup | |
transition | Object | Pop-up animation effect | |
zIndex | number | popup's zIndex |
solid-trigger is released under the MIT license.