Comments (3)
@ekatherina there are two ways to break lines in Balloon tooltips:
Option 1: Manually adding line-breaks:
You need to write the code
without spaces, and use the attribute data-balloon-break
. E.g.
<span data-balloon="Line one Line two" data-balloon-break>This is a tooltip</span>
Option 2: Using data-balloon-length
to break lines automatically:
Additionally you can also let the tooltip break automatically using the length attribute:
<span data-balloon="I'm a big text that don't breaks automatically bla bla bla bla." data-balloon-length="small">This is a tooltip</span>
The values for data-balloon-length
are: small
, medium
, large
and fit
. You can check examples for length on the website, in "Length" section.
from balloon.css.
If someone is doing this programatically, instead of
use \n
and follow the other instructions provided by @kazzkiq
from balloon.css.
I was using balloon.css in EJS
Simply putting attribute as data-balloon-break didn't worked for me (strange) . Setting data-balloon-break="" worked perfectly✔️ with '\n'
from balloon.css.
Related Issues (20)
- Accessibility issue due to aria-label HOT 5
- Tooltip causing extra overflow when inside an overflow container on mobile HOT 1
- question/feature_request(enhancement): tooltip on click HOT 2
- Tooltip does not appear when triggered for a svg <line> element HOT 1
- question/feature_request(mobile): sticky hover
- bug/question(positioning): tooltips goes off a screen HOT 1
- Ballons are still working with font-awesome? HOT 1
- bug/(positioning):tooltips text is off on Chrome
- Features suggestion
- Feature request: fade out
- Italic tooltip text HOT 2
- Bug report sticky header and tooltip
- Is it possible to remove the arrow that appears with the popup? HOT 2
- Add link in tooltip
- Add IDs to heading elements on Github Pages documentation site
- Bug: Transparent pixels between triangle and rounded rectangle
- Is it possible to hide tooltip when focus but still show when hover
- Not disappearing after click ( Angular Material 15.1.0) HOT 1
- Is it possible to show it initially the hide on hover?
- Center text HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from balloon.css.