Struct Tooltip 

pub struct Tooltip { /* private fields */ }

Tooltip component

Tooltip which is automatically shown when an element is focused or hovered.

Bootstrap’s tooltips depend on Popper, which assumes complete control of the DOM. Yew also assumes complete control of the DOM, so this can lead to unexpected behaviour whenever it reuses DOM components – so you can’t just use data-bs-toggle="tooltip".

This component is similar to react-bootstrap’s Tooltip component – it wires up Popper in a way that works nicely with Yew.

There are some similarities and differences between this component and Bootstrap’s in-built implementation:

• There’s no need to use bootstrap.bundle.min.js or popper.min.js. This component uses popper-rs, which comes with Popper.

• You can’t trigger or describe tooltips with data-bs-* attributes.

• The <Tooltip>’s content is set with the children property, which supports arbitrary HTML.

  It doesn’t support the sanitize, sanitizeFn or title attributes.

• Like Bootstrap, <Tooltip> is triggered by input focus and mouse hover by default.

  These triggers can be individually disabled, and you can control display manually instead.

  <Tooltip> does not support the click trigger – use input focus instead. This makes it possible to trigger tooltips when there is no pointing device available or it cannot be used.

• Like Bootstrap, tooltips exist in a shadow DOM (portal) outside of the normal page hierarchy.

  Unlike Bootstrap, the <Tooltip> is always present in the DOM, even when the tooltip is not displayed.

  A <Tooltip> needs to remain part of the DOM if it could be shown in a component. Use the show and disabled properties to control its display.

• When using a target which could be disabled and triggering on focus and/or on hover, you can prevent the tooltip from being displayed by setting the disabled property on the on the <Tooltip> as well. Otherwise, the target won’t fire an event to hide the tooltip when it loses focus or isn’t hovered.

  If you only ever trigger tooltips manually, then there’s no need to sync the disabled state.

• Like Bootstrap, if you want the tooltip to be displayed on focus or on hover on a disabled target, you’ll need to use a wrapper element.

Examples

Button with a tooltip, shown automatically on focus or hover:

use yew::prelude::*;
use yew_bootstrap::component::{Button, Tooltip};
use yew_bootstrap::util::Color;

fn test() -> Html {
    let btn_ref = NodeRef::default();
    html! {
        <>
            <Button style={Color::Primary} node_ref={btn_ref.clone()}>
                {"Button with tooltip"}
            </Button>
            <Tooltip target={btn_ref}>
                {"Tooltip for button."}
            </Tooltip>
        </>
    }
}

Trait Implementations

impl BaseComponent for Tooltip

where Self: 'static,

type Message = ()

The Component’s Message.

type Properties = TooltipProps

The Component’s Properties.

fn create(ctx: &Context<Self>) -> Self

Creates a component.

fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool

Updates component’s internal state.

fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool

React to changes of component properties.

fn view(&self, ctx: &Context<Self>) -> HtmlResult

Returns a component layout to be rendered.

fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)

Notified after a layout is rendered.

fn destroy(&mut self, _ctx: &Context<Self>)

Notified before a component is destroyed.

fn prepare_state(&self) -> Option<String>

Prepares the server-side state.

impl Debug for Tooltip

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl FunctionProvider for Tooltip

type Properties = TooltipProps

Properties for the Function Component.

fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult

Render the component. This function returns the Html to be rendered for the component.