creativebulma / bulma-tooltip Goto Github PK

I cannot get this to work within a Svelte app.
I'm no expert but suspect it's due to how Svelte prunes rules not explicitly used within the markup (? - maybe).
This is just a guess based on the fact that everything looks as expected but there are no new :hover rules and cannot see anything being called.

There are plenty of alternatives, such as https://github.com/Abreu00/svelte-tooltip so maybe it's not a priority..

<span class="has-tooltip-right has-tooltip-multiline has-tooltip-danger tag is-danger is-light" data-tooltip="nice message">Offline</span>

breaks the arrow orientation. if you remove the has-tooltip-danger class, then the arrow is ok.. but no color.

Same as this issue:
Wikiki/bulma-tooltip#61

It would be great if would be possible to adjust the Y position of the tooltip with arrow so that it's slightly above the border of a button and not inside it.

How do I get rid of the dashed line? I noticed buttons don't have it, but I have an anchor tag that is styled as a bulma button, and it has the dashed line. There doesn't seem to be a way.

We've been finding this library very useful for creating tooltips (thanks!), but now trying to work out if they will be accessible for people who use screen readers. I can't find any mention in the code of aria-* attributes being added to contain the tooltip text or link the control to the tooltip element. Is that something you've implemented in another way?

Looking through the issues, I see that you've stopped the tooltip appearing on focus #1 , which I think may make showing the tooltips when using the keyboard alone impossible. Is there any plan to make that configurable, or to somehow fix the initial problem of tooltips staying on buttons after being clicked?

Thanks for all your work on this

Hey there,
first: thanks for your awesome work.

I have a problem: If i use the tooltip inside a table which is inside a table-container, the tooltip is not visible completely... Do you have any tips, how to solve that?
Example: https://jsfiddle.net/j8hqLrk2/
I think the problem is that table-container sets the overflow to auto and the overflow-y to hidden...

I'm trying to update tooltip text dynamically in angular project. I have tried both text interpolation and attribute binding but none of them works.

Text interpolation eg:

<span class="has-tooltip-arrow" data-tooltip="{{gettooltip()}}">
       <fa-icon class="pl-1" [icon]="['far', 'info-circle']"></fa-icon>
 </span>

Attribute binding eg:

<span class="has-tooltip-arrow" [data-tooltip]="gettooltip()">
       <fa-icon class="pl-1" [icon]="['far', 'info-circle']"></fa-icon>
 </span>

Tooltip package version
"@creativebulma/bulma-tooltip": "^1.2.0",

ng version

When I add a tooltip to a button, the tooltip remains shown after the button is clicked, even when the mouse is moved off the button.

It remains visible until you click somewhere else and the button becomes unfocused.

You can see this happening on the demo page: https://demo.creativebulma.net/components/tooltip/1.0/get-started/

The fading is not enabled by default, and it's missing documentation in https://bulma-tooltip.netlify.app/get-started/

Please add an example for the has-tooltip-fade class.

It took me some time to find that out.

the styles I'm importing are as follows (see image below)

however when I compile my scss file I get the following error:

first of all I'm not even importing the sass file as you can see, secondly it looks like the bulma _initial-variables aren't used?

anyway I don't really know what I'm doing wrong, so if anyone could provide some help that would be great.

