Skip to main content

tooltip_button

ironhtml_bootstrap::tooltip

Function tooltip_button 

Source 
pub fn tooltip_button(
    color: Color,
    text: &str,
    tooltip: &str,
    placement: Placement,
) -> Element<Button>
Expand description

Create a button with a tooltip.

ยงExample

use ironhtml_bootstrap::tooltip::{tooltip_button, Placement};
use ironhtml_bootstrap::Color;

let btn = tooltip_button(Color::Primary, "Hover me", "Tooltip text", Placement::Top);
assert!(btn.render().contains("data-bs-toggle=\"tooltip\""));
Examples found in repository?
examples/bootstrap_docs.rs (lines 1005-1010)
992fn tooltip_section() -> Element<Section> {
993    Element::<Section>::new()
994        .attr("id", "tooltips")
995        .class("mb-5")
996        .child::<H2, _>(|h| h.class("border-bottom pb-2").text("Tooltips"))
997        .child::<P, _>(|p| {
998            p.class("lead")
999                .text("Tooltips and popovers powered by CSS and JavaScript.")
1000        })
1001        .child::<H4, _>(|h| h.class("mt-4").text("Tooltips"))
1002        .child::<Div, _>(|d| {
1003            d.class("bd-example mb-3")
1004                .child::<Button, _>(|_| {
1005                    tooltip::tooltip_button(
1006                        Color::Secondary,
1007                        "Tooltip on top",
1008                        "Tooltip on top",
1009                        tooltip::Placement::Top,
1010                    )
1011                })
1012                .text(" ")
1013                .child::<Button, _>(|_| {
1014                    tooltip::tooltip_button(
1015                        Color::Secondary,
1016                        "Tooltip on right",
1017                        "Tooltip on right",
1018                        tooltip::Placement::Right,
1019                    )
1020                })
1021                .text(" ")
1022                .child::<Button, _>(|_| {
1023                    tooltip::tooltip_button(
1024                        Color::Secondary,
1025                        "Tooltip on bottom",
1026                        "Tooltip on bottom",
1027                        tooltip::Placement::Bottom,
1028                    )
1029                })
1030                .text(" ")
1031                .child::<Button, _>(|_| {
1032                    tooltip::tooltip_button(
1033                        Color::Secondary,
1034                        "Tooltip on left",
1035                        "Tooltip on left",
1036                        tooltip::Placement::Left,
1037                    )
1038                })
1039        })
1040        .child::<H4, _>(|h| h.class("mt-4").text("Popovers"))
1041        .child::<Div, _>(|d| {
1042            d.class("bd-example mb-3").child::<Button, _>(|_| {
1043                tooltip::popover_button(
1044                    Color::Danger,
1045                    "Click to toggle popover",
1046                    "Popover title",
1047                    "And here's some amazing content. It's very engaging.",
1048                    tooltip::Placement::Right,
1049                )
1050            })
1051        })
1052}