Skip to content

Commit

Permalink
Make buttons with tooltips different colours, reformat some examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@micolous
micolous committed Sep 8, 2024
1 parent 7028f3f commit 8b16117
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 34 deletions.
60 changes: 34 additions & 26 deletions examples/basics/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -381,31 +381,37 @@ impl Component for Model {
{"Open the Forms example on "}{BI::GITHUB}{" GitHub"}
</Tooltip>
<h2>{"Buttons with tooltips (on focus or hover)"}</h2>
{
for [
Placement::Top,
Placement::Bottom,
Placement::Left,
Placement::Right,
].iter().map(|placement| {
let btn_ref = NodeRef::default();

html_nested! {
<>
<Button style={Color::Primary} node_ref={btn_ref.clone()}>
{format!("Tooltip: {placement:?}")}
</Button>
<Tooltip target={btn_ref} placement={*placement}>
{format!("Tooltip for button, placed at {placement:?}.")}
</Tooltip>
{" "}
</>
}
})
}
<h2>{"Manually-triggered tooltip"}</h2>
<ButtonGroup>
{
for [
(Color::Primary, Placement::Top),
(Color::Secondary, Placement::Bottom),
(Color::Success, Placement::Left),
(Color::Warning, Placement::Right),
].iter().map(|(color, placement)| {
let btn_ref = NodeRef::default();

html_nested! {
<>
<Button style={color.clone()} node_ref={btn_ref.clone()}>
{format!("Tooltip: {placement:?}")}
</Button>
<Tooltip target={btn_ref} placement={*placement}>
{format!("Tooltip for button, placed at {placement:?}.")}
</Tooltip>
</>
}
})
}
</ButtonGroup>
<h2>{"Manually-triggered tooltip on an element"}</h2>
<p ref={tooltip_click_p_ref.clone()}>
{"Here is some long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}
{"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt "}
{"ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation "}
{"ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in "}
{"reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur "}
{"sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id "}
{"est laborum."}
</p>
<ButtonGroup>
<Button onclick={ctx.link().callback(|_| Msg::ToggleTooltip)}>
Expand All @@ -423,9 +429,11 @@ impl Component for Model {
trigger_on_focus=false
trigger_on_hover=false
show={self.tooltip_show}
placement={Placement::Top}
placement={Placement::BottomEnd}
>
{format!("Tooltip toggled manually")}
{"Tooltip toggled manually, targetted to the "}
<code>{"<p>"}</code>
{" tag."}
</Tooltip>
</div>
<div id="helpers" class="p-3">
Expand Down
16 changes: 8 additions & 8 deletions examples/forms/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,7 @@ impl Component for Model {
id="input-tooltip-text"
ctype={FormControlType::Text}
class="mb-3" label="Text with tooltip on focus only"
placeholder={ Some(AttrValue::from("Placeholder")) }
placeholder="Placeholder text"
node_ref={tooltip_input_ref.clone()}
/>
<Tooltip
Expand All @@ -404,9 +404,9 @@ impl Component for Model {
</Tooltip>
<FormControl
id="input-tooltip-select1"
ctype={ FormControlType::Select}
ctype={FormControlType::Select}
class="mb-3"
label={ "Select control with tooltip on hover or focus"}
label="Select control with tooltip on hover or focus"
node_ref={tooltip_select_ref.clone()}
>
<SelectOption key=0 label="Select an option" selected=true />
Expand All @@ -423,12 +423,12 @@ impl Component for Model {
<FormControl
id="input-tooltip-checkbox"
name="input-tooltip-checkbox"
ctype={ FormControlType::Checkbox }
ctype={FormControlType::Checkbox}
class="mb-3"
label="I accept the terms and conditions to be able to hide the tooltip."
node_ref={tooltip_checkbox_ref.clone()}
onchange={onchange.clone()}
checked={ !self.show_checkbox_tooltip }
checked={!self.show_checkbox_tooltip}
/>
<Tooltip
target={tooltip_checkbox_ref}
Expand All @@ -438,14 +438,14 @@ impl Component for Model {
placement={Placement::BottomStart}
fade={true}
>
{"You must accept the terms and conditions to hide this tooltip. Even though this tooltip visually blocks the textarea below, the textarea still receives events."}
{"You must accept the terms and conditions to hide this tooltip. Even though this tooltip visually blocks other form elewents, they still receive events."}
</Tooltip>
<FormControl
id="input-tooltip-textarea"
ctype={ FormControlType::TextArea { cols: None, rows: None } }
ctype={FormControlType::TextArea { cols: None, rows: None }}
class="mb-3"
label="Text area with tooltip on hover only"
placeholder={ Some(AttrValue::from("Text as placeholder")) }
placeholder="Placeholder text"
node_ref={tooltip_textarea_ref.clone()}
/>
<Tooltip
Expand Down

0 comments on commit 8b16117

Please sign in to comment.