When set using
cur_node.setAttribute("data-tooltip", "Multi 
 Line 
 Support");

It becomes Multi 
 Line 
 Support without any multiline.

Understandably this is the expected behavior here; but is there a way to add multiline tooltip via javascript?

It displays a tooltip without the arrow when I create a file upload label following the bulma documentation.
Looks like it only works correctly on a bulma button.

<div class="file">
      <label class="file-label" data-tooltip="add media">
          <input class="file-input" type="file" name="resume">
           <span class="file-cta">
              <span class="icon is-small">
                <i class="far fa-image fa-2x"></i>
              </span>
          </span>
      </label>
</div>

I don't know if this is by design, and the plugin expects for there to be a line-height value in my global stylesheet, but I'm finding that without specifying the following in my global stylesheet, the above issue occurs:

[data-tooltip] {
  line-height: 1rem;
}

A workaround is to set set the overflow property in the tabs element as follows :

  overflow: visible !important;

As mentioned here : Wikiki/bulma-tooltip#33

But another problem remains : the $tooltip-transition-duration setting do not seem to be respected after that workaround.

Wouldn't there be a way to make this extension work more properly?

BulmaTooltip is awsome, but currently the tooltip won't show on iOS using Safari after clicking on it. It will only show up after holding the element for a second the way you would select text. Will only be hidden again if you click and hold somewhere else. Works perfectly fine on desktop.

<span class="has-tooltip-arrow has-tooltip-left" data-tooltip="Hi, I'm a tooltip">
  Hover
</span>

Using latest iOS 17.4.1 with Safari

Hi, thanks for this extension. Works really well except for this issue that I ran into -

^ see the tooltip getting clipped off on the left. This happens when placed inside a div that has overflow-y: auto;. And still happens even if I also apply overflow-x: visible;.

Any way to work around this? Ideally I want the tooltip to always show on top of everything else.

sample code -

<div style="overflow-y: auto; max-height: 70vh; position: sticky;">
  <span class="icon has-text-danger has-tooltipl-multiline" data-tooltip="Last online: few seconds ago&#10; May 3, 2022">tooltip</span>
</div>

I noticed that if the element is clicked, the tooltip will always show unless you clicked somewhere outside the element. Maybe it would be better if the tooltip is hidden even after the element is clicked

Bug is back
Wikiki/bulma-tooltip#34

change
white-space: pre
to
white-space: pre-line

Hi! Not necessarily a code issue, but in your documentation you have "Preview" and "Code" tabs throughout the Get Started section, and you cannot switch over to the "Code" to see an example.
Even when forcing it using the Inspector, it appears that there is no actual Code preview available there. I just wanted to bring this to your attention!

Hello @CreativeBulma,

huge thanks for this cool package for Bulma!

Unfortunately I'm encountering some issues when I want to use tooltip with arrow in combination with different directions for different breakpoints.

I'm using this class combination:

.has-tooltip-arrow.has-tooltip-right-touch.has-tooltip-bottom-desktop.has-tooltip-fade

As result, this correct rule for arrow:

@media screen and (min-width: 1024px) {
  [data-tooltip].has-tooltip-bottom-desktop.has-tooltip-arrow:after { /* ... */ }
}

Gets overwritten with this incorrect (more specific) rule:

[data-tooltip]:not(.is-disabled).has-tooltip-arrow.has-tooltip-arrow:after,
[data-tooltip]:not(.is-loading).has-tooltip-arrow.has-tooltip-arrow:after,
[data-tooltip]:not([disabled]).has-tooltip-arrow.has-tooltip-arrow:after { /* ... */ }

• result for touch breakpoint:
  

• result for desktop breakpoint:
  

And one request for bonus points. I would appreciate some classes for not displaying tooltip per different breakpoints. E.g.:

.has-tooltip-hidden-#{$breakpoint} { /* ... */ }

Thanks

The documentation recommends using "has-tooltip-multiline" to add a multiline tooltip, but the source code that seems to work is "has-tooltipl-multiline", with that L typo.

Hello @CreativeBulma,

I found another tooltip issue with arrow usage. Arrow triangle is inset 1px into tooltip container. It is noticeable when you have semi-transparent background color as is set by default.

Here is screenshot (400% zoom) of this issue from Chrome:

Thanks

See screenshot:

The text with tooltip is at the beginning of 2nd line, but the tooltip is at the end of the 1st line. This is unexpected.

Source code for the above image is modified from the official documentation. Given below:

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://bulma-tooltip.netlify.app/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Get Started - BulmaTooltip</title>
    <link rel="icon" href="https://bulma-tooltip.netlify.app/favicon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="https://bulma-tooltip.netlify.app//css/docs.css" />
    <link rel="stylesheet" href="https://bulma-tooltip.netlify.app//css/bulma-tooltip.min.css" />
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body class=''>
    <div class="container is-fullheight">
        <div class="mobile-burger burger is-hidden-desktop" data-target="#doc-menu">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="columns is-gapless is-fullheight">
            <div id="doc-menu" class="column is-2 menu is-mobile">
                <a href="https://bulma-tooltip.netlify.app/" class="brand">
    <span class="title is-6 has-text-weight-normal">BulmaTooltip</span>
    <span class="subtitle tag is-primary is-light is-7 has-text-weight-light is-uppercase">docs</span>
</a>
<ul class="menu-list">
            <li class="">
                <a href="/" class="menu-item">
                    <span>Introduction</span>
                </a>
            </li>
            <li class="">
                <a href="/get-started/" class="menu-item">
                    <span>Get Started</span>
                </a>
            </li>
            <li class="menu-item has-dropdown ">
                <a href="#" class="menu-title">
                    <span>How-To</span>
                    <span class="menu-caret"></span>
                </a>
                <ul class="menu-dropdown">
                        <li class="">
                            <a href="/how-to/customize/" class="menu-item">Customize</a>
                        </li>
                </ul>
            </li>
            <li class="">
                <a href="/changelog/" class="menu-item">
                    <span>Changelog</span>
                </a>
            </li>
</ul>
            </div>
            <div class="column is-fullheight">
                <nav class="navbar" role="navigation" aria-label="navigation" style="background-color: transparent !important;">
    <div class="navbar-menu">
        <div class="navbar-start">
        </div>
        <div class="navbar-end">
            <a class="navbar-item is-square" href="https://github.com/CreativeBulma/bulma-tooltip" alt="Github repository" target="_blank">
                <span class="icon">
                    <i class="fab fa-lg fa-github"></i>
                </span>
            </a>
        </div>
    </div>
</nav>
                <div class="section is-fullheight" style="padding: 3rem;">
                    <div class="content is-fullheight">
                        <h1 id="get-started">Get started</h1>
<div class="preview">
    <div class="tabs">
        <ul>
            <li class="is-active" data-toggle="tab" data-target="#previewdefault" role="tab" aria-selected="true">
                <a>Preview</a>
            </li>
            <li data-toggle="tab" data-target="#previewCodedefault" role="tab" aria-selected="false">
                <a>Code</a>
            </li>
        </ul>
    </div>
    <div class="tab-content" id="preview-default">
        <div class="tab-pane is-active" id="previewdefault" role="tabpanel" aria-labelledby="preview-default">
<p>Lorem ipsum dolor sit amet, asdfasdfasdfasdfasdfasdfsdfasd asdfasdfasd fasdfasdfasdfA   asdfasdfasd asdfasdfasd asdfasdfasd asdfasdfasd asdfasdfasd
<span data-tooltip="Tooltip content">consectetur adipisicing elit</span>. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.</p>
        </div>
        <div class="tab-pane" id="previewCodedefault" role="tabpanel" aria-labelledby="preview-code-default">
            <div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">
&lt;<span style="color:#309;font-weight:bold">p</span>&gt;Lorem ipsum dolor sit amet, &lt;<span style="color:#309;font-weight:bold">span</span> <span style="color:#309">data-tooltip</span><span style="color:#555">=</span><span style="color:#c30">&#34;Tooltip content&#34;</span>&gt;consectetur adipisicing elit&lt;/<span style="color:#309;font-weight:bold">span</span>&gt;. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.&lt;/<span style="color:#309;font-weight:bold">p</span>&gt;
</code></pre></div>
        </div>
    </div>
</div>
<p>Tooltip can be used on any type of HTML element supporting dataset.
<script src="https://bulma-tooltip.netlify.app//js/clipboard.min.js" type="text/javascript"></script>
    <script src="https://bulma-tooltip.netlify.app//js/docs.js" type="text/javascript"></script>
</body>
</html>

Hello @CreativeBulma,

it would be nice to have default sass variables for transition-duration and transition-timing-function instead of hard-coded values.

Thanks

I have been using the 'bulma-tooltip' package in my React project and now want to upgrade to '@creativebulma/bulma-tooltip'.
I have been importing the packge (and all other css packages) with the following code:
import 'bulma-tooltip/dist/css/bulma-tooltip.min.css';

Now that I have installed the new tooltip package via npm, I have replaced that line with the following one:
import '@creativebulma/bulma-tooltip/dist/css/bulma-tooltip.min.css';

When launching the application, I get the following error:
"Module not found: Can't resolve '@creativebulma/bulma-tooltip/dist/css/bulma-tooltip.min.css'"

The 'Get Started' section of the documentation does not explain how to import the package.

Help with this matter will be appreciated

Bulma v1 dropped today :)

https://github.com/jgthms/bulma/releases/tag/1.0.0

error during build:
Error: Undefined variable.
  ╷
4 │ $tooltip-background-color: $grey-dark !default
  │                            ^^^^^^^^^^
  ╵
  node_modules/@creativebulma/bulma-tooltip/src/sass/_variables.sass 4:28  @import
  node_modules/@creativebulma/bulma-tooltip/src/sass/index.sass 1:9        @import
  resources/sass/app.scss 19:9                                             root stylesheet

It would be great to either make the text bold or wrap it in .

When a tooltip expands above the upper limit of a div with class table-container it gets cropped due to overflow settings.
You can find an example attached.

Thank you!
Best regards

Hello @CreativeBulma,

it would be nice to have option to set different text align of tooltip (globally and per different breakpoints) and its default sass variable. This will be useful for tooltips that contains new line characters or for .has-tooltip-multiline option.

Thanks