jackdomleo7/cooltipz.css

A highly customisable, minimal, pure CSS tooltip library

Hi, I'm Jack Domleo 👋

A passionate frontend developer from Nottinghamshire, UK.

Portfolio: jackdomleo.dev

cooltipz.css's Issues

Move the documentation website source code into the master branch

Currently, the documentation website source code is sitting in the gh-pages branch. I want to change this so it sits in a docs/ directory in the master branch, then automatically deploy to the gh-pages branch. I also want to utilise Nuxt 3 rather than raw HTML, CSS & JS.

New line in content

Hi,

I love this library that allows to customizable how I handle my tooltips.
But it seems that the "aria-label" can't contains html code like <br /> nor \n to indicate a new line in the tooltip.

Is that something that can be done ?

Thanks

[BUG]: When building with a framework such as Nuxt, the opacity is changed from 100% to 1%

Bug Report

Details of the bug

Cooltipz.css version: Latest

When building with a framework such as Nuxt, the opacity is changed from 100% to 1%

What is the expected result?

Should render as 100% or as 1.

What is the actual result?

Renders as 1%

Acceptance criteria

• Fix bug

Why is fixing this bug important?

Because otherwise it doesn't show for various frameworks such as Nuxt

data-cooltipz-dir="top" not readable and negates element

have this in html
<div class="custom--tooltip scrollBtn up noprint" data-cooltipz-dir="top" aria-label="Go to top" onclick="scrollToTop()" ><i style="" class="fa fa-chevron-up"></i></div>

it makes div disappear

when I remove data-cooltipz-dir="top" the html displays but foesn't show tooltip

i succesfully used in another app with no problems

Can;t figure out

File size is too big, please make it purgecss friendly.

Thank you!

Migration guide for migrating from v1 to v2

I feel a small migration guide on how to convert from v1 to v2 is needed. Could we make use of GitHub Wikis for this?

Default direction and border customization

Is there a way to specify the default direction in css, so that for each definition of the tooltip in an html element (e.g. <div aria-label="...">...</div>, it's not necessary to add data-cooltipz-dir="top")? The documentation only shows customization of other properties such as color, but not the direction.

Migrate all @import at-rules to @use in Sass

Sass are deprecating the @import at-rule in the distant future, so it'd be good if we could plan to update to use the recommended @use at-rule instead.

Convert all @import rules to a @use rule and more specifically add a index file into each directory of partials/mixins/etc and then use a single @use "some-dir" as * (without a namespace) rule to load in the entire directory in the main Sass file which gets compiled. Loading using @use and index files (with @forward in the index files) allows us to load all of a directories content (partials, vars, mixins, functions etc) with a single @use rule which is super nice.

https://sass-lang.com/documentation/at-rules/use

Add contributing guidelines and a code of conduct

These are useful for whenever anyone wants to contribute to this project.

[FEATURE]: CSS-variable for font-family

Now is hardcoded. Have to use crutch:

[aria-label][data-cooltipz-dir]::after, [aria-label][class*=cooltipz]::after {
  font-family: $font-family-base;
}

Create a GitHub workflow

A workflow is good for automating tasks, it is also good for helping check the validity of new pull requests.

• build job
  • Clean install npm dependencies
  • Can project build successfully
  • Is git status still clean after building
  • Check project linting
• publish job
  • Requires build
  • Only publish to npm on master branch, otherwise
  • Only publish to npm if the version in master is different to the version in the npm registry

[FEATURE]: arrow offset

Hello,

I'd like to suggest a feature. When the border radius of the tip is high, the arrow leaves a gap:

The feature is the ability to translate this arrow.

--cooltipz-arrow-side-offset: 5px;

Called it "side" because it should be none when it is centered.

In my case it would be:

right: calc(var(--cooltipz-arrow-size, .3125rem)/2 + var(--cooltipz-arrow-side-offset));

Thanks for your work 👍

[ENHANCEMENT]: SCSS Linting

Project Enhancement or Maintenance Idea

Describe the enhancement or maintenance

It would be good to install an SCSS linter such as Stylelint so we can standardise code.

Acceptance criteria

• Install a linter to lint SCSS
• Lint any files that need linting
• Add a linting check to the pipeline

Why is this enhancement or maintenance important?

This is important to ensure consistency across SCSS code patterns

[FEATURE]: Exclude empty aria-label

Will be good, if [aria-label] selector ignoring empty attributes like this: [aria-label]:not([aria-label]="")
Now i have to use crutch:

[aria-label=""]::before, [aria-label=""]::after {
  display: none;
}

[BUG]: with scale()

when using in element with scale :
&:hover {
transform: scale(1.2);

                &:active {
                    transform: scale(1);
                }
     }
     style is broken (background color, font width)

[BUG]: Can't override Sass !default variables in v2.0.0

Bug Report

Details of the bug

Cooltipz.css version: 2.0.0
When trying to override the Sass variables with a custom setting, it errors saying the variables don't exist in the module.

What is the expected result?

Overriding the Sass variables will render the customised value.

What is the actual result?

Overriding the Sass variables causes an error.

Acceptance criteria

• Allow to override Sass variables when using as a module

Why is fixing this bug important?

Customisation is a big USP of Cooltipz.css, so good to get this resolved sooner rather than later.

Make Sass an optional peer dependency

Sass should be added as an optional peer dependency. It is optional because if the developer decides to import the .css file, then they don't necessarily need it. But if they want to import the .scss file, then ideally they need Sass installed to do so.

[BUG]: gap

When we use --cooltipz-border-width : 1px (at least on chrome). There is a gap between tooltip border and tooltip arrow

Newline

Is there anyway to get a newline into a tooltip?

I'm really loving the speed of css3 tooltips over the likes of tippyjs that I would normally use (Though I still need to use something like tippy or bootstraps tooltips if I want HTML in a tooltip), but for a lot of the basic stuff, this library works perfectly.

However, for some reason, I can't get 
 to work.

In a regular 'title' attribute, I can do something like

title="test
test2"

and the tooltip when it shows will have 'test2' on the line below 'test'.

Add testing

It would be useful to add some kind of automated testing so developers using this package are assured. And so we have confidence when publishing a new version.

Some investigation is first needed into the best tool. Below are some requirements needed:

• Tests must run quickly (Cypress is good but can often be very heavy to install and run and can take a while)
• Must test the visuals, I.e. take a screenshot and compare
• Run tests in pipeline

[FEATURE]: Customisation of attribute the tooltip is bound to

Will be epic good, if can be use not aria-label attribute for content. I want use title attribute, for SEO reasons.

Create issue templates & a pull request template

Issue and pull request templates are good for ensuring the most information is provided when raising issues or pull requests.

[BUG]: Important comment appears in the middle of the stylesheet rather than at the start

Bug Report

Details of the bug

Cooltipz.css version: 2.0.0

Since v2.0.0, the below comment that should appear at the start of the stylesheet, now appears in the middle:

/*! Cooltipz.css v2.0.0 | MIT License | github.com/jackdomleo7/Cooltipz.css */

What is the expected result?

Important copyright comment appears at the very start of the stylesheet

What is the actual result?

Important copyright comment appears somewhere in the middle of the stylesheet

Acceptance criteria

• Make important copyright comment appear at the start of the stylesheet

Why is fixing this bug important?

It's important to have the copyright at the beginning so it is easily visible.