Highlighted

Hover text on drag source

New Here ,
Sep 08, 2020

Copy link to clipboard

Copied

Hello, 

I was wondering, is it possible to add a hover or rollover text on the Source(image) of an drag&drop interaction?

I have tried it with states, but these only work "On Drop Action". Thus when de Source is dropped on the Target. But i want this before any drag-movement, when you hover or click on the source.

What i want is to give the user an hint of where the source should go to, so that they partly know what this object is (this object is part of an photo) and that's why i want to give a hint.

Any ideas?

Thx for your time.

Views

85

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Hover text on drag source

New Here ,
Sep 08, 2020

Copy link to clipboard

Copied

Hello, 

I was wondering, is it possible to add a hover or rollover text on the Source(image) of an drag&drop interaction?

I have tried it with states, but these only work "On Drop Action". Thus when de Source is dropped on the Target. But i want this before any drag-movement, when you hover or click on the source.

What i want is to give the user an hint of where the source should go to, so that they partly know what this object is (this object is part of an photo) and that's why i want to give a hint.

Any ideas?

Thx for your time.

Views

86

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Sep 08, 2020

Copy link to clipboard

Copied

Did you try the inBuilt 'Dragstart' state of the drag source? Have a look at this tutorial:

https://elearning.adobe.com/2017/08/built-in-states-for-dragdrop-objects/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Advocate ,
Sep 08, 2020

Copy link to clipboard

Copied

I picture in my mind a little something like this.

I can offer a relatively non-complex JavaScript solution for this if you're interested. 

 

dragToolTip.gif

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Sep 09, 2020

Copy link to clipboard

Copied

Thanks Lilibiri and Stagprime 🙂

I didn't knew about the inBuilt state, thanks for pointing it out. I will study it, got it already partly working.

 

Stagprime, yes i would also like to know the JS-solution.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Sep 09, 2020

Copy link to clipboard

Copied

You're welcome. Be sure, lot of Captivate users ignore many more hidden features and are looking for more complicated workflows. The limitation of the InBuilt states for D&D objects is explained in the blog I mentioned. Moreover for all multistate objects it is impossible to apply an effect to a state (would be a great improvement) nor add an interactive object. 

JS will offer more possibilities, starting with creating a new event because hovering over an item is not an event. Another possbility would have been using the CpExtra widget by InfoSemantics, if you want to avoid having to code. 

I like the KISS principle... if it is not decreasing the efficiency of the learning and saving me time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Advocate ,
Sep 09, 2020

Copy link to clipboard

Copied

I like to think of using JavaScript the way I do as "Manually Crafting Advanced Actions".

Not only did I find it to be easier, I found it to be faster and it opened up many more possibilities.

Here is how I did the hover tip...

 

Prep:
Of course - you'll need your objects on the stage. In my case it was a square and a circle for drop targets, a checkmark image for the drag source, and a rectangle for the hint. The rectangle is given an opacity of  0% and a width of zero. This allows it to be unseen on the stage at first. I gave the rectangle the name of  "tips".  Select the rectangle and go to the State View. Make a duplicate of the invisible rectangle and color it to your liking and place the appropriate text inside. Give it a name. In my case, I called the second state  "check". I also gave the checkmark image the name of  "yes". You can make your drag and drop before or after.

 

Code:
I created an  onEnter  action to Execute JavaScript. Below is the code. I spaced it out to easily identify what is going on. The first line looks for the item with a name of  "yes".  That is my green checkmark image. We apply some instructions for what is to happen when we hover. The hover instructions include what happens when we hover over and what happens when we hover off. You see in the first function (hover over) that we simply change the state of our tips rectangle to the state named  "check". In the second function (hover off) we change it back to the Normal state which is the transparent view.

$("#yes").hover(

function() {
cp.changeState("tips","check");
},

function() {
cp.changeState("tips","Normal");
}

);

 If you have more objects you can reuse this snippet and simply change two things.
1. Then name of the object to hover over.
2. The name of the state to change to in the first function.

Of course, don't forget to make your additional states for each hint you want to display.

 

Does it take a little time and effort to learn? - Absolutely!

In my opinion, it is worth the effort!
Hope this helps.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Sep 09, 2020

Copy link to clipboard

Copied

With an InBuilt state there are no advanced actions needed., you just need to create one state (which you need to do as well)  In that case 'easier' and 'quicker' made me really laugh. Perspectives can be distorted sometimes. Be happy!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Sep 09, 2020

Copy link to clipboard

Copied

Thanks again for the great explanation and insights 🙂

I will for sure apply this knowledge, really nice!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Advocate ,
Sep 09, 2020

Copy link to clipboard

Copied

I suppose you can mock me all you want. Laugh at my claims of how easy I think it is...

 

But in the end, the InBuilt States for a drag source do not accomplish what the original poster requested which was to display some text when you hover over the source. I typed these few lines up in just a few seconds and can easily extend it to multiple drag sources to display a custom hint where ever I want it placed and how ever I want it to look as the restrictions are not the same on a simple SmartShape as they are on the draggable object. I even provided a visual example of it working.

 

So I guess I will sit here and wallow in my distorted perspective and simply shake my head - and yes, I will be happy.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
Sep 09, 2020

Copy link to clipboard

Copied

I didn't mock you, clearly explained what were the limitations of the InBuilt states and the advantages that can be offered by JS. It is not just always easier and quicker, because both 'easy' and 'quick' depend on a lot of factors.

The problem with JS experts, as I have expereienced a lot of times, is that they often miss new features completely. Those InBuiilt states are not new at all, they are available since several versions. Be honest: did you know about their existence? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Advocate ,
Sep 09, 2020

Copy link to clipboard

Copied

Yeah I knew about them - going way back to when Ludovic wanted help trying to rotate a draggable ruler to measure some lines. Perhaps you'll recall that exchange quite some time ago now. Limitations hit us hard on that one.

When I talk about easier and quicker - I am considering the usage as a whole rather than just looking at individual tasks. It is rare that interactive objects I create do just one thing where a simple action will suffice and I personally find it to be faster for me to type what I want rather than click through the GUI for a complex conditional action.

I am not even close to being a JavaScript expert. I know enough to craft the majority of the actions I need and a handful of other cool tricks and I try to push my skills daily. I still use the GUI for certain things where it is simpler such as showing and hiding entire groups. In those cases I will often create the advanced action and modify the group and throw in an Execute JavaScript for the rest - because I actually have come to prefer that mode of builidng actions. It is solely pragmatic - there are no moral scruples at risk here.

 

I have said it before and I will say it again.

You have a great deal of knowledge and great ideas and you share your workflows based on the GUI as much as possible - that's awesome. I am able to offer another way to solve the problem and am in no way offended if others choose not to use them. I think it is good to see multiple options. Let folks take they path they choose. I am here to help others solve their problems as best I can. I am fully aware that what I find easy will not necessarily be easy for others. I will not stop being an advocate for learning/using JavaScript. It has opened doors I would not have thought existed.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
jake5C9D LATEST
New Here ,
Sep 10, 2020

Copy link to clipboard

Copied

I agree, with the Inbuilt states i cannot completely accomplish what i want.

But in the end both of the solutions are of help and that is what counts :)))

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group