Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

mdFabSpeedDial combined with mdTooltip conjunctions #3277

Closed
NoamaExl opened this issue Jun 16, 2015 · 6 comments
Closed

mdFabSpeedDial combined with mdTooltip conjunctions #3277

NoamaExl opened this issue Jun 16, 2015 · 6 comments
Assignees
Milestone

Comments

@NoamaExl
Copy link

Hi,

I am trying to achieve a speed Dial implementation with tooltips

My requirements:

  1. Each action (including trigger) will have a tooltip
  2. Initial presentation is : speedDIal closed with the trigger tooltip displayed
  3. When speed dial opens - all spedddial actions have a tooltip
  4. all tooltips must stay visible (no autohide) as long as the action itself is visible

In other words I want the tooltips to always show (not just on hover) but only when the actual action is visible

The problems are:

  1. Once I define the tooltips as md-visible - they are visible even if the action is not
  2. After I close and open the speeddial the tooltips are all hidden
  3. md-autohide = false does not seem to work well inside the speed dial

I have a codepen for this:

http://codepen.io/noamamit92/pen/RPZLLa

@david-gang
Copy link
Contributor

+1

@ThomasBurleson ThomasBurleson self-assigned this Jun 16, 2015
@ThomasBurleson ThomasBurleson modified the milestone: 0.11.0 Jun 16, 2015
@topherfangio
Copy link
Contributor

Hi all, there appear to be a number of issues with using the tooltip inside of the speed dial. I will take a look and see if I can correct them.

@noamamit92 I am having trouble using the codepen you provided. It appears that none of the tooltip radio buttons affect the demo. Am I doing something wrong?

topherfangio added a commit that referenced this issue Jun 24, 2015
users have difficulty utilizing tooltips without an example

references #3338, references #3277, references #3236
@topherfangio
Copy link
Contributor

@noamamit92 I was attempting to create an example to demonstrate your requirements. I got something mostly working, but I ran into a small issue.

If you use the md-visible attribute of the tooltips, you can bind this to the is-open attribute of the speed dial. This makes the tooltips visible whenever the component is open.

Small problem: the tooltips appear immediately when the speed dial begins opening, so they have an incorrect position even if you use the md-delay attribute. I think this is the correct behavior though, because if your code programmatically specifies that it should be displayed, I do not think it should wait on the delay.

Unfortunately, what this means is that you may need to setup a watcher on a variable bound to the is-open property, and use $timeout to set another variable a second or so later to make the tooltips visible.

Here is a codepen to demonstrate: http://codepen.io/topherfangio/pen/xGPLRg

@NoamaExl
Copy link
Author

Thanks @topherfangio , not sure what went wrong in my codepen...

Tried your solution and it works great,

Do you happen to know how to prevent the toolTips from flickering when you move from one button to another, and make them stay visible whenever the button is visible?

@topherfangio
Copy link
Contributor

Yup, I fixed that in a5807e0 by adding some better mouse event handling. Should be pushed soon, I just have to speak with the team this morning about some code questions :-)

@NoamaExl
Copy link
Author

Thanks, great job

topherfangio added a commit that referenced this issue Jun 26, 2015
users have difficulty utilizing tooltips without an example

references #3338, references #3277, references #3236
topherfangio added a commit that referenced this issue Jun 26, 2015
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
topherfangio added a commit that referenced this issue Jun 28, 2015
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
topherfangio added a commit that referenced this issue Jun 28, 2015
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

 * more fixes suggested by gkalpak

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
topherfangio added a commit that referenced this issue Jun 29, 2015
* maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

 * more fixes suggested by gkalpak

closes #3213. closes #3338. closes #3277. closes #3236. closes #3375. Closes #3468.
topherfangio added a commit that referenced this issue Jul 5, 2015
 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

 * make changes suggested by gkalpak

 * more fixes suggested by gkalpak

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants