Add support for tool tip to anchors

Adobe XD UXP Plugin API
, ,
1

When hovering over link show a tool tip.

Use Case
User has a few links in the plug in. Before the user clicks on the link they hover the mouse over the link to see the tool tip on the link.

2

I think this could already be possible (by adding a title attribute to the link, like described in https://adobexdplatform.com/plugin-docs/reference/ui/elements/tooltips.html.

If so, I think that this isn’t as severe since it’s something where we as developers can already – if we wish to do so – provide a good UX by adding those tooltips. Also, if it’s possible to do it that way, I have to say that I like it the way it is (since – especially with the limited styling capabilites of dialogs – it’s good to have as much control as possible on the few things we can control in order to implement custom UIs).

If however, this is not possible like described in the docs, I agree whole-heartedly with this request :wink:

3

I’m setting the title property now and it doesn’t show. It’s been confirmed that they are not supported on hyperlinks so this is either a bug or a feature request depending on how you look at it.

1 Like
4

Alright, under those circumstances, I’ll “vote” (although I have no votes left :laughing:) for having the title property work as expected :wink:

1 Like
5

Sounds like a bug – title attribute should definitely work everywhere.

Can you share a snippet of what you’re using so we can test?

1 Like
6

Well, now it seems like it’s working sort of.

It seems to work when the title is defined inside the style tag but not when it’s defined as a property on the anchor.

var buttonStyle = {title: "This tool tip value will show up", backgroundColor:"none", border:"2px solid #888888", paddingLeft:"4", paddingRight:"4", marginRight:"10", borderRadius: "10px", opacity:1, fontSize:"10px", fontWeight:"bold", color:"#686868" };

let alertDialog =
     h("dialog", {name:"Alert"},
        h("form", { method:"dialog", style: { width: 380 }, },
            h("h1", "Header"),
            h("label", { class: "row" },
                h("a", { href:"http://google.com", style: buttonStyle, title: "This tool tip value will not show up" }, "url"),
            ),
        h("footer",
            h("button", { uxpVariant: "cta", type: "submit", onclick(e){ } }, "OK")
        )
    )
)
1 Like
7

Definitely looks like a bug. I can reproduce. Oddly enough using div or span seems to work just fine, but p or a won’t render the title. Straaaange.

I’m going to turn this into a bug report then.

2 Likes