NWD Tooltip Master (Rich Content) v1.26.0

Provide the ID that was assigned to the target element.

One plugin element serves one target at a time, and the field accepts a dynamic expression, so the same element can follow whichever target the page is dealing with: changing the ID moves the tooltip to the new target. Inside a repeating group, place Tooltip Master inside the cell and build the ID from the row, for example "tooltip-master-" plus the cell's index, so every cell gets its own tooltip instead of all of them pointing at the first cell. And a disabled element never triggers the tooltip, so point the plugin at a Group wrapping it.

Sets the tooltip content, static or dynamic, which can be plain text, HTML or BBCode according to the Content type property.

Sets how the content is processed. Plain text and BBCode are escaped, so they are safe for text typed by users. HTML is inserted as written: use it only with content you control, never with data typed by users.

• plain textescapes every HTML tag, so markup arrives as visible characters. Line breaks and spacing are kept. Safe by default.
• htmlrenders the content as HTML, which is what makes an iframe, a table or a styled block possible. Use it only with content you control, and sanitize anything that comes from your users before it reaches the tooltip.
• bbcodeescapes the HTML first and then converts more than 50 BBCode tags into markup, which gives formatting and embeds without opening the tooltip to raw HTML.

Sets the position of the tooltip relative to the reference element. The options auto, auto-start and auto-end adapt to the space available around the reference element choosing the side with most space.

• topabove the target element.
• top-startabove the target element, aligned to its start edge.
• top-endabove the target element, aligned to its end edge.
• rightto the right of the target element.
• right-startto the right of the target element, aligned to its start edge.
• right-endto the right of the target element, aligned to its end edge.
• bottombelow the target element.
• bottom-startbelow the target element, aligned to its start edge.
• bottom-endbelow the target element, aligned to its end edge.
• leftto the left of the target element.
• left-startto the left of the target element, aligned to its start edge.
• left-endto the left of the target element, aligned to its end edge.
• autopicks the side with the most space available around the target.
• auto-startpicks the side with the most space and aligns to the start edge when it fits.
• auto-endpicks the side with the most space and aligns to the end edge when it fits.

Enables the display of an indicative arrow in the tooltip, facing the reference element.

Sets the tooltip behavior, whether it should follow the mouse cursor and how it should follow.

• truethe tooltip follows the cursor on both axes.
• falsethe tooltip stays anchored to the target element.
• horizontalthe tooltip follows the cursor on the x axis only.
• verticalthe tooltip follows the cursor on the y axis only.
• initialthe tooltip follows the cursor until it is fully shown and then stops, which keeps the show delay working as written.

Sets whether the tooltip should snap to the reference element when displayed. This is not generally necessary, but is useful if the reference element's position is animating or to automatically update the tooltip position.

• truethe position is kept up to date against both the target element and the tooltip's own box.
• falsethe tooltip keeps the position it had when it was shown.
• referencethe tooltip follows only the target element, which is what you want when the target moves or is animated.
• popperthe position updates only when the tooltip itself changes size or layout, for example when its content grows.

This one costs performance. Turn it on only where the target really moves.

Enables a transition effect between movements or position updates to the tooltip when the position of the target element changes.

Worth turning on when the position jumps rather than drifts: the target moves, the page resizes, the target or the content changes size while the tooltip is open, or the cursor crosses the target quickly.

Avoid it together with Follow cursor on a hover trigger. The two update the position on every mouse move and the tooltip trembles instead of gliding.

Sets the animation type for showing/hiding the tooltip.

• fadefades in and out with no movement.
• shift-awayfades while moving slightly away from the target element.
• shift-away-subtlea softer shift away, with less movement.
• shift-away-extremea stronger shift away, with more noticeable movement.
• shift-towardfades while moving slightly toward the target element.
• shift-toward-subtlea softer shift toward, with less movement.
• shift-toward-extremea stronger shift toward, with more noticeable movement.
• scalescales in and out, like a zoom.
• scale-subtlea softer zoom, with a smaller scale change.
• scale-extremea stronger zoom, with a more dramatic scale change.
• perspectiveappears with a 3D perspective rotation.
• perspective-subtlea softer perspective, with a lighter rotation.
• perspective-extremea stronger perspective, with a more dramatic rotation.

Enables a fill effect animation for the tooltip background color. This property only works with "shift-away" animations.

While the fill effect is on, the arrow is not drawn, whatever Display arrow? says. The effect also needs one of the shift-away animations to be visible.

Enables a slingshot effect as a transition for the defined animation type.

Sets the animation duration (in milliseconds) to show the tooltip.

Sets the animation duration (in milliseconds) to hide the tooltip.

Sets the animation delay (in milliseconds) to show the tooltip.

A show delay is what keeps the tooltip from flashing while the cursor only crosses the element on its way somewhere else.

Sets the animation delay (in milliseconds) to hide the tooltip.

Enables the possibility of interacting with the content within the tooltip, in cases where it is necessary to hover or click on the content without closing the tooltip.

Sets the size (in pixels) of the invisible border around the tooltip, increasing the interactive area and preventing the tooltip from closing while the mouse is still within this interactive area (spatial alternative to keeping the tooltip visible).

This is the spatial way to keep the tooltip open: a wider invisible area around it, so a cursor travelling toward the tooltip never leaves the active region. Interactive debounce is the temporal way, and the two work together.

Sets the delay (in milliseconds) to hide the tooltip when the cursor leaves the interactive region. This is therefore a temporal alternative to enabling interaction with the tooltip, as opposed to the spatial alternative provided by the Interactive border property, although both can be used together.

This is the temporal way to keep the tooltip open: the hiding waits, so the cursor has time to reach the tooltip. Interactive border is the spatial way, and the two work together.

Sets a maximum width (in pixels) for the tooltip to prevent it from becoming too wide. If the viewport width is smaller than the set maximum width, the tooltip's internal settings ensure that it remains smaller than the screen.

Any Iframe fit mode other than none can override this value, because in those modes fitting the iframe is what decides the width.

Sets the responsiveness of the iframe on different screen sizes. As expected, these modes only applies when the tooltip content contains an Iframe.

• noneleaves the iframe size and behavior untouched. Max width then has to be set by hand, wide enough for the iframe.
• shrinkforces the iframe to fill the tooltip area available to it.
• expandexpands the tooltip to accommodate the iframe, keeping it responsive.
• scrollkeeps the iframe at its natural size and scrolls inside the tooltip when it does not fit.

Sets the skidding (in pixels) of the tooltip relative to its reference element.

Sets the distance (in pixels) of the tooltip relative to its reference element.

Sets the type of the event that will show/hide the tooltip. The trigger action is related to the action performed on the reference element and should be defined according to usability and device compatibility. For example, mouse hover actions behave differently on mobile devices, as the primary action on these devices is touch. Therefore, use the trigger that best suits your needs.

• mouseenter focusshows on hover, and also when the element receives keyboard focus with Tab. Hides when the hover ends or the focus moves away.
• clickshows on click and stays until the next click, with the exact behavior set by Hide on click.
• focusinshows when the element receives keyboard focus with Tab and stays while it keeps the focus. Hides when another element is focused.
• mouseenter clickshows on hover or on click, and hides when the hover ends or on the next click.

Sets the tooltip behavior when clicking the reference element for triggers that use the click event. For other trigger types, the behavior may not be as expected.

• trueclicking the target shows the tooltip, and clicking it again, or anywhere else on the page, hides it.
• falseclicking the target shows the tooltip and it stays visible.
• toggleclicking the target switches between shown and hidden, and a click elsewhere on the page does not close it.

Sets the tooltip display behavior on touch devices. If you are trying to test this on a desktop you probably won't be able to see the desired behavior since this property is targeted at mobile devices.

• truekeeps the default touch behavior: a tap on the target shows the tooltip.
• falseno tooltip on touch devices.
• holda short press and hold on the target shows the tooltip.
• hold long-pressonly a longer press and hold shows the tooltip.

The hold modes cannot be tested with a mouse: they wait for a touch gesture, so use a phone or the device emulation of your browser.

Disables the display of the tooltip. Ideal for use in cases where the tooltip needs to be conditionally disabled.

The tooltip is disabled, not removed: the target element and the layout stay exactly as they are, and nothing shows on hover or click until it is enabled again.

Sets the tooltip theme, which can be one of four predefined themes or a custom theme. All properties below can be configured in the custom theme. Only the custom theme follows color changes made by conditionals, such as a dark mode; the predefined themes come with fixed colors.

• customopens every appearance property below, from background and border to font, padding and arrow.
• lighta light theme, white background with a subtle shadow.
• light-borderthe light theme with a visible border around the tooltip.
• materiala darker background with an elevated shadow, in the Material Design register.
• translucentsemi-transparent, with a glass-like look that blends with what is behind it.

The four ready themes ignore the properties below. Switch to custom to take control of background, border, radius, shadow, padding, font, text alignment and arrow.

Sets the background color of the tooltip box.

Sets the spacing (in pixels) between the tooltip box border and the content area inside it.

Sets the border thickness (in pixels) of the tooltip box.

Sets the border color of the tooltip box.

Sets the border roundness (in pixels) of the tooltip box.

Sets the color of the shadow displayed around the tooltip box.

Sets the spread (in pixels) of the shadow displayed around the tooltip box.

Applies a glass-like visual effect to the tooltip (the effect is only noticeable if the background color is transparent).

The glass effect blurs whatever shows through the tooltip, so it is only visible when the background color is transparent or semi-transparent.

How much larger than its base size the arrow is drawn, in percent. 0 keeps the base size, and 50 draws the arrow 50% larger.

• 0
• 10
• 20
• 30
• 40
• 50
• 60
• 70
• 80
• 90
• 100

Sets the color of the tooltip arrow.

Sets the spacing (in pixels) between the tooltip text and the inner edges of its content area.

Sets the tooltip text size (in pixels).

Sets the tooltip text color.

Sets the horizontal alignment of the tooltip text.

• center
• left
• right
• justify