Is there a way to format the element Tips?

[fabrikg09]

I looked in the docs, but didn't find anything on this. Is there a way to style or format the different elements' Tips? As-is, they show the tip text all on one line, which is OK unless you have maybe a whole sentence you want to use as a tip. Then the Tip window becomes very wide and somewhat difficult to read.

Can't figure out how to address these elements, as they don't appear unless you hover, so usual methods of identifying the particular piece of code involved aren't available, at least to me.

Ideally, I would like to make them multi-line and in a smaller popup window.

 

[troester]

You can include HTML in the tip text (</br>)
and you can add custom CSS to your form template
.floating-tip-wrapper {border:4px solid green;width:300px}

 

[fabrikg09]

Element Tip formatting

This is wonderful! It means that the Tips are completely customizable on an individual basis! And you can put links inside them! Wow!

Thank you so much!

 

[troester]

I never tried anything but </br> and <b>

 

[fabrikg09]

Element tip formatting - uneven popup behavior

I tried to add some CSS to the element tips, and the formatting is definitely working - BUT - the hover behavior is now very strange: the newly-formatted Tip window displays for an instant, and then disappears. When I hover over the question mark Tip box, the Tip window does not always appear. And when it does, it flashes up for an instant, and then is gone, despite no movement of the mouse.

The HTML is just <p> and class tags, and the CSS is coming from my custom layout.css file.

 

[fabrikg09]

HTML is the culprit in formatting Tip text

After some experimenting, it appears that routine HTML tags such as <p> cause a lot of trouble with the hovering behavior of the element Tip boxes. Even if one just inserts <p> tags around the text, the strange behavuior occurs.

In my CSS file I also tried just this, with no HTML tags in the Tip text at all:

.floating-tip-wrapper {
width:400px;
}

This results in the smaller popup Tip window, but it appears for only a second, then vanishes. So apparently, one cannot apply CSS to style this element feature.

 

[troester]

Is this hover behaviour really depending on the CSS file?
I can't see this on my site (Chrome and FF).

There are some settings in Fabrik options (JavaScript).
I get a nearly static popup with Hover tipfx linear + Duration 0.
If testing with JS alway clear Joomla and browser cache after modifying settings.

 

[fabrikg09]

Element Tip formatting

Hmm. I will have to try those tomorrow. I experimented mostly with Firefox and Safari, both Win. Same behavior. I was able to trigger the strange actions with just the <p> elements added, no attempt to style at all. It seemed that the hover itself was really not responsive. I will experiment further and let you know. Being able to style those Tips would be extremely useful!

 

[cheesegrits]

I know it's possible, as I remember going through the same process a while back for someone else, and there was some trick to it I've now forgotten, and my search fu is weak today, I can't find that thread.

I'll see if Rob recalls, I know I had to involve him last time I worked on this.

-- hugh

 

[rob]

the tips can be very fiddily due to the mouse events that can occur when the tip is shown/hidden meaning that the tip triggers a mouse out event before its fully shown.

You could try editing Fabrik's global settings and under the javascript tab, set the 'Fx distance' option to 0 to stop the tip moving when being shown which may help things.