Tooltips
Note: for using tooltips the custom CSS needs to be copied into the global custom CSS section.
Add to which ever element the custom html attributes data-balloon and data-balloon-pos with their respective values in the "Settings"-Tap to integrate a tooltip.
For the message, use the data-balloon html attribute with "your custom text" as the value.
For positioning, use the data-balloon-pos html attribute with one of the values: up, up-left, up-right, down, down-left, down-right, left or right
For size, use the data-balloon-length html attribute with one of the values: small, medium, large, xlarge or fit (fits the size of the button or image element). The pixel sizes for each attribute can be modified in the CSS file.
To initially delay the appearance of the tooltip, use the data-balloon-delay html attribute with one of the values: 0.5, 0.75, 1 or 1.25. These values directly reflect the length of the initial delay in seconds.
To show a tooltip on a Word, it has to be simply wrapped with a <span> and then needs the </span>data-balloon and data-balloon-pos html attributes added to it. To give the word an even stronger hint feel, give the <span> a custom "?" cursor.</span>
In real usage of a hint, the word shouldn't be bold or in a different color. More like this.
If you want to show tooltips even when user interaction isn't happening, you can simply use the data-balloon-visible html attribute with an attribute value (the number 1 as an example)
To change the color of the tooltip, following values have to be changed in the css style sheet [data-balloon]:after {background; color;}. "Background" is for the shape and "color" is for the text.
For the the little triangle of the shape, following part of each of the 4 svg-shapes (one for each direction) in the css style sheet has to be modified:
fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22
A Hex-Code value has to be implemented like this:
fill%3D%22#1FCE95%22
Under this Link or in the folder "Webflow Resources" more features of the Tooltip extension can be found.
