Perspective Hover Style in Flex Repeater

[mcgheeiv]

Ignition 8.1.0

Attempting to emulate “tooltip” in Perspective. When the sub view is instantiated in an Embedded View the hover style works as expected. When the sub view is instantiated in a Flex Repeater, only information from the last instance appears in the tooltip.

TIA for any suggestions for getting the hover to work on the Flex Repeater?

Template:

{
  "custom": {},
  "params": {
    "hover_text": "Hover Text"
  },
  "propConfig": {
    "params.hover_text": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 220,
      "width": 100
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "label"
        },
        "position": {
          "basis": "40px"
        },
        "props": {
          "style": {
            "textAlign": "center"
          },
          "text": "label"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "tooltip"
        },
        "position": {
          "basis": "200px"
        },
        "propConfig": {
          "props.source": {
            "binding": {
              "config": {
                "path": "view.params.hover_text"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "style": {
            "classes": "tooltip",
            "height": "170px",
            "left": "5px",
            "position": "absolute",
            "top": "40px",
            "width": "90px"
          }
        },
        "type": "ia.display.markdown"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "borderStyle": "solid",
        "borderWidth": 1
      }
    },
    "type": "ia.container.flex"
  }
}

View Using the Template

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "EmbeddedView"
        },
        "position": {
          "height": 220,
          "width": 100,
          "x": 43,
          "y": 50
        },
        "props": {
          "path": "hover/template"
        },
        "type": "ia.display.view"
      },
      {
        "meta": {
          "name": "FlexRepeater"
        },
        "position": {
          "height": 220,
          "width": 320,
          "x": 160,
          "y": 50
        },
        "props": {
          "instances": [
            {
              "hover_text": "First",
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "hover_text": "Second",
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            },
            {
              "hover_text": "Third",
              "instancePosition": {},
              "instanceStyle": {
                "classes": ""
              }
            }
          ],
          "path": "hover/template"
        },
        "type": "ia.display.flex-repeater"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

Style

{
  "base": {
    "style": {
      "backgroundColor": "#FFFFFF",
      "color": "#000000",
      "opacity": "0",
      "textAlign": "center"
    }
  },
  "variants": [
    {
      "pseudo": "hover",
      "style": {
        "opacity": "0.80"
      }
    }
  ]
}

[cmallonee]

I think you’re encountering a bug, but not in the way you think. What’s actually happening is that the Markdown components are ignoring the layout of the flex repeater and all three are rendering as if they were in the first instance. Since the last one is rendered on top of the first two, it’s the one that becomes “visible” on hover. I’ll open a ticket to get this fixed.

You can see what I’m talking about in the Designer if you remove the Style class from the template, and then examine the Flex Repeater.

[mcgheeiv]

Is the bug limited to the Markdown component? Would it work if I used a label instead?

[cmallonee]

It would, as you can see by the Labels already in use in your template.

[cmallonee]

I take it all back. I just noticed that your template markdown component has a style property of position which you have set to “absolute”. This style setting overrides anything in a repeater, and is the reason you’re seeing this behavior. You need to remove the position style property from the Markdown in the template.

I recommend removing ALL of the “positioning” properties you have in place, placing a new style property margin with a value of “5px” and set Markdown.position.grow to a value of 1.

Your settings:

My settings:

[mcgheeiv]

In the real project, there are components “behind” the markdown. Removing the position style property causes those objects to move to the side.

[cmallonee]

I understand that might be the case, but you’re trying to use absolute positioning in a container which is designed for relative positioning. If you must have components positioned on top of one another, then you must use a different container, like the Coordinate Container.
Your layout should probably look something like this:

root (flex)
L_ Label
L_ Coordinate Container
     L_ ComponentA
     L_ ComponentB
     L_ Markdown