Class DropdownController

A Tippy.js tooltip with interactive "dropdown" options.

Example

<div data-controller="w-dropdown" data-w-dropdown-hide-on-click-value-"true">
  <button type="button" data-w-dropdown-target="toggle" aria-label="Actions"></button>
  <div data-w-dropdown-target="content">[…]</div>
</div>

Hierarchy

Controller<HTMLElement>
- DropdownController

Constructors

constructor

new DropdownController(context: Context): DropdownController
Parameters
- context: Context
Returns DropdownController
Inherited from Controller<HTMLElement>.constructor
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:22

Properties

`Readonly`contentTarget

contentTarget: HTMLDivElement

`Readonly`context

context: Context

`Readonly`hasContentTarget

hasContentTarget: boolean

`Readonly`hasOffsetValue

hasOffsetValue: boolean

`Readonly`hideOnClickValue

hideOnClickValue: boolean

`Readonly`keepMountedValue

keepMountedValue: boolean

`Readonly`offsetValue

offsetValue: [number, number]

`Readonly`themeValue

themeValue: TippyTheme

`Optional`tippy

tippy?: Instance<Props>

`Readonly`toggleTarget

toggleTarget: HTMLButtonElement

`Static`blessings

blessings: (<T>(constructor: Constructor<T>) => any)[]

`Static`outlets

outlets: string[]

`Static`targets

targets: string[] = ...

`Static`values

values: {
    hideOnClick: { default: boolean; type: BooleanConstructor };
    keepMounted: { default: boolean; type: BooleanConstructor };
    offset: ArrayConstructor;
    theme: { default: TippyTheme; type: StringConstructor };
} = ...

Accessors

application

get application(): Application
Returns Application
Inherited from Controller.application
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:23

classes

get classes(): ClassMap
Returns ClassMap
Inherited from Controller.classes
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:29

data

get data(): DataMap
Returns DataMap
Inherited from Controller.data
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:30

element

get element(): ElementType
Returns ElementType
Inherited from Controller.element
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:25

hideTooltipOnClickAway

