Tooltips now disappear when hovered and no longer appear on top of the mouse position (e.g. in the bottom of the inventory)

CHANGELOG.md

@@ -79,6 +79,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Bow M2 is now a charged attack that scales the longer it's held
 - Fixed window resizing on Mac OS X.
 - Dehardcoded many item variants
+- Tooltips avoid the mouse better and disappear when hovered
 
 ### Removed
 

voxygen/src/hud/buttons.rs

@@ -44,7 +44,6 @@ widget_ids! {
 
     }
 }
-const TOOLTIP_UPSHIFT: f64 = 40.0;
 #[derive(WidgetCommon)]
 pub struct Buttons<'a> {
     client: &'a Client,
@@ -167,7 +166,6 @@ impl<'a> Widget for Buttons<'a> {
             "",
             &button_tooltip,
         )
-        .bottom_offset(55.0)
         .set(state.ids.bag, ui)
         .was_clicked()
         {
@@ -228,7 +226,6 @@ impl<'a> Widget for Buttons<'a> {
                 "",
                 &button_tooltip,
             )
-            .bottom_offset(TOOLTIP_UPSHIFT)
             .set(state.ids.settings_button, ui)
             .was_clicked()
         {
@@ -266,7 +263,6 @@ impl<'a> Widget for Buttons<'a> {
                 "",
                 &button_tooltip,
             )
-            .bottom_offset(TOOLTIP_UPSHIFT)
             .set(state.ids.social_button, ui)
             .was_clicked()
         {
@@ -303,7 +299,6 @@ impl<'a> Widget for Buttons<'a> {
                 "",
                 &button_tooltip,
             )
-            .bottom_offset(TOOLTIP_UPSHIFT)
             .set(state.ids.map_button, ui)
             .was_clicked()
         {
@@ -341,7 +336,6 @@ impl<'a> Widget for Buttons<'a> {
                 "",
                 &button_tooltip,
             )
-            .bottom_offset(TOOLTIP_UPSHIFT)
             .set(state.ids.spellbook_button, ui)
             .was_clicked()
         {
@@ -378,7 +372,6 @@ impl<'a> Widget for Buttons<'a> {
                 "",
                 &button_tooltip,
             )
-            .bottom_offset(TOOLTIP_UPSHIFT)
             .set(state.ids.crafting_button, ui)
             .was_clicked()
         {

voxygen/src/hud/skillbar.rs

@@ -806,14 +806,12 @@ impl<'a> Widget for Skillbar<'a> {
                 })
         };
 
-        const SLOT_TOOLTIP_UPSHIFT: f64 = 70.0;
         //Slot 5
         let slot = slot_maker
             .fabricate(hotbar::Slot::Five, [20.0 * scale as f32; 2])
             .bottom_left_with_margins_on(state.ids.m1_slot, 0.0, -20.0 * scale);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Five) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot5, ui);
         } else {
             slot.set(state.ids.slot5, ui);
@@ -824,7 +822,6 @@ impl<'a> Widget for Skillbar<'a> {
             .left_from(state.ids.slot5, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Four) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot4, ui);
         } else {
             slot.set(state.ids.slot4, ui);
@@ -835,7 +832,6 @@ impl<'a> Widget for Skillbar<'a> {
             .left_from(state.ids.slot4, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Three) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot3, ui);
         } else {
             slot.set(state.ids.slot3, ui);
@@ -846,7 +842,6 @@ impl<'a> Widget for Skillbar<'a> {
             .left_from(state.ids.slot3, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Two) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot2, ui);
         } else {
             slot.set(state.ids.slot2, ui);
@@ -860,7 +855,6 @@ impl<'a> Widget for Skillbar<'a> {
             .left_from(state.ids.slot2, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::One) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot1, ui);
         } else {
             slot.set(state.ids.slot1, ui);
@@ -874,7 +868,6 @@ impl<'a> Widget for Skillbar<'a> {
             .bottom_right_with_margins_on(state.ids.m2_slot, 0.0, -20.0 * scale);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Six) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot6, ui);
         } else {
             slot.set(state.ids.slot6, ui);
@@ -885,7 +878,6 @@ impl<'a> Widget for Skillbar<'a> {
             .right_from(state.ids.slot6, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Seven) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot7, ui);
         } else {
             slot.set(state.ids.slot7, ui);
@@ -896,7 +888,6 @@ impl<'a> Widget for Skillbar<'a> {
             .right_from(state.ids.slot7, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Eight) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot8, ui);
         } else {
             slot.set(state.ids.slot8, ui);
@@ -907,7 +898,6 @@ impl<'a> Widget for Skillbar<'a> {
             .right_from(state.ids.slot8, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Nine) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot9, ui);
         } else {
             slot.set(state.ids.slot9, ui);
@@ -921,7 +911,6 @@ impl<'a> Widget for Skillbar<'a> {
             .right_from(state.ids.slot9, 0.0);
         if let Some((title, desc)) = tooltip_text(hotbar::Slot::Ten) {
             slot.with_tooltip(self.tooltip_manager, title, desc, &item_tooltip)
-                .bottom_offset(SLOT_TOOLTIP_UPSHIFT)
                 .set(state.ids.slot10, ui);
         } else {
             slot.set(state.ids.slot10, ui);

voxygen/src/menu/char_selection/ui.rs

@@ -905,8 +905,6 @@ impl CharSelectionUi {
                             "",
                             &tooltip_human,
                         )
-                        .bottom_offset(55.0)
-                        .x_offset(-10.0)
                         .set(self.ids.create_button, ui_widgets)
                         .was_clicked()
                     {}

voxygen/src/ui/widgets/tooltip.rs

@@ -52,17 +52,16 @@ impl TooltipManager {
 
         if let Some(um_id) = current.widget_under_mouse {
             match self.state {
-                HoverState::Hovering(hover) if um_id == hover.0 || um_id == self.tooltip_id => (),
+                HoverState::Hovering(hover) if um_id == hover.0 => (),
                 HoverState::Hovering(hover) => {
                     self.state =
                         HoverState::Fading(Instant::now(), hover, Some((Instant::now(), um_id)))
                 },
-                HoverState::Fading(_, _, Some((_, id)))
+                HoverState::Fading(_, _, Some((_, id))) if um_id == id => {},
-                    if um_id == id || um_id == self.tooltip_id => {},
                 HoverState::Fading(start, hover, _) => {
                     self.state = HoverState::Fading(start, hover, Some((Instant::now(), um_id)))
                 },
-                HoverState::Start(_, id) if um_id == id || um_id == self.tooltip_id => (),
+                HoverState::Start(_, id) if um_id == id => (),
                 HoverState::Start(_, _) | HoverState::None => {
                     self.state = HoverState::Start(Instant::now(), um_id)
                 },
@@ -100,8 +99,6 @@ impl TooltipManager {
         img_id: Option<image::Id>,
         image_dims: Option<(f64, f64)>,
         src_id: widget::Id,
-        bottom_offset: f64,
-        x_offset: f64,
         ui: &mut UiCell,
     ) {
         let tooltip_id = self.tooltip_id;
@@ -122,9 +119,17 @@ impl TooltipManager {
             let (w_w, w_h) = (ui.win_w, ui.win_h);
 
             // Determine position based on size and mouse position
-            // Flow to the bottom right of the mouse
+            // Flow to the top left of the mouse when there is space
-            let x = (m_x + t_w / 2.0).min(w_w / 2.0 - t_w / 2.0 + x_offset);
+            let x = if (m_x + w_w / 2.0) > t_w {
-            let y = (m_y - mp_h - t_h / 2.0).max(-w_h / 2.0 + t_h / 2.0 + bottom_offset);
+                m_x - t_w / 2.0
+            } else {
+                m_x + t_w / 2.0
+            };
+            let y = if w_h - (m_y + w_h / 2.0) > t_h + mp_h {
+                m_y + mp_h + t_h / 2.0
+            } else {
+                m_y - mp_h - t_h / 2.0
+            };
             tooltip
                 .floating(true)
                 .transparency(transparency)
@@ -157,9 +162,6 @@ pub struct Tooltipped<'a, W> {
     desc_text: &'a str,
     img_id: Option<image::Id>,
     image_dims: Option<(f64, f64)>,
-    // Offsets limit of bottom of tooltip
-    bottom_offset: Option<f64>,
-    x_offset: Option<f64>,
     tooltip: &'a Tooltip<'a>,
 }
 impl<'a, W: Widget> Tooltipped<'a, W> {
@@ -173,16 +175,6 @@ impl<'a, W: Widget> Tooltipped<'a, W> {
         self
     }
 
-    pub fn x_offset(mut self, off: f64) -> Self {
-        self.x_offset = Some(off);
-        self
-    }
-
-    pub fn bottom_offset(mut self, off: f64) -> Self {
-        self.bottom_offset = Some(off);
-        self
-    }
-
     pub fn set(self, id: widget::Id, ui: &mut UiCell) -> W::Event {
         let event = self.inner.set(id, ui);
         self.tooltip_manager.set_tooltip(
@@ -192,8 +184,6 @@ impl<'a, W: Widget> Tooltipped<'a, W> {
             self.img_id,
             self.image_dims,
             id,
-            self.bottom_offset.unwrap_or(0.0),
-            self.x_offset.unwrap_or(0.0),
             ui,
         );
         event
@@ -227,8 +217,6 @@ impl<W: Widget> Tooltipable for W {
             desc_text,
             img_id: None,
             image_dims: None,
-            bottom_offset: None,
-            x_offset: None,
             tooltip,
         }
     }