Hello, my name is Claudio Holanda Jr.
You can find me hacking at @sevn.
I speak mostly JavaScript, TypeScript, Golang, Svelte and (S)CSS.
Simple tooltips made of pure CSS
Home Page: https://kazzkiq.github.io/balloon.css/
License: MIT License
Hello, my name is Claudio Holanda Jr.
You can find me hacking at @sevn.
I speak mostly JavaScript, TypeScript, Golang, Svelte and (S)CSS.
Hi Claudio,
Would love to invite you to join Carbon and generate some revenue by displaying an ad on the project. Would you be interested? Could you share with me your email address so I can send more details with you?
How can I change color of popup other than black?
Even if it involves javascript, no problem...
In the README.md there is:
CDN version (provided by cdnjs):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.2.4/balloon.min.css">
But this version is old. I was using it and couldn't use tooltips programattically. The problem was that the data-balloon-visible
attribute did not exist in version 0.2.4
So it should be changed to version 0.5.0:
CDN version (provided by cdnjs):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
You should include browser support.
It seems left/right display options primary purpose to handle narrow screen situations like smartphone in portrait orientation. However better use of space could be achieved in this scenario by keeping the balloon above or below the trigger but extending it to the left or right only instead of the default to both sides equally. Do you know what I mean?
Or just provide some ways to control the line break.
Thanks.
Hello. Congrats and thanks for this amazing plugin.
I've realized you are using svg to create arrows. This is a problem for me because it hinders arrows customizations. I wanted to simply change colors on my site overriding the .min.css and I couldn't do it.
Why don't you use simple borders to make arrows? E.g:
.arrow-right {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid green;
}
It would be so much easier to customize colors and everything else.
Do you want help with this?
Hi,
It seems that doesn't work on button element on IE11
The issue occurs also on example page, you can test directy.
Hello @kazzkiq
I found a problem that when you hover the button, the triangle on ::after
have a 1px of separation with the ::before
that's the content. If you try to adjust the margin-top or the top property, there's no way that you can avoid this 1px, without overlapsing with the ::before
.
I want to know how the CSS browser is compatible.
Hi there! This isn't a issue but I didn't know where to ask!
Are you accepting donations or supports? Because Balloon is a great project and may you get some extra support, but there is no donate button o something like that.
I don't trying to spam you, but I want to invite you to beerpay.io, a simple platform to monetize open source projects, like balloon.
I know that the open source is free, but it's okay if someone want to contribute in other way.
Thanks for this work man!
Hello
I like it this tooltip app, thank you! I have a question. How I can run HTML codes in the Ballon Tooltip?
For example; I want to add image code in the tooltip, it is possible for Ballon.css?
I've just checked balloon.css by using browserstack and found some bugs in IE11. Unfortunately, according to this article browsers_stats IE11 have 6.1% (March, 2016) of active users, but according to the another article even more (~10%). I think it should be fixed and README.md should contain information about supported browsers as well, because I'm not willing to sacrifice of my users.
Tooltip is very big with medium size when using sass file.
There is no easy way to override the background color, or any other variables in SASS.
Can this be changes so that:
$balloon-bg: fade-out(#111, .1);
$balloon-base-size: 10px;
$balloon-arrow-height: 6px;
Looks like:
$balloon-bg: fade-out(#111, .1) !default;
$balloon-base-size: 10px !default;
$balloon-arrow-height: 6px !default;
This would allow us to set the variables in our SASS before importing this library.
I am not sure how to do this in LESS.
https://cdn.rawgit.com/kazzkiq/balloon.css/master/balloon.css page is not available.
Hard coded prefixes like webkit, ms, moz looks not so good.
autoprefixer
https://github.com/kazzkiq/balloon.css/blob/gh-pages/index.html#L103
Contains the text: My width fill fit to element
. Should the fill be a will?
Currently installing this library from npm
does not include the defaults for the sass
variables.
I have tested that they work by manually applying this code to my local node_modules
code and overwriting the default tooltip background color.
Please tag a newer release to include this fix, that came in pull request #52 .
Neither keyboard only users nor screenreader users will ever be able to perceive these tooltips. A pity.
Not an issue, just something I came up while thinking about having the possibility to not have the easing animation, making it optional, so I created a new data-attribute to remove it:
[data-balloon-static]:after, [data-balloon-static]:before {
-webkit-transition: none;
transition: none;
}
With this if one needs the Balloon without the animation just need to add to the markup:
<button data-balloon-length="small" data-balloon="Hi." data-balloon-static>Hover me!</button>
And, of course, congratulations for the awesome work ;)
Hi.
How can I add a break line to my tooltip?
How to have tooltip over normal text within a paragraph?
Hi I think it would make sense to hide these buttons on click as now (in chrome) there's a blue outline on click and once the button hides. Also this is the way it works in OsX and its really good UX.
This can be easily achieved by :active
css selector. I can fork & update if you are willing to accept?
http://kazzkiq.github.io/balloon.css/
The "GitHub Project" and "Download CSS" hover baloons are fuzzy/blurry. Others are okay.
SVG arrow should be optimized in order to save some bytes.
In this way, users don't need generate the production CSS files themselves.
Hello,
I don't know if I did something wrong as I didn't saw any issue related.
But on IE10 I had an issue where the tooltip was appearing if the mouse was hover the :after element, and not hover the tooltip himself. It's an issue related to the pointer-events:none which is not working < IE11.
I made a quick and dirty fix where I set by default a z-index: -1 to [data-balloon]:after and :before
and on :hover I set back the z-index to 10.
I tried data-balloon="Test test & # 13;& # 10; Test Test.\A Test Test
& # x a; Test Test" - but no one of them helps.
How can I break text in ballon to new line?
Thank you.
I needed to be able to show a tooltip programmatically so I ended up doing something like this:
[data-balloon-show="true"]:before{
opacity: 1 !important;
}
[data-balloon-show="false"]:after,
[data-balloon-show="false"]:before{
opacity: 0 !important;
}
[data-balloon-show="true"]:after,
[data-balloon-show="true"]:before,
[data-balloon-show="true"][data-balloon-pos="down"]:after,
[data-balloon-show="true"][data-balloon-pos="down"]:before{
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
[data-balloon-show="true"][data-balloon-pos="left"]:after,
[data-balloon-show="true"][data-balloon-pos="left"]:before{
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
[data-balloon-show="true"][data-balloon-pos="right"]:after,
[data-balloon-show="true"][data-balloon-pos="right"]:before{
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
So if I want to always display a tooltip I can just add data-balloon-show attribute to my element and it will display. Just sharing this in case someone else needs it or if you want to add this to the lib.
Thanks.
Hi,
Your ballon.css is awsome, i use it a lot, even better than bootstrap.
Today i found that with overflow: hidden; elements it does not work properly.
I have tried everything that i know, but without any solution, can you help me out?
Thanks in advance,
Tiago
Hi there,
First of all thanks a lot for this amazing tooltip. I have a tiny issue with it.
I'm using balloon.css with Material UI. I noticed that the tooltip is always underneath the components (like Select or Table Header Row). Wonder why so. I thought that it should be always on top of anything on the screen no matter what. But the opposite that it always got cut by the Material-UI components which are on the top of the page.
Hope it makes sense.
Right now tooltips are single-line and tend to break thru screen on smaller devices. They should be configurable for different sizes to prevent this issue.
Hello. Thank you for this. It is much improved over hint.css. Also, great to see that you are actively maintaining.
I've noticed that the tooltips adopt some styles from the element being tooltipped.
A couple of uses cases:
<strong>
text in the element leads to <strong>
text in the tooltip. With data-attributes on a an <h5>
element (using bootstrap base styling) the tooltip text is bold. No workaround that I've been able to find here.Here's a link to see: http://seemantk.com/viz/brennan (The tooltips over the bar charts, bar chart labels, and the 3 lists below (Interim Selection, First Full Term, Additional Terms. The tooltips on the map are from d3-tip, as balloon-css doesn't work on SVG).
Cheers,
Seemant
Below doesn't work in react
var test = 'Whats up!';
el = (
<li key={index} data-balloon={test} data-balloon-pos="down" data-balloon-break>
It only works if you put the text directly inside data-balloon
<li key={index} data-balloon="Whats up!" data-balloon-pos="down" data-balloon-break>
All issues and bugs related to IE11 (and IE11 ONLY) must be added in this Issue.
Screenshots of the bug are encouraged.
Is there anyway that the tooltip can be more than 1 line?
I'm having an issue where I have overflow:hidden on the parent element and this makes balloons hidden too.
I need overflow:hidden so I can cut the long text and on hovering with the mouse to show the full text.
How can I fix this ?
Hi,
I think your should remove !important
from balloon.css
and leave fixing possibility issues of bad styles to user, at least for font-family
.
Thanks.
Is there a way to fixed tooltip?
I need this to indicate a update in on page
Although the option to break lines using data-balloon-break attribute is not mentioned in wiki, I guess the definition is lacking :after selector in its definition, i.e. the styling should state:
&[data-balloon-break]:before {
white-space: normal;
}
The tool-tips are inaccessible for keyboard users. They should be triggered on focus as well as on hover.
You can make it screen reader accessible by changing the data-balloon
attribute to aria-label
, with the caveat that it will completely override the text in the control.
Some resources that can be helpful:
Hello,
Thanks for amazing tooltip!
I faced with small issue trough (see screenshot).
In my case it would be nice to align tooltip bottom-left from the element.
So the question is - Is it possible to align tooltip top-left, top-right, bottom-left, bottom-right
Like so:
https://ant.design/components/tooltip/#components-tooltip-demo-placement
Any other workaround would be appreciated as well.
Thanks!
As Balloon.css evolves and receives more and more PRs with quite advanced features, its getting harder to maintain two versions of source-code (Sass and LESS).
Since Sass became basically the lingua-franca of CSS pre-processors, and since virtually all PRs are made in Sass, I see no reason to keep updating LESS too. In the end, the final code will always compile to pure CSS anyways.
So, what do you folks think? Should Balloon.css keep only one source file (Sass), simplifying the development and deployment of new versions? Should we still keep maintaining both LESS and SASS?
<g data-v-7d0f1169="" name="root" class="configure" id="v-23" transform="translate(239,167) scale(1,1)" data-balloon="Whats up!" data-balloon-pos="up"> </g>
Would be excellent if this was added as a Bower package.
There is a delay in transition when you hover out of the element which blurs the text before the tooltip is closed. I fixed it by changing the transition mixin
@mixin transition ($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
-ms-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.