How to create a title that appears when hovering over a shape?

New Here ,
Nov 07, 2017 Nov 07, 2017

Copy link to clipboard

Copied

Hi Muse community,

I'm creating my first site and am learning the ins-and-outs of the program. I am trying to create an interactive map. I have a Muse page with a graphic of the US and a dozen dots (basic shapes I created with the ellipse tool). I'd like a title to appear when you hover over each dot and to launch a photo upon clicking on it.

e.g.

Part 1: When you hover over one dot, the word BOSTON appears over it, as you drag over other parts of the map the titles change to SEATTLE, SAN DIEGO, etc. every time you cross a new dot.

Part 2: When you click on a new dot, a lightbox photo (or slideshow of photos, in some cases) launches.

Does anyone have any suggestions of which tools I can best accomplish this with?

I appreciate your help.

Alexis

Views

90

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
community guidelines

correct answers 1 Correct Answer

Contributor , Nov 07, 2017 Nov 07, 2017
Hi Alexis The feature you are trying to achieve is called a Tooltip, fortunately, there is a widget in your Widget Library (Window > Widget Library > Compositions) Drad and Drop a Tooltip widget into the page, style it any way you like,then place the TRIGGER on top of the element (for example BOSTON) and make it transparent in all state.Place the TARGET where you want the tooltip to be appeared. You can add any content (by dragging and dropping) inside of the target.Now, When you hover over the ...

Likes

Translate

Translate
Contributor ,
Nov 07, 2017 Nov 07, 2017

Copy link to clipboard

Copied

LATEST

Hi Alexis

The feature you are trying to achieve is called a Tooltip, fortunately, there is a widget in your Widget Library (Window > Widget Library > Compositions)

Drad and Drop a Tooltip widget into the page, style it any way you like,

then place the TRIGGER on top of the element (for example BOSTON) and make it transparent in all state.

Place the TARGET where you want the tooltip to be appeared.

You can add any content (by dragging and dropping) inside of the target.

Now, When you hover over the trigger the Target area will show up.

You can add hyperlink to the trigger if you want to add the click function to it which can be a detailed page about it (for example BOSTON)

Hope this helps.

Thanks

Toufic Nabi

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
community guidelines