kazzkiq / balloon.css Goto Github PK

Using translate3d(-50%, 0, 0)

Using translate(-50%, 0)

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;
}

Even if it involves javascript, no problem...

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 ;)

Is there a way to fixed tooltip?
I need this to indicate a update in on page

Is there anyway that the tooltip can be more than 1 line?

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

Hey, thank you for making this CSS library.

I'm using the generated CSS file, and while using this, I noticed that tooltips are being cut off by the screen edge.

Is there a way for tooltips/balloons to wrap at the end of the screen?

How to have tooltip over normal text within a paragraph?

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.

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:

1. opacity is the same as the element's opacity.
   • The workaround was straightforward enough in my case (to , put the data attributes on the element, and stick the text in a child and apply opacity to that span - it's a bit klunky adding elements, but not a big deal.
2. <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

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?

@Kivylius

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.

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?

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.

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.

https://cdn.rawgit.com/kazzkiq/balloon.css/master/balloon.css page is not available.

SVG arrow should be optimized in order to save some bytes.

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;
}

In this way, users don't need generate the production CSS files themselves.

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?

Tooltip is very big with medium size when using sass file.

1. The tool-tips are inaccessible for keyboard users. They should be triggered on focus as well as on hover.

2. 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:

• Example of an accessible CSS-only tool-tip on a form control: https://jsfiddle.net/russambiata/55L1jcwb/
• Accessible Emoji (for non-form controls): https://tink.uk/accessible-emoji/
• Combining the two previous techniques, and making it work in Windows High Contrast Mode: http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
• The ARIA tool-tip pattern, though overkill for what you are doing: https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip

Or just provide some ways to control the line break.
Thanks.

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?

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.
How can I add a break line to my tooltip?

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.

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.

Hard coded prefixes like webkit, ms, moz looks not so good.
autoprefixer

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">

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!

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.

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.

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.

Would be excellent if this was added as a Bower package.

Hi,

It seems that doesn't work on button element on IE11
The issue occurs also on example page, you can test directy.

I want to know how the CSS browser is compatible.

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?

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?

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&#10;up!" data-balloon-pos="down" data-balloon-break>

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.

All issues and bugs related to IE11 (and IE11 ONLY) must be added in this Issue.

Screenshots of the bug are encouraged.

You should include browser support.

How can I change color of popup other than black?

http://kazzkiq.github.io/balloon.css/

The "GitHub Project" and "Download CSS" hover baloons are fuzzy/blurry. Others are okay.

https://aboutmybrowser.com/NlLd49Rv

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!

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?