• Floatbox Forum » Support & General Discussion » Lightup Tooltips or Context boxes with a function in the <head>

Lightup Tooltips or Context boxes with a function in the <head>

Page: 1

Author Post
jatss
#1 Sun Sep 23, 2012 2:57 am
Member
Registered: Apr 2009
Posts: 56
One of the questions that has been bugging me for some time is whether Tooltips, or Context boxes located as hidden Div's on a page can light-up from a javascript function using fb.start() that's placed in the <head> of the same page. The function would be called from onclick(), or onmousover() actions located in the <BODY> of the page.

I've been wanting to do this for while now and didn't see how it can be done, or, if it can be accomplished?

I just crossed this juncture again today hoping to use tooltips in lieu of Google's standard InfoWindow on a Google Map. I would like to have more control over the presentation of the InfoWindow by using a Floatbox tooltip served from a hidden div on my page. I'm using your Google Maps example from the 'Code' tab of the demo page.

Is there a way to include the element with the tooltip as a variable in Google's initialize() function similar to something like this described from the API:
var myLink = fb.$('someAnchorId'); fb.start( myLink );

And then have Google's addListener() fire the variable myLink as a Tooltip or Context Box on mouseover, or onclick? Your Google example on the Demo page uses fb.start() to fire up an entire web page in a Floatbox window and I can't get my head around starting a tooltip instead when a user interacts with a Google marker.

I believe I can accomplish this task with Jquery and I'm starting to head down that road, but since I've already got the Floatbox library installed, I'd like to use it instead if it can work.

I found this thread asking a similar question.
http://floatboxjs.com/forum/topic.php?id=1419

Thanks for any input you have.
« Last edit by admin on Sun Sep 23, 2012 10:50 am. »
admin
#2 Sun Sep 23, 2012 9:48 am
Administrator
Registered: Aug 2008
Posts: 3382
There's a fundamental flaw in the concept of starting a tooltip or a context box from the fb.start() function. Tooltips and context boxes are not something different than standard floatboxes. They are standard floatboxes and are in fact invoked internally by calling fb.start() with a source parameter taken from the source option of the data-fb-tooltip or data-fb-context attribute. So, in a sense, you can start a tooltip or a context box by calling fb.start with whatever source you want to use, plus a bunch of options to make it look and behave like you want it too.

What distinguishes or defines tooltips and context boxes is not what is displayed when they are invoked, but rather all the event handlers surrounding their invocation that are added to the host element and document. They differ from standard floatboxes in terms of what happens before fb.start() is called, not after.

You can use code to dynamically add tooltips and context boxes to a page. To take a tooltip as an example, you would add the tooltip class to an element, add the desired data-fb-tooltip attribute, and then invoke fb.activate() which will assign the relevant event handlers.

You can't do anything interesting like that with a Google map marker. The markers aren't DOM elements. They are a software construct handled mostly at the server and drawn as part of the map using canvas. So for the map markers, you're limited to what the map API grants you, which for our purposes is essentially adding click or mouseover listeners.

I don't like starting a floatbox on mouseover. One of the reasons why the Floatbox enhanced tooltips are such a Good Thing is that they monitor mouse behaviour and won't open the box if the mouse is just doing a quick transit across the host element. If we hook fb.start up to mouseover on a Google map, it kicks off whenever the mouse clips the marker on its way to somewhere else. This is not user friendly and for this reason it's best to stick with click actions on markers.

So, yes, the map example on the demo page opens a full external page from wikipedia on click. But the content can be anything you like. It doesn't quite make sense to say you want to start a tooltip from a hidden div. You want to start a floatbox containing content from a hidden div, the same as a tooltipped element might do on slow mouseover. Go for it, with something like fb.start('#myHiddenDivId'); Style it up using fb.start's second parameter with options like overlayOpacity, outsideClickCloses, closeOnClick, resizeDuration, cornerRadius, etc. as you see fit.

Page: 1

• Floatbox Forum » Support & General Discussion » Lightup Tooltips or Context boxes with a function in the <head>