get hideTooltipOnClickAway(): {
fn: (instance: Instance) => { onHide(): void; onShow(): void };
name: string;
}
Hides tooltip on click away from the reference element. A custom implementation to replace tippy's default hideOnClick option, which doesn't play well with our datetime libraries (or others that render elements outside of the dropdown's DOM).

Returns { fn: (instance: Instance) => { onHide(): void; onShow(): void }; name: string }
- Defined in controllers/DropdownController.ts:254

identifier

get identifier(): string
Returns string
Inherited from Controller.identifier
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:26

options

get options(): Partial<Props>
Default Tippy Options

Returns Partial<Props>
- Defined in controllers/DropdownController.ts:134

outlets

get outlets(): OutletSet
Returns OutletSet
Inherited from Controller.outlets
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:28

plugins

get plugins(): {
    name: string;
    fn(
        instance: Instance,
    ):
        | { onHide?: undefined; onShow?: undefined }
        | { onHide: () => void; onShow: () => void };
}[]
Returns {
    name: string;
    fn(
        instance: Instance,
    ):
        | { onHide?: undefined; onShow?: undefined }
        | { onHide: () => void; onShow: () => void };
}[]
- Defined in controllers/DropdownController.ts:289

reference

get reference(): HTMLElement
Use a different reference element depending on the theme.

Returns HTMLElement
- Defined in controllers/DropdownController.ts:304

scope

get scope(): Scope
Returns Scope
Inherited from Controller.scope
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:24

targets

get targets(): TargetSet
Returns TargetSet
Inherited from Controller.targets
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:27

themeOptions

get themeOptions(): | {
    arrow: true;
    hideOnClick?: undefined;
    maxWidth: 350;
    placement: "bottom";
    plugins: {
        name: string;
        fn(
            instance: Instance,
        ):
            | { onHide?: undefined; onShow?: undefined }
            | { onHide: () => void; onShow: () => void };
    }[];
}
| {
    arrow: false;
    hideOnClick: false;
    maxWidth: "none";
    placement: "bottom-end";
    plugins: {
        name: string;
        fn(
            instance: Instance,
        ):
            | { onHide?: undefined; onShow?: undefined }
            | { onHide: () => void; onShow: () => void };
    }[];
}
| {
    arrow: false;
    hideOnClick?: undefined;
    maxWidth: "none";
    placement: "bottom-start";
    plugins: {
        name: string;
        fn(
            instance: Instance,
        ):
            | { onHide?: undefined; onShow?: undefined }
            | { onHide: () => void; onShow: () => void };
    }[];
}
Returns
    | {
        arrow: true;
        hideOnClick?: undefined;
        maxWidth: 350;
        placement: "bottom";
        plugins: {
            name: string;
            fn(
                instance: Instance,
            ):
                | { onHide?: undefined; onShow?: undefined }
                | { onHide: () => void; onShow: () => void };
        }[];
    }
    | {
        arrow: false;
        hideOnClick: false;
        maxWidth: "none";
        placement: "bottom-end";
        plugins: {
            name: string;
            fn(
                instance: Instance,
            ):
                | { onHide?: undefined; onShow?: undefined }
                | { onHide: () => void; onShow: () => void };
        }[];
    }
    | {
        arrow: false;
        hideOnClick?: undefined;
        maxWidth: "none";
        placement: "bottom-start";
        plugins: {
            name: string;
            fn(
                instance: Instance,
            ):
                | { onHide?: undefined; onShow?: undefined }
                | { onHide: () => void; onShow: () => void };
        }[];
    }
- Defined in controllers/DropdownController.ts:206

`Static`shouldLoad

get shouldLoad(): boolean
Returns boolean
Inherited from Controller.shouldLoad
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:19

Methods

connect

connect(): void
Returns void
Overrides Controller.connect
- Defined in controllers/DropdownController.ts:119

disconnect

disconnect(): void
Returns void
Overrides Controller.disconnect
- Defined in controllers/DropdownController.ts:311

dispatch

dispatch(
    eventName: string,
    __namedParameters?: Partial<
        {
            bubbles: boolean;
            cancelable: boolean;
            detail: Object;
            prefix: string;
            target: Element
            | Window
            | Document;
        },
    >,
): CustomEvent<Object>
Parameters
- eventName: string
- Optional__namedParameters: Partial<
      {
          bubbles: boolean;
          cancelable: boolean;
          detail: Object;
          prefix: string;
          target: Element
          | Window
          | Document;
      },
  >
Returns CustomEvent<Object>
Inherited from Controller.dispatch
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:34

hide

hide(): void
Returns void
- Defined in controllers/DropdownController.ts:123

initialize

initialize(): void
Returns void
Inherited from Controller.initialize
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:31

show

show(): void
Returns void
- Defined in controllers/DropdownController.ts:127

`Static`afterLoad

afterLoad(_identifier: string, _application: Application): void
Parameters
- _identifier: string
- _application: Application
Returns void
Inherited from Controller.afterLoad
- Defined in ../../node_modules/@hotwired/stimulus/dist/types/core/controller.d.ts:20

Class DropdownController

Example

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns DropdownController

Properties

ReadonlycontentTarget

Readonlycontext

ReadonlyhasContentTarget

ReadonlyhasOffsetValue

ReadonlyhideOnClickValue

ReadonlykeepMountedValue

ReadonlyoffsetValue

ReadonlythemeValue

Optionaltippy

ReadonlytoggleTarget

Staticblessings

Staticoutlets

Statictargets

Staticvalues

Accessors

application

Returns Application

classes

Returns ClassMap

data

Returns DataMap

element

Returns ElementType

hideTooltipOnClickAway

Returns { fn: (instance: Instance) => { onHide(): void; onShow(): void }; name: string }

identifier

Returns string

options

Returns Partial<Props>

outlets

Returns OutletSet

plugins

Returns { name: string; fn( instance: Instance, ): | { onHide?: undefined; onShow?: undefined } | { onHide: () => void; onShow: () => void };}[]

reference

Returns HTMLElement

scope

Returns Scope

targets

Returns TargetSet

themeOptions

StaticshouldLoad

Returns boolean

Methods

connect

Returns void

disconnect

Returns void

dispatch

Parameters

Returns CustomEvent<Object>

hide

Returns void

initialize

Returns void

show

Returns void

StaticafterLoad

Parameters

Returns void

Settings

On This Page

`Readonly`contentTarget

`Readonly`context

`Readonly`hasContentTarget

`Readonly`hasOffsetValue

`Readonly`hideOnClickValue

`Readonly`keepMountedValue

`Readonly`offsetValue

`Readonly`themeValue

`Optional`tippy

`Readonly`toggleTarget

`Static`blessings

`Static`outlets

`Static`targets

`Static`values

Returns {
name: string;
fn(
instance: Instance,
):
| { onHide?: undefined; onShow?: undefined }
| { onHide: () => void; onShow: () => void };
}[]

`Static`shouldLoad

`Static`afterLoad