├── src ├── docs │ ├── themes │ │ └── creativebulma │ │ │ ├── layouts │ │ │ ├── _default │ │ │ │ ├── list.html │ │ │ │ ├── _markup │ │ │ │ │ └── render-link.html │ │ │ │ ├── baseof.html │ │ │ │ └── single.html │ │ │ ├── partials │ │ │ │ ├── header.html │ │ │ │ ├── footer.html │ │ │ │ ├── navbar.html │ │ │ │ ├── head.html │ │ │ │ └── menu.html │ │ │ ├── shortcodes │ │ │ │ ├── notification.html │ │ │ │ ├── changelog.html │ │ │ │ ├── link.html │ │ │ │ ├── tab.html │ │ │ │ ├── button.html │ │ │ │ ├── variables.html │ │ │ │ ├── table.html │ │ │ │ ├── options.html │ │ │ │ ├── tabs.html │ │ │ │ ├── preview.html │ │ │ │ ├── tag.html │ │ │ │ └── api.html │ │ │ ├── index.html │ │ │ └── 404.html │ │ │ ├── archetypes │ │ │ ├── default.md │ │ │ └── changelog.md │ │ │ ├── static │ │ │ ├── images │ │ │ │ └── clippy.svg │ │ │ ├── js │ │ │ │ ├── docs.js │ │ │ │ └── clipboard.min.js │ │ │ └── css │ │ │ │ └── docs.css │ │ │ ├── theme.toml │ │ │ └── LICENSE │ ├── archetypes │ │ └── default.md │ ├── data │ │ ├── social.json │ │ ├── versions.json │ │ └── variables.json │ ├── content │ │ ├── changelog.md │ │ ├── release │ │ │ ├── 1.0.1.md │ │ │ ├── 1.md │ │ │ ├── 1.2.md │ │ │ ├── 1.0.2.md │ │ │ └── 1.1.0.md │ │ ├── _index.md │ │ ├── how-to │ │ │ └── customize.md │ │ └── get-started.md │ ├── config.toml │ └── layouts │ │ └── partials │ │ └── head.html └── sass │ ├── _animation.sass │ ├── _variables.sass │ ├── _position.sass │ ├── index.sass │ └── _responsiveness.sass ├── .gitignore ├── demo.sass ├── docs ├── images │ └── clippy.svg ├── tags │ └── index.xml ├── categories │ └── index.xml ├── 404.html ├── how-to │ ├── index.xml │ └── customize │ │ └── index.html ├── sitemap.xml ├── release │ ├── 1 │ │ └── index.html │ ├── index.xml │ ├── 1.0.1 │ │ └── index.html │ ├── 1.2 │ │ └── index.html │ ├── 1.1.0 │ │ └── index.html │ └── 1.0.2 │ │ └── index.html ├── js │ ├── docs.js │ └── clipboard.min.js ├── index.xml ├── index.html ├── css │ └── docs.css ├── changelog │ └── index.html └── get-started │ └── index.html ├── .eslintrc ├── LICENSE ├── package.json ├── README.md └── gulpfile.js /src/docs/themes/creativebulma/layouts/_default/list.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/archetypes/default.md: -------------------------------------------------------------------------------- 1 | +++ 2 | +++ 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | Gemfile.lock 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /demo.sass: -------------------------------------------------------------------------------- 1 | @import 'node_modules/bulma/sass/utilities/_all.sass' 2 | @import 'src/sass/index' -------------------------------------------------------------------------------- /src/docs/archetypes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "{{ replace .Name "-" " " | title }}" 3 | date: {{ .Date }} 4 | draft: true 5 | --- 6 | 7 | -------------------------------------------------------------------------------- /src/docs/data/social.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "github", 4 | "title" : "Github repository", 5 | "url": "https://github.com/CreativeBulma/bulma-tooltip" 6 | } 7 | ] 8 | -------------------------------------------------------------------------------- /src/docs/content/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Changelog" 3 | date: "2020-03-21" 4 | menu: "main" 5 | weight: 100 6 | draft: false 7 | --- 8 | 9 | # Changelog 10 | 11 | {{< changelog >}} 12 | -------------------------------------------------------------------------------- /src/sass/_animation.sass: -------------------------------------------------------------------------------- 1 | =tooltip-fade 2 | &::before, 3 | &::after 4 | transition: opacity $tooltip-animation-duration $tooltip-animation-transition-timing-function, visibility $tooltip-animation-duration $tooltip-animation-transition-timing-function -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/notification.html: -------------------------------------------------------------------------------- 1 | {{ $_hugo_config := `{ "version": 1 }` }} 2 |
{{ .Inner | $.Page.RenderString }}
-------------------------------------------------------------------------------- /src/docs/content/release/1.0.1.md: -------------------------------------------------------------------------------- 1 | --- 2 | type: "changelog" 3 | title: "(2020-03-29)" 4 | date: 2020-03-21T10:46:47+02:00 5 | weight: 3 6 | version: v1.0.1 7 | draft: false 8 | --- 9 | 10 | **Minor Fixes** 11 | - {{< tag fixed >}} docs - Issue with generated site 12 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/_default/_markup/render-link.html: -------------------------------------------------------------------------------- 1 | {{ .Text | safeHTML }} -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/partials/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ block "footer_js" . }}{{ end }} 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/docs/content/release/1.md: -------------------------------------------------------------------------------- 1 | --- 2 | type: "changelog" 3 | title: "(2020-03-21)" 4 | date: 2020-03-21T10:46:47+02:00 5 | weight: 1 6 | version: v1.0.0 7 | draft: false 8 | --- 9 | 10 | **First working version** 11 | - {{< tag added >}} Styles : with or without arrow 12 | - {{< tag added >}} Multi-colors 13 | - {{< tag added >}} Position modifiers 14 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{- partial "head.html" . -}} 4 | 5 | {{- partial "header.html" . -}} 6 |
7 | {{- block "main" . }}{{- end }} 8 |
9 | {{- partial "footer.html" . -}} 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/archetypes/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "({{ now.Format "2006-01-02" }})" 3 | subtitle: created on {{ now.Format "2006-01-02" }} 4 | date: {{ .Date }} 5 | weight: 6 | version: 7 | draft: true 8 | --- 9 | 10 | 11 | - {{< tag added >}} New functionality 12 | -------------------------------------------------------------------------------- /src/docs/config.toml: -------------------------------------------------------------------------------- 1 | baseURL = "https://bulma-tooltip.netlify.app/" 2 | languageCode = "en-us" 3 | title = "BulmaTooltip" 4 | theme = "creativebulma" 5 | [markup] 6 | [markup.highlight] 7 | style = "manni" 8 | 9 | [params] 10 | version = "1.2" 11 | 12 | [menu] 13 | 14 | [[menu.main]] 15 | identifier = "how-to" 16 | name = "How-To" 17 | url = "#" 18 | weight = 20 19 | -------------------------------------------------------------------------------- /src/docs/data/versions.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "version": "v1.2", 4 | "url": "https://demo.creativebulma.net/components/tooltip/1.2/" 5 | }, 6 | { 7 | "version": "v1.1", 8 | "url": "https://demo.creativebulma.net/components/tooltip/1.1/" 9 | }, 10 | { 11 | "version": "v1.0", 12 | "url": "https://demo.creativebulma.net/components/tooltip/1.0/" 13 | } 14 | ] 15 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/changelog.html: -------------------------------------------------------------------------------- 1 | {{ range where .Site.RegularPages.ByDate.Reverse "Section" "release" }} 2 |
3 |
4 |

5 | {{ .Params.Version }} {{ .Title }} 6 |

7 | {{ .Params.Subtitle }} 8 |
9 | {{ .Content }} 10 |
11 |
12 |
13 | {{ end }} 14 | -------------------------------------------------------------------------------- /src/docs/content/release/1.2.md: -------------------------------------------------------------------------------- 1 | --- 2 | type: "changelog" 3 | title: "(2020-05-17)" 4 | date: 2020-05-17T11:46:47+02:00 5 | weight: 2 6 | version: v1.2.0 7 | draft: false 8 | --- 9 | 10 | **New modifiers and better multiline support** 11 | - {{< tag added >}} New sass variables to customize tooltip fade animation 12 | - {{< tag added >}} New modifier to change tooltip text alignment 13 | - {{< tag info "docs" >}} Add missing multiline tooltip documentation 14 | -------------------------------------------------------------------------------- /docs/images/clippy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/link.html: -------------------------------------------------------------------------------- 1 | {{ $_hugo_config := `{ "version": 1 }` }} 2 | {{ $ref := "" }} 3 | {{ $target := "" }} 4 | {{ with .Get "href" }} 5 | {{ $ref = . }} 6 | {{ end }} 7 | {{ with .Get "target" }} 8 | {{ $target = . }} 9 | {{ end }} 10 | {{ with .Get "relref" }} 11 | {{ $ref = relref $ . }} 12 | {{ end }} 13 | {{ with .Get "text" }}{{ . }}{{ end }} -------------------------------------------------------------------------------- /src/docs/content/release/1.0.2.md: -------------------------------------------------------------------------------- 1 | --- 2 | type: "changelog" 3 | title: "(2020-03-29)" 4 | date: 2020-03-29T10:46:47+02:00 5 | weight: 2 6 | version: v1.0.2 7 | draft: false 8 | --- 9 | 10 | **Minor Fixes** 11 | - {{< tag fixed >}} {{% link text="Tooltip remains visible after clicking a button" href="https://github.com/CreativeBulma/bulma-tooltip/issues/1" target="_blank" %}} 12 | - {{< tag fixed >}} docs - Test on LAN : Docs site is now availabel on LAN when using `npm run doc:serve` 13 | - {{< tag fixed >}} docs - Changelog display issue 14 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/static/images/clippy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/content/release/1.1.0.md: -------------------------------------------------------------------------------- 1 | --- 2 | type: "changelog" 3 | title: "(2020-05-10)" 4 | date: 2020-05-10T11:46:47+02:00 5 | weight: 2 6 | version: v1.1.0 7 | draft: false 8 | --- 9 | 10 | **New helpers and fixes** 11 | - {{< tag fixed >}} {{% link text="Issues with combination of arrow and directions options" href="https://github.com/CreativeBulma/bulma-tooltip/issues/3" target="_blank" %}} 12 | - {{< tag added >}} helpers - New helper to hide tooltip on specific breakpoints 13 | - {{< tag info "docs" >}} Add missing responsiveness documentation 14 | -------------------------------------------------------------------------------- /src/sass/_variables.sass: -------------------------------------------------------------------------------- 1 | $tooltip-animation-duration: .3s !default 2 | $tooltip-animation-transition-timing-function: linear !default 3 | $tooltip-arrow-size: 6px !default 4 | $tooltip-background-color: $grey-dark !default 5 | $tooltip-background-opacity: 0.9 !default 6 | $tooltip-color: $white !default 7 | $tooltip-font-family: $family-primary !default 8 | $tooltip-font-size: $size-7 !default 9 | $tooltip-max-width: 15rem !default 10 | $tooltip-padding: .5rem 1rem !default 11 | $tooltip-radius: $radius-small !default 12 | $tooltip-z-index: 1020 !default -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/tab.html: -------------------------------------------------------------------------------- 1 | {{ $tab := .Get "tabNum" }} 2 | {{ $tabID := print (.Parent.Get "tabID") $tab }} 3 | {{ $tabName := (print "tabName" $tab) }} 4 | 5 | {{ if eq $tab "1" }} 6 |
7 | {{ $.Page.RenderString $.Inner }} 8 |
9 | 10 | {{ else }} 11 | 12 |
13 | {{ $.Page.RenderString $.Inner }} 14 |
15 | 16 | {{ end }} -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/theme.toml: -------------------------------------------------------------------------------- 1 | # theme.toml template for a Hugo theme 2 | # See https://github.com/gohugoio/hugoThemes#themetoml for an example 3 | 4 | name = "Creativebulma" 5 | license = "MIT" 6 | licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE" 7 | description = "" 8 | homepage = "http://example.com/" 9 | tags = [] 10 | features = [] 11 | min_version = "0.41" 12 | 13 | [author] 14 | name = "" 15 | homepage = "" 16 | 17 | # If porting an existing theme 18 | [original] 19 | name = "" 20 | homepage = "" 21 | repo = "" 22 | -------------------------------------------------------------------------------- /docs/tags/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tags on BulmaTooltip 5 | https://demo.creativebulma.net/components/tooltip/1.2/tags/ 6 | Recent content in Tags on BulmaTooltip 7 | Hugo -- gohugo.io 8 | en-us 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/button.html: -------------------------------------------------------------------------------- 1 | {{ $_hugo_config := `{ "version": 1 }` }} 2 | {{ $ref := "" }} 3 | {{ $target := "" }} 4 | {{ with .Get "href" }} 5 | {{ $ref = . }} 6 | {{ $target = "_blank" }} 7 | {{ end }} 8 | {{ with .Get "relref" }} 9 | {{ $ref = relref $ . }} 10 | {{ end }} 11 | 12 | {{ $icon := .Get "icon" }} 13 | {{ if ($icon) }} 14 | 15 | {{ end }} 16 | {{ .Inner }} 17 | -------------------------------------------------------------------------------- /docs/categories/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Categories on BulmaTooltip 5 | https://demo.creativebulma.net/components/tooltip/1.2/categories/ 6 | Recent content in Categories on BulmaTooltip 7 | Hugo -- gohugo.io 8 | en-us 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/variables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ range .Site.Data.variables }} 11 | 12 | 13 | 14 | 15 | 16 | {{ end }} 17 | 18 |
Variable nameDescriptionDefault value
{{ .name }}{{ .description | $.Page.RenderString }}{{ .value }}
-------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/partials/navbar.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true, 6 | "jest": true 7 | }, 8 | "globals": { 9 | "ENV": true, 10 | "page": true, 11 | "browser": true, 12 | "context": true, 13 | "jestPuppeteer": true 14 | }, 15 | "extends": "eslint:recommended", 16 | "parserOptions": { 17 | "sourceType": "module", 18 | "ecmaVersion": 9, 19 | "ecmaFeatures": { 20 | "experimentalObjectRestSpread": true 21 | } 22 | }, 23 | "rules": { 24 | "indent": [ 25 | "error", 26 | "tab" 27 | ], 28 | "linebreak-style": [ 29 | "error", 30 | "unix" 31 | ], 32 | "quotes": [ 33 | "error", 34 | "single" 35 | ], 36 | "semi": [ 37 | "error", 38 | "always" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/table.html: -------------------------------------------------------------------------------- 1 | {{ $source := index .Site.Data (.Get "source") }} 2 | {{ $headers := $source.headers }} 3 | {{ $body := $source.body }} 4 | 5 | 6 | 7 | {{ range $headers }} 8 | 9 | {{ end }} 10 | 11 | 12 | 13 | {{ range $body }} 14 | 15 | 16 | 17 | 18 | 19 | {{ end }} 20 | 21 |
{{ .name }}
{{ .name }}{{ .description | $.Page.RenderString }}{{ highlight .example "javascript" "" }}
-------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{ range .Site.Data.options }} 12 | 13 | 14 | 15 | {{ if .type }} 16 | 17 | {{ end }} 18 | 19 | 20 | {{ end }} 21 | 22 |
Option nameDescriptionTypeDefault value
{{ .name }}{{ .description | $.Page.RenderString }}{{ .type | $.Page.RenderString }}{{ .value }}
-------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/tabs.html: -------------------------------------------------------------------------------- 1 |
2 | 21 |
22 |
23 | {{ .Inner }} 24 |
-------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/index.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 |
3 | 4 |
5 | 6 | 7 | 8 |
9 |
10 | 13 |
14 | {{ partial "navbar" . }} 15 | 16 |
17 |
18 | {{ .Content }} 19 |
20 |
21 |
22 |
23 |
24 | {{ partial "footer" . }} -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/_default/single.html: -------------------------------------------------------------------------------- 1 | {{ partial "head" . }} 2 |
3 | 4 |
5 | 6 | 7 | 8 |
9 |
10 | 13 |
14 | {{ partial "navbar" . }} 15 | 16 |
17 |
18 | {{ .Content }} 19 |
20 |
21 |
22 |
23 |
24 | 25 | {{ partial "footer" . }} -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ block "meta_tags" . }}{{end}} 11 | 12 | {{ block "title" . }}{{ .Title }} - {{ .Site.Title }}{{ end }} 13 | 14 | 15 | 16 | 17 | 18 | 19 | {{ block "header_css" . }}{{ end }} 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/docs/layouts/partials/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ block "meta_tags" . }}{{end}} 11 | 12 | {{ block "title" . }}{{ .Title }} - {{ .Site.Title }}{{ end }} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | {{ block "header_css" . }}{{ end }} 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 404 Page not found - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 |

Page not found

25 |

26 | 27 |

28 |
29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/docs/content/_index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Introduction" 3 | date: "2020-03-21" 4 | menu: "main" 5 | weight: 1 6 | draft: false 7 | --- 8 | 9 | # Introduction 10 | ## What is BulmaTooltip 11 | 12 | BulmaTooltip is a pure CSS {{% link text="Bulma" href="https://bulma.io" target="_blank" %}} extension which brings the ability to **easily display a tooltip attached to any kind of element, in different position**. 13 | 14 | ## License 15 | BulmaTootlip is © 2020 by [CreativeBulma](https://github.com/CreativeBulma). 16 | 17 | BulmaTootlip is distributed under [MIT](https://github.com/CreativeBulma/bulma-tooltip/blob/master/LICENSE) license. 18 | 19 | ## Contributing 20 | 21 | **Contribution are welcome!** 22 | 23 | You found a bug, a typo issue ? Feel free to create a PR on the [github repository](https://github.com/CreativeBulma/bulma-tooltip/) of this project. 24 | 25 | When contributing to this project, please first discuss the change you wish to make via issue on the [github repository](https://github.com/CreativeBulma/bulma-tooltip//issues), email, or any other method with the owners of this project before making a change. 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 CreativeBulma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ block "meta_tags" . }}{{end}} 11 | 12 | {{ block "title" . }}{{ .Title }} - {{ .Site.Title }}{{ end }} 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 |

Page not found

25 |

26 | 27 |

28 |
29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 YOUR_NAME_HERE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/preview.html: -------------------------------------------------------------------------------- 1 | {{ $previewID := $.Get "id" }} 2 | {{ $lang := "html" }} 3 | {{ with .Get "lang" }} 4 | {{ $lang = . }} 5 | {{ end }} 6 | {{ $options := "" }} 7 | {{ with .Get "options" }} 8 | {{ $options = . }} 9 | {{ end }} 10 |
11 |
12 | 22 |
23 |
24 |
25 | {{ $.Inner }} 26 |
27 |
28 | {{ highlight $.Inner $lang $options }} 29 |
30 |
31 |
-------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/tag.html: -------------------------------------------------------------------------------- 1 | {{ $type := .Get 0 }} 2 | {{ $text := .Get 1 }} 3 | {{ with eq $type "added" }} 4 | {{ $type }} 5 | {{ end }} 6 | {{ with eq $type "changed" }} 7 | {{ $type }} 8 | {{ end }} 9 | {{ with eq $type "fixed" }} 10 | {{ $type }} 11 | {{ end }} 12 | {{ with eq $type "performance" }} 13 | {{ $type }} 14 | {{ end }} 15 | {{ with eq $type "security" }} 16 | {{ $type }} 17 | {{ end }} 18 | {{ with eq $type "removed" }} 19 | {{ $type }} 20 | {{ end }} 21 | {{ with eq $type "deprecated" }} 22 | {{ $type }} 23 | {{ end }} 24 | {{ with eq $type "info" }} 25 | {{ $text }} 26 | {{ end }} 27 | {{ with eq $type "success" }} 28 | {{ $text }} 29 | {{ end }} 30 | {{ with eq $type "warning" }} 31 | {{ $text }} 32 | {{ end }} 33 | {{ with eq $type "danger" }} 34 | {{ $text }} 35 | {{ end }} -------------------------------------------------------------------------------- /src/docs/content/how-to/customize.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Customize" 3 | date: "2020-03-21" 4 | menu: 5 | main: 6 | parent: 'how-to' 7 | weight: 1 8 | weight: 1 9 | draft: false 10 | --- 11 | 12 | # How-To 13 | ## Customize 14 | This component has been designed to be easily customizable. 15 | 16 | There is 2 ways to customize it, depending on the way you integrate this component into your project. 17 | 18 | ## Sass 19 | If you use the Sass source into your project, all you have to do is to customize variables before importing the component. 20 | ```sass 21 | $tooltip-radius: 6px 22 | 23 | @import '@creativebulma/bulma-tooltip' 24 | ``` 25 | 26 | ### Variables 27 | {{< variables >}} 28 | 29 | ## CSS 30 | If you uses the CSS version you have to customize Sass source files then rebuild the CSS file. 31 | 32 | ### First, let's install some packages! 33 | 34 | ```shell 35 | npm install 36 | ``` 37 | This command will install all development required package. 38 | 39 | ### Customize 40 | Customize Sass variables defined wihtin `src/sass/_variables.sass` file. 41 | 42 | ### Build 43 | You can build CSS files by launching the build process with the command: 44 | ```shell 45 | npm run build 46 | ``` 47 | Styles are built using `node-sass` from `src/sass` directory and minify them. 48 | Built files will be copied into `/dist` directory (can be customized within package.json). 49 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/partials/menu.html: -------------------------------------------------------------------------------- 1 | 2 | {{ .Site.Title }} 3 | docs 4 | 5 | -------------------------------------------------------------------------------- /docs/how-to/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | How-tos on BulmaTooltip 5 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/ 6 | Recent content in How-tos on BulmaTooltip 7 | Hugo -- gohugo.io 8 | en-us 9 | Sat, 21 Mar 2020 00:00:00 +0000 10 | 11 | 12 | 13 | 14 | 15 | Customize 16 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/customize/ 17 | Sat, 21 Mar 2020 00:00:00 +0000 18 | 19 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/customize/ 20 | How-To Customize This component has been designed to be easily customizable. 21 | There is 2 ways to customize it, depending on the way you integrate this component into your project. 22 | Sass If you use the Sass source into your project, all you have to do is to customize variables before importing the component. 23 | $tooltip-radius: 6px @import &#39;@creativebulma/bulma-tooltip&#39; Variables Variable name Description Default value $tooltip-animation-duration . 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/docs/data/variables.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "$tooltip-animation-duration", 4 | "description": "", 5 | "value": ".3s" 6 | }, 7 | { 8 | "name": "animation-transition-timing-function", 9 | "description": "", 10 | "value": "linear" 11 | }, 12 | { 13 | "name": "$tooltip-arrow-size", 14 | "description": "", 15 | "value": "6px" 16 | }, 17 | { 18 | "name": "$tooltip-background-color", 19 | "description": "", 20 | "value": "$grey-dark" 21 | }, 22 | { 23 | "name": "$tooltip-background-opacity", 24 | "description": "", 25 | "value": "0.9" 26 | }, 27 | { 28 | "name": "$tooltip-color", 29 | "description": "", 30 | "value": "$white" 31 | }, 32 | { 33 | "name": "$tooltip-font-family", 34 | "description": "", 35 | "value": "$family-primary" 36 | }, 37 | { 38 | "name": "$tooltip-font-size", 39 | "description": "", 40 | "value": "$size-7" 41 | }, 42 | { 43 | "name": "$tooltip-max-width", 44 | "description": "", 45 | "value": "15rem" 46 | }, 47 | { 48 | "name": "$tooltip-padding", 49 | "description": "", 50 | "value": ".5rem 1rem" 51 | }, 52 | { 53 | "name": "$tooltip-radius", 54 | "description": "", 55 | "value": "$radius-small" 56 | }, 57 | { 58 | "name": "$tooltip-z-index", 59 | "description": "", 60 | "value": "1020" 61 | } 62 | ] 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@creativebulma/bulma-tooltip", 3 | "description": "Display a tooltip attached to any kind of element, in different position.", 4 | "version": "1.2.0", 5 | "homepage": "https://github.com/CreativeBulma/bulma-tooltip", 6 | "main": "./src/sass/index.sass", 7 | "style": "./dist/bulma-tooltip.css", 8 | "sass": "./src/sass/index.sass", 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/CreativeBulma/bulma-tooltip.git" 12 | }, 13 | "license": "MIT", 14 | "bugs": { 15 | "url": "https://github.com/CreativeBulma/bulma-tooltip/issues" 16 | }, 17 | "keywords": [ 18 | "tooltip", 19 | "ui", 20 | "component", 21 | "extension", 22 | "html", 23 | "html5", 24 | "css3", 25 | "sass", 26 | "bulma", 27 | "bulmaio", 28 | "bulma.io" 29 | ], 30 | "devDependencies": { 31 | "autoprefixer": "^9.7.4", 32 | "bulma": "^0.8", 33 | "fs": "0.0.1-security", 34 | "gulp": "^4.0.2", 35 | "gulp-cache-bust": "^1.4.1", 36 | "gulp-clean-dir": "^1.0.2", 37 | "gulp-cleancss": "^0.2.2", 38 | "gulp-concat": "^2.6.1", 39 | "gulp-cssnano": "^2.1.3", 40 | "gulp-header": "^2.0.9", 41 | "gulp-nop": "0.0.3", 42 | "gulp-postcss": "^8.0.0", 43 | "gulp-rename": "^2.0.0", 44 | "gulp-run": "^1.7.1", 45 | "gulp-sass": "^4.0.2", 46 | "gulp-shell": "^0.8.0", 47 | "gulp-svgmin": "^2.2.0", 48 | "gulp-uglify": "^3.0.2", 49 | "hugo-bin": "^0.55.1", 50 | "internal-ip": "^6.0.0", 51 | "parse-filepath": "^1.0.2", 52 | "path": "^0.12.7" 53 | }, 54 | "scripts": { 55 | "build": "gulp", 56 | "build:styles": "gulp build:styles", 57 | "demo": "gulp demo", 58 | "demo:build": "gulp demo:build", 59 | "demo:serve": "gulp demo:serve", 60 | "doc": "gulp doc", 61 | "doc:build": "gulp doc:build", 62 | "doc:serve": "gulp doc:serve", 63 | "optimize": "gulp optimize", 64 | "start": "gulp demo:serve" 65 | }, 66 | "files": [ 67 | "dist", 68 | "src", 69 | "LICENSE", 70 | "README.md" 71 | ] 72 | } 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :exclamation::exclamation::exclamation: Looking for new Maintainer :exclamation::exclamation::exclamation: 2 | As you may have noticed, this package has not been updated for some time. I'm sorry, but unfortunately I'm not able to continue to maintain it, so I'm looking for someone who would like to take it over and maintain it. **If you are interested, open an issue to request ownership transfer.** 3 | 4 | # Introduction 5 | This components has been developped as a [Bulma](https://bulma.io) extension and brings the ability to **easily display a tooltip attached to any kind of element, in different position**. 6 | 7 | [![npm](https://img.shields.io/npm/v/@creativebulma/bulma-tooltip.svg)](https://www.npmjs.com/package/@creativebulma/bulma-tooltip) 8 | [![npm](https://img.shields.io/npm/dm/@creativebulma/bulma-tooltip.svg)](https://www.npmjs.com/package/@creativebulma/bulma-tooltip) 9 | [![](https://data.jsdelivr.com/v1/package/npm/@creativebulma/bulma-tooltip/badge)](https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tooltip) 10 | 11 | --- 12 | 13 | ## Prerequisites 14 | This component extends [Bulma CSS Framework](https://bulma.io) and requires it to work. 15 | 16 | ## Get Started 17 | ```shell 18 | npm i -D @creativebulma/bulma-tooltip 19 | ``` 20 | Full installation steps can be found here: [installation steps](https://bulma-tooltip.netlify.app/get-started) 21 | 22 | ## Documentation & Demo 23 | Full documentation and demo are available [here](https://bulma-tooltip.netlify.app/get-started) 24 | 25 | ## About the project 26 | BulmaBoilerplate is © 2020 by [CreativeBulma](https://github.com/CreativeBulma). 27 | 28 | ## License 29 | BulmaBoilerplate is distributed under [MIT](https://github.com/CreativeBulma/bulma-tooltip/blob/master/LICENSE) license. 30 | 31 | ## Contributing 32 | **Contribution are welcome!** 33 | You found a bug, a typo issue ? Feel free to create a PR on the [github repository](https://github.com/CreativeBulma/bulma-tooltip/) of this project. 34 | 35 | When contributing to this project, please first discuss the change you wish to make via issue on the [github repository](https://github.com/CreativeBulma/bulma-tooltip/issues), email, or any other method with the owners of this project before making a change. 36 | -------------------------------------------------------------------------------- /docs/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | https://demo.creativebulma.net/components/tooltip/1.2/release/1/ 7 | 2020-03-21T10:46:47+02:00 8 | 9 | 10 | 11 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/customize/ 12 | 2020-03-21T00:00:00+00:00 13 | 14 | 15 | 16 | https://demo.creativebulma.net/components/tooltip/1.2/ 17 | 2020-03-21T00:00:00+00:00 18 | 19 | 20 | 21 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.2/ 22 | 2020-05-17T11:46:47+02:00 23 | 24 | 25 | 26 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.1.0/ 27 | 2020-05-10T11:46:47+02:00 28 | 29 | 30 | 31 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.2/ 32 | 2020-03-29T10:46:47+02:00 33 | 34 | 35 | 36 | https://demo.creativebulma.net/components/tooltip/1.2/get-started/ 37 | 2020-03-21T00:00:00+00:00 38 | 39 | 40 | 41 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.1/ 42 | 2020-03-21T10:46:47+02:00 43 | 44 | 45 | 46 | https://demo.creativebulma.net/components/tooltip/1.2/changelog/ 47 | 2020-03-21T00:00:00+00:00 48 | 49 | 50 | 51 | https://demo.creativebulma.net/components/tooltip/1.2/release/ 52 | 2020-05-17T11:46:47+02:00 53 | 54 | 55 | 56 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/ 57 | 2020-03-21T00:00:00+00:00 58 | 59 | 60 | 61 | https://demo.creativebulma.net/components/tooltip/1.2/categories/ 62 | 63 | 64 | 65 | https://demo.creativebulma.net/components/tooltip/1.2/tags/ 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/layouts/shortcodes/api.html: -------------------------------------------------------------------------------- 1 | 2 | {{ range .Site.Data.api }} 3 | {{ if isset . "type" }} 4 |
5 | {{ .name }} 6 | : 7 | {{ .type }} 8 | 9 | {{ if (eq .scope "constructor") }} 10 |
{{ .scope }}
11 | {{ end }} 12 | {{ if (eq .scope "private") }} 13 |
{{ .scope }}
14 | {{ end }} 15 | {{ if (eq .scope "public") }} 16 |
{{ .scope }}
17 | {{ end }} 18 | 19 |
20 | {{ else }} 21 |
22 | {{ .name }} 23 | 24 | {{ if (eq .scope "constructor") }} 25 |
{{ .scope }}
26 | {{ end }} 27 | {{ if (eq .scope "private") }} 28 |
{{ .scope }}
29 | {{ end }} 30 | {{ if (eq .scope "public") }} 31 |
{{ .scope }}
32 | {{ end }} 33 | 34 |
35 | {{ end }} 36 | {{ if isset . "description" }} 37 |

{{ .description | $.Page.RenderString }}

38 | {{ end }} 39 | {{ if isset . "parameters" }} 40 |
Parameters
41 | {{ range .parameters }} 42 | 63 |
{{ .description | $.Page.RenderString }}
64 | {{ end }} 65 | {{ end }} 66 | {{ if isset . "example" }} 67 |
Example
68 | {{ highlight .example "javascript" "" }} 69 | {{ end }} 70 |
71 | {{ end }} -------------------------------------------------------------------------------- /docs/release/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Releases on BulmaTooltip 5 | https://demo.creativebulma.net/components/tooltip/1.2/release/ 6 | Recent content in Releases on BulmaTooltip 7 | Hugo -- gohugo.io 8 | en-us 9 | Sun, 17 May 2020 11:46:47 +0200 10 | 11 | 12 | 13 | 14 | 15 | (2020-03-21) 16 | https://demo.creativebulma.net/components/tooltip/1.2/release/1/ 17 | Sat, 21 Mar 2020 10:46:47 +0200 18 | 19 | https://demo.creativebulma.net/components/tooltip/1.2/release/1/ 20 | First working version 21 | added Styles : with or without arrow added Multi-colors added Position modifiers 22 | 23 | 24 | 25 | (2020-05-17) 26 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.2/ 27 | Sun, 17 May 2020 11:46:47 +0200 28 | 29 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.2/ 30 | New modifiers and better multiline support 31 | added New sass variables to customize tooltip fade animation added New modifier to change tooltip text alignment docs Add missing multiline tooltip documentation 32 | 33 | 34 | 35 | (2020-05-10) 36 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.1.0/ 37 | Sun, 10 May 2020 11:46:47 +0200 38 | 39 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.1.0/ 40 | New helpers and fixes 41 | fixed Issues with combination of arrow and directions options added helpers - New helper to hide tooltip on specific breakpoints docs Add missing responsiveness documentation 42 | 43 | 44 | 45 | (2020-03-29) 46 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.2/ 47 | Sun, 29 Mar 2020 10:46:47 +0200 48 | 49 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.2/ 50 | Minor Fixes 51 | fixed Tooltip remains visible after clicking a button fixed docs - Test on LAN : Docs site is now availabel on LAN when using npm run doc:serve fixed docs - Changelog display issue 52 | 53 | 54 | 55 | (2020-03-29) 56 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.1/ 57 | Sat, 21 Mar 2020 10:46:47 +0200 58 | 59 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.1/ 60 | Minor Fixes 61 | fixed docs - Issue with generated site 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/sass/_position.sass: -------------------------------------------------------------------------------- 1 | =tooltip-hover 2 | &:hover::before, 3 | &:hover::after, 4 | &.has-tooltip-active::before, 5 | &.has-tooltip-active::after 6 | @content 7 | 8 | =tooltip-arrow-top 9 | &.has-tooltip-arrow 10 | &::after 11 | top: 0 12 | right: auto 13 | bottom: auto 14 | left: 50% 15 | margin-top: $tooltip-arrow-size * -1 + 1 16 | margin-right: auto 17 | margin-bottom: auto 18 | margin-left: $tooltip-arrow-size * -1 + 1 19 | border-color: rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent transparent 20 | 21 | =tooltip-box-top 22 | &::before 23 | top: 0 24 | right: auto 25 | bottom: auto 26 | left: 50% 27 | top: 0 28 | margin-top: $tooltip-arrow-size * -1 + 1 29 | margin-bottom: auto 30 | transform: translate(-50%, -100%) 31 | 32 | =tooltip-top 33 | +tooltip-arrow-top 34 | +tooltip-box-top 35 | 36 | =tooltip-arrow-bottom 37 | &.has-tooltip-arrow 38 | &::after 39 | top: auto 40 | right: auto 41 | bottom: -1px 42 | left: 50% 43 | margin-top: auto 44 | margin-right: auto 45 | margin-bottom: $tooltip-arrow-size * -1 + 1 46 | margin-left: $tooltip-arrow-size * -1 + 1 47 | border-color: transparent transparent rgba($tooltip-background-color, $tooltip-background-opacity) transparent 48 | 49 | =tooltip-box-bottom 50 | &::before 51 | top: auto 52 | right: auto 53 | bottom: 0 54 | left: 50% 55 | margin-top: auto 56 | margin-bottom: $tooltip-arrow-size * -1 + 1 57 | transform: translate(-50%, 100%) 58 | 59 | =tooltip-bottom 60 | +tooltip-arrow-bottom 61 | +tooltip-box-bottom 62 | 63 | 64 | =tooltip-arrow-left 65 | &.has-tooltip-arrow 66 | &::after 67 | top: auto 68 | right: auto 69 | bottom: 50% 70 | left: 0 71 | margin-top: auto 72 | margin-right: auto 73 | margin-bottom: $tooltip-arrow-size * -1 74 | margin-left: $tooltip-arrow-size * -1 + 1 75 | border-color: transparent transparent transparent rgba($tooltip-background-color, $tooltip-background-opacity) 76 | 77 | =tooltip-box-left 78 | &::before 79 | top: auto 80 | right: auto 81 | bottom: 50% 82 | left: $tooltip-arrow-size * -1 + 1 83 | transform: translate(-100%, 50%) 84 | 85 | =tooltip-left 86 | +tooltip-arrow-left 87 | +tooltip-box-left 88 | 89 | 90 | =tooltip-arrow-right 91 | &.has-tooltip-arrow 92 | &::after 93 | top: auto 94 | right: 0 95 | bottom: 50% 96 | left: auto 97 | margin-top: auto 98 | margin-right: $tooltip-arrow-size * -1 99 | margin-bottom: $tooltip-arrow-size * -1 100 | margin-left: auto 101 | border-color: transparent rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent 102 | 103 | =tooltip-box-right 104 | &::before 105 | top: auto 106 | right: $tooltip-arrow-size * -1 + 1 107 | bottom: 50% 108 | left: auto 109 | margin-top: auto 110 | transform: translate(100%, 50%) 111 | 112 | =tooltip-right 113 | +tooltip-arrow-right 114 | +tooltip-box-right 115 | 116 | =tooltip-direction($direction) 117 | @if $direction == 'top' 118 | @include tooltip-top 119 | @else if $direction == 'right' 120 | @include tooltip-right 121 | @else if $direction == 'bottom' 122 | @include tooltip-bottom 123 | @else if $direction == 'left' 124 | @include tooltip-left -------------------------------------------------------------------------------- /docs/js/docs.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // clipboard 3 | var clipInit = false; 4 | var codes = document.querySelectorAll('code') || []; 5 | codes.forEach(function(code) { 6 | var text = code.innerHTML; 7 | 8 | if (text.length > 5) { 9 | if (!clipInit) { 10 | var text, clip = new ClipboardJS('.copy-to-clipboard', { 11 | text: function(trigger) { 12 | text = trigger.previousSibling.innerHTML; 13 | return text.replace(/^\$\s/gm, ''); 14 | } 15 | }); 16 | 17 | var inPre; 18 | clip.on('success', function(e) { 19 | e.clearSelection(); 20 | inPre = e.trigger.parentNode.tagName == 'PRE'; 21 | e.trigger.setAttribute('aria-label', 'Copied to clipboard!'); 22 | e.trigger.classList.add('tooltipped'); 23 | e.trigger.classList.add('tooltipped-' + (inPre ? 'w' : 's')); 24 | }); 25 | 26 | clip.on('error', function(e) { 27 | inPre = e.trigger.parentNode.tagName == 'PRE'; 28 | e.trigger.setAttribute('aria-label', fallbackMessage(e.action)); 29 | e.trigger.classList.add('tooltipped'); 30 | e.trigger.classList.add('tooltipped-' + (inPre ? 'w' : 's')); 31 | document.addEventListener('copy', function(){ 32 | e.trigger.setAttribute('aria-label', 'Copied to clipboard!'); 33 | e.trigger.classList.add('tooltipped'); 34 | e.trigger.classList.add('tooltipped-' + (inPre ? 'w' : 's')); 35 | }); 36 | }); 37 | 38 | clipInit = true; 39 | } 40 | 41 | var copyNode = document.createElement('div'); 42 | copyNode.classList.add('copy-to-clipboard'); 43 | copyNode.setAttribute('title', 'Copy to clipboard'); 44 | 45 | code.after(copyNode); 46 | code.nextSibling.addEventListener('mouseleave', function() { 47 | this.setAttribute('aria-label', null); 48 | this.classList.remove('tooltipped'); 49 | this.classList.remove('tooltipped-s'); 50 | this.classList.remove('tooltipped-w'); 51 | }); 52 | } 53 | }); 54 | 55 | const tabs = document.querySelectorAll('[data-toggle="tab"]') || []; 56 | tabs.forEach(function(tab) { 57 | tab.addEventListener('click', function(e) { 58 | e.preventDefault(); 59 | e.stopPropagation(); 60 | 61 | const tabPane = document.querySelector(e.currentTarget.dataset.target); 62 | 63 | const activeTab = e.currentTarget.closest('.tabs ul').querySelector('li.is-active'); 64 | const activeTabPane = document.querySelector(activeTab.dataset.target); 65 | if (activeTab && !activeTab.isSameNode(e.currentTarget)) { 66 | activeTab.classList.remove('is-active'); 67 | if (activeTabPane) { 68 | activeTabPane.classList.remove('is-active'); 69 | } 70 | 71 | } 72 | 73 | e.currentTarget.classList.add('is-active'); 74 | if (tabPane) { 75 | tabPane.classList.add('is-active'); 76 | } 77 | }); 78 | }); 79 | }, false); -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/static/js/docs.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // clipboard 3 | var clipInit = false; 4 | var codes = document.querySelectorAll('code') || []; 5 | codes.forEach(function(code) { 6 | var text = code.innerHTML; 7 | 8 | if (text.length > 5) { 9 | if (!clipInit) { 10 | var text, clip = new ClipboardJS('.copy-to-clipboard', { 11 | text: function(trigger) { 12 | text = trigger.previousSibling.innerHTML; 13 | return text.replace(/^\$\s/gm, ''); 14 | } 15 | }); 16 | 17 | var inPre; 18 | clip.on('success', function(e) { 19 | e.clearSelection(); 20 | inPre = e.trigger.parentNode.tagName == 'PRE'; 21 | e.trigger.setAttribute('aria-label', 'Copied to clipboard!'); 22 | e.trigger.classList.add('tooltipped'); 23 | e.trigger.classList.add('tooltipped-' + (inPre ? 'w' : 's')); 24 | }); 25 | 26 | clip.on('error', function(e) { 27 | inPre = e.trigger.parentNode.tagName == 'PRE'; 28 | e.trigger.setAttribute('aria-label', fallbackMessage(e.action)); 29 | e.trigger.classList.add('tooltipped'); 30 | e.trigger.classList.add('tooltipped-' + (inPre ? 'w' : 's')); 31 | document.addEventListener('copy', function(){ 32 | e.trigger.setAttribute('aria-label', 'Copied to clipboard!'); 33 | e.trigger.classList.add('tooltipped'); 34 | e.trigger.classList.add('tooltipped-' + (inPre ? 'w' : 's')); 35 | }); 36 | }); 37 | 38 | clipInit = true; 39 | } 40 | 41 | var copyNode = document.createElement('div'); 42 | copyNode.classList.add('copy-to-clipboard'); 43 | copyNode.setAttribute('title', 'Copy to clipboard'); 44 | 45 | code.after(copyNode); 46 | code.nextSibling.addEventListener('mouseleave', function() { 47 | this.setAttribute('aria-label', null); 48 | this.classList.remove('tooltipped'); 49 | this.classList.remove('tooltipped-s'); 50 | this.classList.remove('tooltipped-w'); 51 | }); 52 | } 53 | }); 54 | 55 | const tabs = document.querySelectorAll('[data-toggle="tab"]') || []; 56 | tabs.forEach(function(tab) { 57 | tab.addEventListener('click', function(e) { 58 | e.preventDefault(); 59 | e.stopPropagation(); 60 | 61 | const tabPane = document.querySelector(e.currentTarget.dataset.target); 62 | 63 | const activeTab = e.currentTarget.closest('.tabs ul').querySelector('li.is-active'); 64 | const activeTabPane = document.querySelector(activeTab.dataset.target); 65 | if (activeTab && !activeTab.isSameNode(e.currentTarget)) { 66 | activeTab.classList.remove('is-active'); 67 | if (activeTabPane) { 68 | activeTabPane.classList.remove('is-active'); 69 | } 70 | 71 | } 72 | 73 | e.currentTarget.classList.add('is-active'); 74 | if (tabPane) { 75 | tabPane.classList.add('is-active'); 76 | } 77 | }); 78 | }); 79 | }, false); -------------------------------------------------------------------------------- /src/sass/index.sass: -------------------------------------------------------------------------------- 1 | @import 'variables' 2 | @import 'position' 3 | @import 'animation' 4 | 5 | =tooltip-arrow 6 | &::after 7 | box-sizing: border-box 8 | color: $tooltip-color 9 | display: inline-block 10 | font-family: $tooltip-font-family 11 | font-size: $tooltip-font-size 12 | hyphens: auto 13 | opacity: 0 14 | overflow: hidden 15 | pointer-events: none 16 | position: absolute 17 | visibility: hidden 18 | z-index: $tooltip-z-index 19 | content: '' 20 | border-style: solid 21 | border-width: $tooltip-arrow-size 22 | border-color: rgba($tooltip-background-color, $tooltip-background-opacity) transparent transparent transparent 23 | margin-bottom: $tooltip-arrow-size * -1 + 1 24 | +tooltip-arrow-top 25 | 26 | =tooltip-box 27 | &::before 28 | box-sizing: border-box 29 | color: $tooltip-color 30 | display: inline-block 31 | font-family: $tooltip-font-family 32 | font-size: $tooltip-font-size 33 | hyphens: auto 34 | opacity: 0 35 | overflow: hidden 36 | pointer-events: none 37 | position: absolute 38 | visibility: hidden 39 | z-index: $tooltip-z-index 40 | background: rgba($tooltip-background-color, $tooltip-background-opacity) 41 | border-radius: $tooltip-radius 42 | content: attr(data-tooltip) 43 | padding: $tooltip-padding 44 | text-overflow: ellipsis 45 | white-space: pre-line 46 | +tooltip-box-top 47 | 48 | =tooltip-multiline 49 | &::before 50 | height: auto 51 | width: $tooltip-max-width 52 | max-width: $tooltip-max-width 53 | text-overflow: clip 54 | white-space: normal 55 | word-break: keep-all 56 | 57 | [data-tooltip] 58 | &:not(.is-loading), 59 | &:not(.is-disabled), 60 | &:not([disabled]) 61 | cursor: pointer 62 | overflow: visible 63 | position: relative 64 | 65 | +tooltip-box 66 | &.has-tooltip-arrow 67 | +tooltip-arrow 68 | 69 | &.has-tooltip-bottom 70 | +tooltip-direction('bottom') 71 | 72 | &.has-tooltip-left 73 | +tooltip-direction('left') 74 | 75 | &.has-tooltip-right 76 | +tooltip-direction('right') 77 | 78 | &.has-tooltip-multiline 79 | +tooltip-multiline 80 | 81 | &.has-tooltip-text-left 82 | &::before 83 | text-align: left 84 | &.has-tooltip-text-centered 85 | &::before 86 | text-align: center 87 | &.has-tooltip-text-right 88 | &::before 89 | text-align: right 90 | 91 | @each $name, $pair in $colors 92 | $color: nth($pair, 1) 93 | $color-invert: nth($pair, 2) 94 | &.has-tooltip-#{$name} 95 | &::after 96 | border-color: rgba($color, $tooltip-background-opacity) transparent transparent transparent !important 97 | &.has-tooltip-bottom 98 | &::after 99 | border-color: transparent transparent rgba($color, $tooltip-background-opacity) transparent !important 100 | &.has-tooltip-left 101 | &::after 102 | border-color: transparent transparent transparent rgba($color, $tooltip-background-opacity) !important 103 | &.has-tooltip-right 104 | &::after 105 | border-color: transparent rgba($color, $tooltip-background-opacity) transparent transparent !important 106 | &:before 107 | background-color: rgba($color, $tooltip-background-opacity) 108 | color: $color-invert 109 | 110 | +tooltip-hover 111 | opacity: 1 112 | visibility: visible 113 | 114 | &.has-tooltip-fade 115 | +tooltip-fade 116 | 117 | @import 'responsiveness' 118 | 119 | span 120 | &[data-tooltip] 121 | border-bottom: 1px dashed $grey-lighter 122 | @each $name, $pair in $colors 123 | $color: nth($pair, 1) 124 | $color-invert: nth($pair, 2) 125 | &.has-tooltip-#{$name} 126 | border-bottom-color: lighten($color, 5%) 127 | 128 | .control 129 | span 130 | &[data-tooltip] 131 | border-bottom: none 132 | -------------------------------------------------------------------------------- /src/sass/_responsiveness.sass: -------------------------------------------------------------------------------- 1 | @each $direction in top, right, bottom, left 2 | &.has-tooltip-#{$direction}-mobile 3 | +mobile 4 | @include tooltip-direction(#{$direction}) 5 | &.has-tooltip-#{$direction}-tablet 6 | +tablet 7 | @include tooltip-direction(#{$direction}) 8 | &.has-tooltip-#{$direction}-tablet-only 9 | +tablet-only 10 | @include tooltip-direction(#{$direction}) 11 | &.has-tooltip-#{$direction}-touch 12 | +touch 13 | @include tooltip-direction(#{$direction}) 14 | &.has-tooltip-#{$direction}-desktop 15 | +desktop 16 | @include tooltip-direction(#{$direction}) 17 | &.has-tooltip-#{$direction}-desktop-only 18 | +desktop-only 19 | @include tooltip-direction(#{$direction}) 20 | &.has-tooltip-#{$direction}-until-widescreen 21 | +until-widescreen 22 | @include tooltip-direction(#{$direction}) 23 | &.has-tooltip-#{$direction}-widescreen 24 | +widescreen 25 | @include tooltip-direction(#{$direction}) 26 | &.has-tooltip-#{$direction}-widescreen-only 27 | +widescreen-only 28 | @include tooltip-direction(#{$direction}) 29 | &.has-tooltip-#{$direction}-until-fullhd 30 | +until-fullhd 31 | @include tooltip-direction(#{$direction}) 32 | &.has-tooltip-#{$direction}-fullhd 33 | +fullhd 34 | @include tooltip-direction(#{$direction}) 35 | 36 | // Hidden breakpoints 37 | &.has-tooltip-hidden-mobile 38 | +mobile 39 | &::after, 40 | &::before 41 | opacity: 0 !important 42 | display: none !important 43 | &.has-tooltip-hidden-tablet 44 | +tablet 45 | &::after, 46 | &::before 47 | opacity: 0 !important 48 | display: none !important 49 | &.has-tooltip-hidden-tablet-only 50 | +tablet-only 51 | &::after, 52 | &::before 53 | opacity: 0 !important 54 | display: none !important 55 | &.has-tooltip-hidden-touch 56 | +touch 57 | &::after, 58 | &::before 59 | opacity: 0 !important 60 | display: none !important 61 | &.has-tooltip-hidden-desktop 62 | +desktop 63 | &::after, 64 | &::before 65 | opacity: 0 !important 66 | display: none !important 67 | &.has-tooltip-hidden-desktop-only 68 | +desktop-only 69 | &::after, 70 | &::before 71 | opacity: 0 !important 72 | display: none !important 73 | &.has-tooltip-hidden-until-widescreen 74 | +until-widescreen 75 | &::after, 76 | &::before 77 | opacity: 0 !important 78 | display: none !important 79 | &.has-tooltip-hidden-widescreen 80 | +widescreen 81 | &::after, 82 | &::before 83 | opacity: 0 !important 84 | display: none !important 85 | &.has-tooltip-hidden-widescreen-only 86 | +widescreen-only 87 | &::after, 88 | &::before 89 | opacity: 0 !important 90 | display: none !important 91 | &.has-tooltip-hidden-until-fullhd 92 | +until-fullhd 93 | &::after, 94 | &::before 95 | opacity: 0 !important 96 | display: none !important 97 | &.has-tooltip-hidden-fullhd 98 | +fullhd 99 | &::after, 100 | &::before 101 | opacity: 0 !important 102 | display: none !important 103 | 104 | // Text alignement breakpoints 105 | @each $direction in (left, left), (centered, center), (right, right) 106 | $dir: nth($direction, 1) 107 | $text: nth($direction, 2) 108 | &.has-tooltip-text-#{$dir}-mobile 109 | +mobile 110 | &::before 111 | text-align: #{$text} 112 | &.has-tooltip-text-#{$dir}-tablet 113 | +tablet 114 | &::before 115 | text-align: #{$text} 116 | &.has-tooltip-text-#{$dir}-tablet-only 117 | +tablet-only 118 | &::before 119 | text-align: #{$text} 120 | &.has-tooltip-text-#{$dir}-touch 121 | +touch 122 | &::before 123 | text-align: #{$text} 124 | &.has-tooltip-text-#{$dir}-desktop 125 | +desktop 126 | &::before 127 | text-align: #{$text} 128 | &.has-tooltip-text-#{$dir}-desktop-only 129 | +desktop-only 130 | &::before 131 | text-align: #{$text} 132 | &.has-tooltip-text-#{$dir}-until-widescreen 133 | +until-widescreen 134 | &::before 135 | text-align: #{$text} 136 | &.has-tooltip-text-#{$dir}-widescreen 137 | +widescreen 138 | &::before 139 | text-align: #{$text} 140 | &.has-tooltip-text-#{$dir}-widescreen-only 141 | +widescreen-only 142 | &::before 143 | text-align: #{$text} 144 | &.has-tooltip-text-#{$dir}-until-fullhd 145 | +until-fullhd 146 | &::before 147 | text-align: #{$text} 148 | &.has-tooltip-text-#{$dir}-fullhd 149 | +fullhd 150 | &::before 151 | text-align: #{$text} -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const internalIp = require('internal-ip'); 3 | const package = require('./package.json'); 4 | const path = require('path'); 5 | const shell = require('gulp-shell'); 6 | 7 | /** 8 | * Template for banner to add to file headers 9 | */ 10 | var banner = { 11 | main: 12 | '/*!' + 13 | ' <%= package.name %> v<%= package.version %>' + 14 | ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' + 15 | ' | <%= package.license %> License' + 16 | ' | <%= package.homepage %>' + 17 | ' */\n' 18 | }; 19 | 20 | /** 21 | * ---------------------------------------- 22 | * STYLESHEETS TASKS 23 | * ---------------------------------------- 24 | */ 25 | gulp.task('styles:build', function() { 26 | const autoprefixer = require('autoprefixer'); 27 | const cleanDir = require('gulp-clean-dir'); 28 | const concat = require('gulp-concat'); 29 | const fs = require('fs'); 30 | const header = require('gulp-header'); 31 | const nop = require('gulp-nop'); 32 | const parsePath = require('parse-filepath'); 33 | const postcss = require('gulp-postcss'); 34 | const rename = require("gulp-rename"); 35 | const sass = require('gulp-sass'); 36 | 37 | distPath = parsePath(package.style); 38 | 39 | if (fs.existsSync(path.resolve(__dirname, 'src/sass/index.sass'))) { 40 | return gulp.src(['node_modules/bulma/sass/utilities/_all.sass', 'src/sass/index.sass']) 41 | .pipe(concat('app.sass')) 42 | .pipe(sass({ 43 | loadPath: [path.resolve(__dirname, 'src/sass')], 44 | includePaths: ['node_modules', 'node_modules/bulma/sass/utilities/'], 45 | outputStyle: "expanded", 46 | sourceComments: true 47 | }).on('error', sass.logError)) 48 | .pipe(postcss([ 49 | autoprefixer({ 50 | cascade: true, 51 | remove: true 52 | }) 53 | ])) 54 | .pipe(header(banner.main, {package: package})) 55 | .pipe(rename(distPath.basename.replace('.min', ''))) 56 | .pipe(cleanDir(path.resolve(__dirname, distPath.dirname))) 57 | .pipe(gulp.dest(path.resolve(__dirname, distPath.dirname))); 58 | } else { 59 | return gulp.src('.').pipe(nop()); 60 | } 61 | }); 62 | 63 | gulp.task('styles:minify', function() { 64 | const cleancss = require('gulp-cleancss'); 65 | const cssnano = require('cssnano'); 66 | const header = require('gulp-header'); 67 | const parsePath = require('parse-filepath'); 68 | const postcss = require('gulp-postcss'); 69 | const rename = require("gulp-rename"); 70 | 71 | distPath = parsePath(package.style); 72 | 73 | return gulp.src([path.resolve(__dirname, distPath.dirname + '/*.css'), '!' + path.resolve(__dirname, distPath.dirname + '/*.min.css')]) 74 | .pipe(cleancss()) 75 | .pipe(postcss([ 76 | cssnano({ 77 | discardComments: { 78 | removeAll: true 79 | } 80 | }) 81 | ])) 82 | .pipe(header(banner.main, {package: package})) 83 | .pipe(rename({ 84 | suffix: '.min' 85 | })) 86 | .pipe(gulp.dest(path.resolve(__dirname, distPath.dirname))); 87 | }); 88 | 89 | gulp.task('styles:copy', gulp.series('styles:minify', function() { 90 | const parsePath = require('parse-filepath'); 91 | 92 | distPath = parsePath(package.style); 93 | 94 | return gulp.src(path.resolve(__dirname, distPath.dirname + '/*.css')) 95 | .pipe(gulp.dest(path.resolve(__dirname, 'src/docs/static/css'))); 96 | })); 97 | 98 | /** 99 | * ---------------------------------------- 100 | * ASSETS TASKS 101 | * ---------------------------------------- 102 | */ 103 | gulp.task('images:svg:minify', function() { 104 | const svgmin = require('gulp-svgmin'); 105 | 106 | return gulp.src(path.resolve(__dirname, 'dist/images/**/*.svg')) 107 | .pipe(svgmin()) 108 | .pipe(gulp.dest(path.resolve(__dirname, 'dist/images'))); 109 | }); 110 | 111 | /** 112 | * ---------------------------------------- 113 | * BUILD TASKS 114 | * ---------------------------------------- 115 | */ 116 | gulp.task('build:styles', gulp.series('styles:build', 'styles:minify', 'styles:copy'), done => { 117 | done(); 118 | }); 119 | 120 | gulp.task('build', gulp.series('build:styles'), done => { 121 | done(); 122 | }); 123 | 124 | gulp.task('optimize', gulp.series('styles:minify', 'images:svg:minify'), done => { 125 | done(); 126 | }); 127 | 128 | gulp.task('default', gulp.series('build', 'optimize'), done => { 129 | done(); 130 | }); 131 | 132 | /** 133 | * ---------------------------------------- 134 | * DOC TASKS 135 | * ---------------------------------------- 136 | */ 137 | gulp.task('doc:build', gulp.series(shell.task(['node_modules/.bin/hugo --source src/docs --destination ../../docs --cleanDestinationDir'])), done => { 138 | done(); 139 | }); 140 | 141 | gulp.task('doc:serve', gulp.parallel(shell.task([`node_modules/.bin/hugo server -D --bind ${internalIp.v4.sync()} --baseURL ${internalIp.v4.sync()} --source src/docs --watch`]), function() { 142 | gulp.watch(path.resolve(__dirname, 'src/sass/**/*.sass'), gulp.series('build:styles')); 143 | }), done => { 144 | done(); 145 | }); 146 | 147 | gulp.task('doc', gulp.series(shell.task(['node_modules/.bin/hugo server --source src/docs'])), done => { 148 | done(); 149 | }); -------------------------------------------------------------------------------- /docs/release/1.0.1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | (2020-03-29) - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

Minor Fixes

126 |
    127 |
  • 128 | 129 | 130 | 131 | 132 | fixed 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | docs - Issue with generated site
    • 142 |
143 | 144 |
145 |
146 |
147 |
148 |
149 | 150 | 151 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /docs/index.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Introduction on BulmaTooltip 5 | https://demo.creativebulma.net/components/tooltip/1.2/ 6 | Recent content in Introduction on BulmaTooltip 7 | Hugo -- gohugo.io 8 | en-us 9 | Sat, 21 Mar 2020 00:00:00 +0000 10 | 11 | 12 | 13 | 14 | 15 | (2020-03-21) 16 | https://demo.creativebulma.net/components/tooltip/1.2/release/1/ 17 | Sat, 21 Mar 2020 10:46:47 +0200 18 | 19 | https://demo.creativebulma.net/components/tooltip/1.2/release/1/ 20 | First working version 21 | added Styles : with or without arrow added Multi-colors added Position modifiers 22 | 23 | 24 | 25 | Customize 26 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/customize/ 27 | Sat, 21 Mar 2020 00:00:00 +0000 28 | 29 | https://demo.creativebulma.net/components/tooltip/1.2/how-to/customize/ 30 | How-To Customize This component has been designed to be easily customizable. 31 | There is 2 ways to customize it, depending on the way you integrate this component into your project. 32 | Sass If you use the Sass source into your project, all you have to do is to customize variables before importing the component. 33 | $tooltip-radius: 6px @import &#39;@creativebulma/bulma-tooltip&#39; Variables Variable name Description Default value $tooltip-animation-duration . 34 | 35 | 36 | 37 | (2020-05-17) 38 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.2/ 39 | Sun, 17 May 2020 11:46:47 +0200 40 | 41 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.2/ 42 | New modifiers and better multiline support 43 | added New sass variables to customize tooltip fade animation added New modifier to change tooltip text alignment docs Add missing multiline tooltip documentation 44 | 45 | 46 | 47 | (2020-05-10) 48 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.1.0/ 49 | Sun, 10 May 2020 11:46:47 +0200 50 | 51 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.1.0/ 52 | New helpers and fixes 53 | fixed Issues with combination of arrow and directions options added helpers - New helper to hide tooltip on specific breakpoints docs Add missing responsiveness documentation 54 | 55 | 56 | 57 | (2020-03-29) 58 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.2/ 59 | Sun, 29 Mar 2020 10:46:47 +0200 60 | 61 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.2/ 62 | Minor Fixes 63 | fixed Tooltip remains visible after clicking a button fixed docs - Test on LAN : Docs site is now availabel on LAN when using npm run doc:serve fixed docs - Changelog display issue 64 | 65 | 66 | 67 | Get Started 68 | https://demo.creativebulma.net/components/tooltip/1.2/get-started/ 69 | Sat, 21 Mar 2020 00:00:00 +0000 70 | 71 | https://demo.creativebulma.net/components/tooltip/1.2/get-started/ 72 | Get started You only need 1 CSS file to use BulmaTooltip 73 | Installation First, let&rsquo;s install the component! There are several ways to get started with BulmaTooltip. 74 | 1. NPM 2. CDN 3. Github Use npm to install the bulma-tooltip package recommended 75 | npm install @creativebulma/bulma-tooltip Use the jsDelivr CDN to link to the BulmaTooltip stylesheet 76 | https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tooltip Use the GitHub repository to get the latest development version. 77 | 78 | 79 | 80 | (2020-03-29) 81 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.1/ 82 | Sat, 21 Mar 2020 10:46:47 +0200 83 | 84 | https://demo.creativebulma.net/components/tooltip/1.2/release/1.0.1/ 85 | Minor Fixes 86 | fixed docs - Issue with generated site 87 | 88 | 89 | 90 | Changelog 91 | https://demo.creativebulma.net/components/tooltip/1.2/changelog/ 92 | Sat, 21 Mar 2020 00:00:00 +0000 93 | 94 | https://demo.creativebulma.net/components/tooltip/1.2/changelog/ 95 | Changelog v1.2.0 (2020-05-17) New modifiers and better multiline support 96 | added New sass variables to customize tooltip fade animation added New modifier to change tooltip text alignment docs Add missing multiline tooltip documentation v1.1.0 (2020-05-10) New helpers and fixes 97 | fixed Issues with combination of arrow and directions options added helpers - New helper to hide tooltip on specific breakpoints docs Add missing responsiveness documentation v1. 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /docs/release/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | (2020-03-21) - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

First working version

126 |
    127 |
  • 128 | 129 | 130 | added 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | Styles : with or without arrow
    • 142 |
  • 143 | 144 | 145 | added 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | Multi-colors
    • 157 |
  • 158 | 159 | 160 | added 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | Position modifiers
    • 172 |
173 | 174 |
175 |
176 |
177 |
178 |
179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /docs/release/1.2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | (2020-05-17) - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

New modifiers and better multiline support

126 |
    127 |
  • 128 | 129 | 130 | added 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | New sass variables to customize tooltip fade animation
    • 142 |
  • 143 | 144 | 145 | added 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | New modifier to change tooltip text alignment
    • 157 |
  • 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | docs 168 | 169 | 170 | 171 | Add missing multiline tooltip documentation
    • 172 |
173 | 174 |
175 |
176 |
177 |
178 |
179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /docs/release/1.1.0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | (2020-05-10) - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

New helpers and fixes

126 |
    127 |
  • 128 | 129 | 130 | 131 | 132 | fixed 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | Issues with combination of arrow and directions options
    • 152 |
  • 153 | 154 | 155 | added 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | helpers - New helper to hide tooltip on specific breakpoints
    • 167 |
  • 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | docs 178 | 179 | 180 | 181 | Add missing responsiveness documentation
    • 182 |
183 | 184 |
185 |
186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /docs/release/1.0.2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | (2020-03-29) - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

Minor Fixes

126 |
    127 |
  • 128 | 129 | 130 | 131 | 132 | fixed 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | Tooltip remains visible after clicking a button
    • 152 |
  • 153 | 154 | 155 | 156 | 157 | fixed 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | docs - Test on LAN : Docs site is now availabel on LAN when using npm run doc:serve
    • 167 |
  • 168 | 169 | 170 | 171 | 172 | fixed 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | docs - Changelog display issue
    • 182 |
183 | 184 |
185 |
186 |
187 |
188 |
189 | 190 | 191 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Introduction - BulmaTooltip 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 |
35 |
36 | 91 |
92 | 123 | 124 |
125 |
126 |

Introduction

127 |

What is BulmaTooltip

128 |

BulmaTooltip is a pure CSS 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | Bulma extension which brings the ability to easily display a tooltip attached to any kind of element, in different position.

139 | 140 |
If you enjoy this component, have a look at our MarketPlace and discover Free and Premium Bulma components and Templates.
141 |

License

142 |

BulmaTootlip is © 2020 by CreativeBulma.

143 |

BulmaTootlip is distributed under MIT license.

144 |

Contributing

145 |

Contribution are welcome!

146 |

You found a bug, a typo issue ? Feel free to create a PR on the github repository of this project.

147 |

When contributing to this project, please first discuss the change you wish to make via issue on the github repository, email, or any other method with the owners of this project before making a change.

148 | 149 |
150 |
151 |
152 |
153 |
154 | 155 | 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /docs/css/docs.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 15px; 3 | font-weight: 400; 4 | } 5 | 6 | html, 7 | body, 8 | .is-fullheight { 9 | height: 100%; 10 | min-height: 100%; 11 | overflow-y: auto; 12 | } 13 | 14 | body { 15 | background-color: #fff; 16 | color: #5a6270 !important; 17 | font-family: Source Sans Pro, sans-serif; 18 | } 19 | 20 | .is-fullheight .navbar+.is-fullheight { 21 | height: calc(100% - 3.25rem); 22 | min-height: calc(100% - 3.25rem); 23 | } 24 | 25 | .brand { 26 | line-height: 1.5; 27 | padding: .5rem .75rem; 28 | height: 3.25rem; 29 | display: block; 30 | font-weight: 700; 31 | } 32 | 33 | .navbar a:not(.button) { 34 | color: #5a6270 !important; 35 | text-decoration: none; 36 | } 37 | .navbar a:not(.button):hover { 38 | color: #6056FF !important; 39 | text-decoration: none; 40 | } 41 | 42 | .content h1, 43 | .content h2 { 44 | font-weight: 500; 45 | } 46 | 47 | .content h1+h2 { 48 | margin-top: 0 !important; 49 | font-size: 1.3em; 50 | font-weight: 500; 51 | color: #5A6270; 52 | padding-bottom: calc(1.45rem - 1px); 53 | border-bottom: 1px solid #dee2e7; 54 | } 55 | 56 | .content h2+h3 { 57 | margin-top: 0 !important; 58 | font-size: 1.125em; 59 | font-weight: 500; 60 | color: #5A6270; 61 | padding-bottom: calc(1.45rem - 1px); 62 | } 63 | 64 | .content h1, 65 | .content h2, 66 | .content h3 { 67 | color: #2f353f; 68 | } 69 | 70 | .content h4, 71 | .content h5, 72 | .content h6 { 73 | color: #5a6270; 74 | margin: 1em 0 .8em 0; 75 | } 76 | 77 | a:not(.button) { 78 | color: #6056FF; 79 | } 80 | 81 | a:not(.button):hover { 82 | text-decoration: underline; 83 | } 84 | 85 | .menu-list { 86 | padding: 3rem 0; 87 | } 88 | 89 | .menu-list li ul { 90 | font-size: .85rem; 91 | } 92 | 93 | .menu-item:not(.has-dropdown) { 94 | padding: .5rem 1rem; 95 | } 96 | 97 | .menu { 98 | background-color: transparent !important; 99 | box-shadow: none !important; 100 | border-right: 1px solid #DEE2E7; 101 | overflow-y: auto; 102 | } 103 | 104 | .menu a { 105 | color: #5a6270 !important; 106 | } 107 | 108 | .menu a:hover { 109 | text-decoration: none; 110 | } 111 | 112 | ol li { 113 | margin-bottom: 1.25em; 114 | } 115 | 116 | hr { 117 | margin: 4rem 0; 118 | } 119 | hr.is-small { 120 | margin: 2rem 0; 121 | margin-bottom: 1rem; 122 | } 123 | 124 | code, 125 | kbd, 126 | pre, 127 | samp { 128 | font-family: "Consolas", menlo, monospace; 129 | font-size: 92%; 130 | } 131 | 132 | code { 133 | padding: .1em .3em; 134 | border-radius: .3em; 135 | font-size: .9em; 136 | color: #6056FF; 137 | background: #ebeef0; 138 | overflow-x: auto; 139 | } 140 | 141 | code+.copy-to-clipboard { 142 | margin-left: -1px; 143 | border-left: 0 !important; 144 | font-size: inherit !important; 145 | vertical-align: middle; 146 | height: 24px; 147 | top: 0; 148 | } 149 | 150 | pre { 151 | padding: 1rem; 152 | background: #f5f6fa !important; 153 | border: 0; 154 | border-radius: 2px; 155 | line-height: 1.15; 156 | position: relative; 157 | border: 1px solid rgb(222, 226, 231); 158 | } 159 | 160 | pre code { 161 | color: #586e75; 162 | background: inherit; 163 | white-space: inherit; 164 | border: 0; 165 | padding: 0; 166 | margin: 0; 167 | font-size: 0.875em; 168 | line-height: 1.375; 169 | max-width: 100%; 170 | width: 100%; 171 | display: block; 172 | overflow: auto; 173 | } 174 | 175 | .copy-to-clipboard { 176 | background-image: url(../images/clippy.svg); 177 | background-position: 50% 50%; 178 | background-size: 16px 16px; 179 | background-repeat: no-repeat; 180 | width: 27px; 181 | height: 1.45rem; 182 | top: -1px; 183 | display: inline-block; 184 | vertical-align: middle; 185 | position: relative; 186 | color: #586e75; 187 | background-color: #FFF7DD; 188 | margin-left: -.2rem; 189 | cursor: pointer; 190 | border-radius: 0 2px 2px 0; 191 | margin-bottom: 1px; 192 | } 193 | 194 | .copy-to-clipboard:hover { 195 | background-color: #E8E2CD; 196 | } 197 | 198 | pre .copy-to-clipboard { 199 | position: absolute; 200 | right: 4px; 201 | top: 4px; 202 | background-color: white; 203 | color: #ccc; 204 | border-radius: 2px; 205 | } 206 | 207 | pre .copy-to-clipboard:hover { 208 | background-color: whitesmoke; 209 | color: #fff !important; 210 | } 211 | 212 | .notification { 213 | background: #f9f9f9 !important; 214 | border-left: 3px solid #6056FF; 215 | color: #67757c !important; 216 | } 217 | 218 | .notification.is-white { 219 | border-left-color: white; 220 | } 221 | 222 | .notification.is-black { 223 | border-left-color: #0a0a0a; 224 | } 225 | 226 | .notification.is-light { 227 | border-left-color: whitesmoke; 228 | } 229 | 230 | .notification.is-dark { 231 | border-left-color: #2f3d4a; 232 | } 233 | 234 | .notification.is-primary { 235 | border-left-color: #6056FF; 236 | } 237 | 238 | .notification.is-link { 239 | border-left-color: #3273dc; 240 | } 241 | 242 | .notification.is-info { 243 | border-left-color: #37aee3; 244 | } 245 | 246 | .notification.is-success { 247 | border-left-color: #26c6da; 248 | } 249 | 250 | .notification.is-warning { 251 | border-left-color: #ffb22b; 252 | } 253 | 254 | .notification.is-danger { 255 | border-left-color: #ef5350; 256 | } 257 | 258 | .tabs { 259 | margin-bottom: 0 !important; 260 | } 261 | 262 | .tabs ul { 263 | margin-left: 0; 264 | margin-top: 0; 265 | } 266 | 267 | .tabs ul li a { 268 | color: #5a6270 !important; 269 | border-bottom: 2px solid transparent; 270 | padding: 1em; 271 | } 272 | 273 | .tabs ul li.is-active a { 274 | color: #6056FF !important; 275 | border-bottom-color: #6056FF !important; 276 | } 277 | 278 | .tabs ul li a:hover { 279 | text-decoration: none; 280 | } 281 | 282 | .tab-content .tab-pane { 283 | display: none; 284 | padding: 1em; 285 | } 286 | 287 | .tab-content .tab-pane.is-active { 288 | display: block; 289 | } 290 | 291 | .preview { 292 | border: 1px solid rgb(222, 226, 231); 293 | border-radius: 3px; 294 | margin-bottom: 1.5rem; 295 | } 296 | 297 | .preview .tab-content .tab-pane:nth-child(2) { 298 | background-color: #f5f6fa; 299 | } 300 | 301 | .preview .tab-content .tab-pane:nth-child(2) pre { 302 | border: none !important; 303 | } 304 | 305 | .content table td { 306 | padding: 1.25em .75em; 307 | } 308 | 309 | .symbol { 310 | display: block; 311 | font-size: 1.5rem; 312 | padding: 1rem 0; 313 | text-decoration: none !important; 314 | } 315 | 316 | .symbol .symbol-name { 317 | font-size: 85.4%; 318 | font-weight: 700; 319 | color: #050607; 320 | padding: 2px 5px 3px; 321 | background-color: rgba(238, 240, 244, 0.74); 322 | border-radius: 3px; 323 | } 324 | 325 | .symbol .symbol-separator { 326 | background-color: transparent; 327 | color: #aaafbd; 328 | } 329 | 330 | .symbol .symbol-type { 331 | color: #7e879c; 332 | font-weight: 400; 333 | background-color: transparent; 334 | } 335 | 336 | 337 | .param { 338 | margin-bottom: .5rem !important; 339 | } 340 | 341 | .param+.param-description { 342 | margin-bottom: 1.5rem; 343 | } 344 | 345 | .param-name, 346 | .param-type { 347 | font-size: 85.4%; 348 | font-weight: 700; 349 | color: #050607; 350 | padding: 2px 5px 3px; 351 | background-color: rgba(238, 240, 244, 0.74); 352 | border-radius: 3px; 353 | } 354 | 355 | .param-type { 356 | font-size: 1em; 357 | font-weight: 400; 358 | color: #37aee3; 359 | } 360 | 361 | .param-type .param-type-separator { 362 | color: #7a7a7a; 363 | } 364 | 365 | .param-separator { 366 | background-color: transparent; 367 | color: #aaafbd; 368 | margin: .25rem; 369 | } 370 | 371 | .param-description { 372 | padding: 10px 20px 7px; 373 | border-top: 1px solid #eef0f5 !important; 374 | background: #fbfbfb; 375 | } -------------------------------------------------------------------------------- /src/docs/themes/creativebulma/static/css/docs.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 15px; 3 | font-weight: 400; 4 | } 5 | 6 | html, 7 | body, 8 | .is-fullheight { 9 | height: 100%; 10 | min-height: 100%; 11 | overflow-y: auto; 12 | } 13 | 14 | body { 15 | background-color: #fff; 16 | color: #5a6270 !important; 17 | font-family: Source Sans Pro, sans-serif; 18 | } 19 | 20 | .is-fullheight .navbar+.is-fullheight { 21 | height: calc(100% - 3.25rem); 22 | min-height: calc(100% - 3.25rem); 23 | } 24 | 25 | .brand { 26 | line-height: 1.5; 27 | padding: .5rem .75rem; 28 | height: 3.25rem; 29 | display: block; 30 | font-weight: 700; 31 | } 32 | 33 | .navbar a:not(.button) { 34 | color: #5a6270 !important; 35 | text-decoration: none; 36 | } 37 | .navbar a:not(.button):hover { 38 | color: #6056FF !important; 39 | text-decoration: none; 40 | } 41 | 42 | .content h1, 43 | .content h2 { 44 | font-weight: 500; 45 | } 46 | 47 | .content h1+h2 { 48 | margin-top: 0 !important; 49 | font-size: 1.3em; 50 | font-weight: 500; 51 | color: #5A6270; 52 | padding-bottom: calc(1.45rem - 1px); 53 | border-bottom: 1px solid #dee2e7; 54 | } 55 | 56 | .content h2+h3 { 57 | margin-top: 0 !important; 58 | font-size: 1.125em; 59 | font-weight: 500; 60 | color: #5A6270; 61 | padding-bottom: calc(1.45rem - 1px); 62 | } 63 | 64 | .content h1, 65 | .content h2, 66 | .content h3 { 67 | color: #2f353f; 68 | } 69 | 70 | .content h4, 71 | .content h5, 72 | .content h6 { 73 | color: #5a6270; 74 | margin: 1em 0 .8em 0; 75 | } 76 | 77 | a:not(.button) { 78 | color: #6056FF; 79 | } 80 | 81 | a:not(.button):hover { 82 | text-decoration: underline; 83 | } 84 | 85 | .menu-list { 86 | padding: 3rem 0; 87 | } 88 | 89 | .menu-list li ul { 90 | font-size: .85rem; 91 | } 92 | 93 | .menu-item:not(.has-dropdown) { 94 | padding: .5rem 1rem; 95 | } 96 | 97 | .menu { 98 | background-color: transparent !important; 99 | box-shadow: none !important; 100 | border-right: 1px solid #DEE2E7; 101 | overflow-y: auto; 102 | } 103 | 104 | .menu a { 105 | color: #5a6270 !important; 106 | } 107 | 108 | .menu a:hover { 109 | text-decoration: none; 110 | } 111 | 112 | ol li { 113 | margin-bottom: 1.25em; 114 | } 115 | 116 | hr { 117 | margin: 4rem 0; 118 | } 119 | hr.is-small { 120 | margin: 2rem 0; 121 | margin-bottom: 1rem; 122 | } 123 | 124 | code, 125 | kbd, 126 | pre, 127 | samp { 128 | font-family: "Consolas", menlo, monospace; 129 | font-size: 92%; 130 | } 131 | 132 | code { 133 | padding: .1em .3em; 134 | border-radius: .3em; 135 | font-size: .9em; 136 | color: #6056FF; 137 | background: #ebeef0; 138 | overflow-x: auto; 139 | } 140 | 141 | code+.copy-to-clipboard { 142 | margin-left: -1px; 143 | border-left: 0 !important; 144 | font-size: inherit !important; 145 | vertical-align: middle; 146 | height: 24px; 147 | top: 0; 148 | } 149 | 150 | pre { 151 | padding: 1rem; 152 | background: #f5f6fa !important; 153 | border: 0; 154 | border-radius: 2px; 155 | line-height: 1.15; 156 | position: relative; 157 | border: 1px solid rgb(222, 226, 231); 158 | } 159 | 160 | pre code { 161 | color: #586e75; 162 | background: inherit; 163 | white-space: inherit; 164 | border: 0; 165 | padding: 0; 166 | margin: 0; 167 | font-size: 0.875em; 168 | line-height: 1.375; 169 | max-width: 100%; 170 | width: 100%; 171 | display: block; 172 | overflow: auto; 173 | } 174 | 175 | .copy-to-clipboard { 176 | background-image: url(../images/clippy.svg); 177 | background-position: 50% 50%; 178 | background-size: 16px 16px; 179 | background-repeat: no-repeat; 180 | width: 27px; 181 | height: 1.45rem; 182 | top: -1px; 183 | display: inline-block; 184 | vertical-align: middle; 185 | position: relative; 186 | color: #586e75; 187 | background-color: #FFF7DD; 188 | margin-left: -.2rem; 189 | cursor: pointer; 190 | border-radius: 0 2px 2px 0; 191 | margin-bottom: 1px; 192 | } 193 | 194 | .copy-to-clipboard:hover { 195 | background-color: #E8E2CD; 196 | } 197 | 198 | pre .copy-to-clipboard { 199 | position: absolute; 200 | right: 4px; 201 | top: 4px; 202 | background-color: white; 203 | color: #ccc; 204 | border-radius: 2px; 205 | } 206 | 207 | pre .copy-to-clipboard:hover { 208 | background-color: whitesmoke; 209 | color: #fff !important; 210 | } 211 | 212 | .notification { 213 | background: #f9f9f9 !important; 214 | border-left: 3px solid #6056FF; 215 | color: #67757c !important; 216 | } 217 | 218 | .notification.is-white { 219 | border-left-color: white; 220 | } 221 | 222 | .notification.is-black { 223 | border-left-color: #0a0a0a; 224 | } 225 | 226 | .notification.is-light { 227 | border-left-color: whitesmoke; 228 | } 229 | 230 | .notification.is-dark { 231 | border-left-color: #2f3d4a; 232 | } 233 | 234 | .notification.is-primary { 235 | border-left-color: #6056FF; 236 | } 237 | 238 | .notification.is-link { 239 | border-left-color: #3273dc; 240 | } 241 | 242 | .notification.is-info { 243 | border-left-color: #37aee3; 244 | } 245 | 246 | .notification.is-success { 247 | border-left-color: #26c6da; 248 | } 249 | 250 | .notification.is-warning { 251 | border-left-color: #ffb22b; 252 | } 253 | 254 | .notification.is-danger { 255 | border-left-color: #ef5350; 256 | } 257 | 258 | .tabs { 259 | margin-bottom: 0 !important; 260 | } 261 | 262 | .tabs ul { 263 | margin-left: 0; 264 | margin-top: 0; 265 | } 266 | 267 | .tabs ul li a { 268 | color: #5a6270 !important; 269 | border-bottom: 2px solid transparent; 270 | padding: 1em; 271 | } 272 | 273 | .tabs ul li.is-active a { 274 | color: #6056FF !important; 275 | border-bottom-color: #6056FF !important; 276 | } 277 | 278 | .tabs ul li a:hover { 279 | text-decoration: none; 280 | } 281 | 282 | .tab-content .tab-pane { 283 | display: none; 284 | padding: 1em; 285 | } 286 | 287 | .tab-content .tab-pane.is-active { 288 | display: block; 289 | } 290 | 291 | .preview { 292 | border: 1px solid rgb(222, 226, 231); 293 | border-radius: 3px; 294 | margin-bottom: 1.5rem; 295 | } 296 | 297 | .preview .tab-content .tab-pane:nth-child(2) { 298 | background-color: #f5f6fa; 299 | } 300 | 301 | .preview .tab-content .tab-pane:nth-child(2) pre { 302 | border: none !important; 303 | } 304 | 305 | .content table td { 306 | padding: 1.25em .75em; 307 | } 308 | 309 | .symbol { 310 | display: block; 311 | font-size: 1.5rem; 312 | padding: 1rem 0; 313 | text-decoration: none !important; 314 | } 315 | 316 | .symbol .symbol-name { 317 | font-size: 85.4%; 318 | font-weight: 700; 319 | color: #050607; 320 | padding: 2px 5px 3px; 321 | background-color: rgba(238, 240, 244, 0.74); 322 | border-radius: 3px; 323 | } 324 | 325 | .symbol .symbol-separator { 326 | background-color: transparent; 327 | color: #aaafbd; 328 | } 329 | 330 | .symbol .symbol-type { 331 | color: #7e879c; 332 | font-weight: 400; 333 | background-color: transparent; 334 | } 335 | 336 | 337 | .param { 338 | margin-bottom: .5rem !important; 339 | } 340 | 341 | .param+.param-description { 342 | margin-bottom: 1.5rem; 343 | } 344 | 345 | .param-name, 346 | .param-type { 347 | font-size: 85.4%; 348 | font-weight: 700; 349 | color: #050607; 350 | padding: 2px 5px 3px; 351 | background-color: rgba(238, 240, 244, 0.74); 352 | border-radius: 3px; 353 | } 354 | 355 | .param-type { 356 | font-size: 1em; 357 | font-weight: 400; 358 | color: #37aee3; 359 | } 360 | 361 | .param-type .param-type-separator { 362 | color: #7a7a7a; 363 | } 364 | 365 | .param-separator { 366 | background-color: transparent; 367 | color: #aaafbd; 368 | margin: .25rem; 369 | } 370 | 371 | .param-description { 372 | padding: 10px 20px 7px; 373 | border-top: 1px solid #eef0f5 !important; 374 | background: #fbfbfb; 375 | } -------------------------------------------------------------------------------- /src/docs/content/get-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Get Started" 3 | date: "2020-03-21" 4 | menu: "main" 5 | weight: 2 6 | draft: false 7 | --- 8 | 9 | # Get started 10 | 11 | **You only need 1 CSS file to use BulmaTooltip** 12 | 13 | ## Installation 14 | ### First, let's install the component! 15 | There are several ways to get started with BulmaTooltip. 16 | 17 | {{< tabs tabTotal="3" tabID="1" tabName1="1. NPM" tabName2="2. CDN" tabName3="3. Github" >}} 18 | {{< tab tabNum="1" >}} 19 | Use npm to install the `bulma-tooltip` package **recommended** 20 | ```shell 21 | npm install @creativebulma/bulma-tooltip 22 | ``` 23 | {{< /tab >}} 24 | 25 | {{< tab tabNum="2" >}} 26 | Use the [jsDelivr](https://jsdelivr.com) CDN to link to the BulmaTooltip stylesheet 27 | ```html 28 | https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tooltip 29 | ``` 30 | {{< /tab >}} 31 | 32 | {{< tab tabNum="3" >}} 33 | Use the GitHub repository to get the latest development version. 34 | 35 | Download from the repository [https://github.com/CreativeBulma/bulma-tooltip/tree/master/dist/](https://github.com/CreativeBulma/bulma-tooltip/tree/master/dist/) 36 | {{< /tab >}} 37 | {{< /tabs >}} 38 | 39 | ## Usage 40 | Tooltips are displayed into a small grey box on top of the element. All you have to do is to add `tooltip` dataset with the text you want to display as value. 41 | 42 | ### Styles 43 | #### Default 44 | {{< preview id="default" lang="html" >}} 45 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

46 | {{< /preview >}} 47 | 48 | Tooltip can be used on any type of HTML element supporting dataset. 49 | {{< preview id="button" lang="html" >}} 50 | 51 | {{< /preview >}} 52 | 53 | #### With Arrow 54 | For design purpose, you can display an arrow on the tooltip box by adding `has-tooltip-arrow` class on the element. 55 | {{< preview id="arrow" lang="html" >}} 56 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

57 | {{< /preview >}} 58 | 59 | ### Position 60 | Tooltip position can be changed by adding one of the following classes to the HTML element containing the tooltip: `has-tooltip-right`, `has-tooltip-bottom`, `has-tooltip-left`. 61 | {{< preview id="position" lang="html" >}} 62 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

63 | {{< /preview >}} 64 | 65 | ### Multiline 66 | Display long tooltip content by adding `has-tooltip-multiline` class on the element. 67 | 68 | You can change tooltip text alignement by adding `has-tooltip-text-left`, `has-tooltip-text-centered` or `has-tooltip-text-right` modifier. 69 | {{< preview id="multiline" lang="html" >}} 70 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

71 | {{< /preview >}} 72 | 73 | ### Colors 74 | Tooltip supports colors modifier by adding one of the following classes to the HTML element containing the tooltip: `has-tooltip-info`, `has-tooltip-warning`, `has-tooltip-primary`, `has-tooltip-success`, `has-tooltip-danger`. 75 | {{< preview id="colors" lang="html" >}} 76 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

77 | {{< /preview >}} 78 | 79 | ### Always active 80 | You can set tooltip to be always visible by adding `has-tooltip-active` class on the element. 81 | {{< preview id="active" lang="html" >}} 82 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

83 | {{< /preview >}} 84 | 85 | ### Responsiveness 86 | #### Position 87 | Tooltip position can be based on responsiveness breakpoints by adding one of the following classes to the HTML element containing the tooltip: 88 | * `has-tooltip-#{$direction}-mobile` 89 | * `has-tooltip-#{$direction}-tablet` 90 | * `has-tooltip-#{$direction}-tablet-only` 91 | * `has-tooltip-#{$direction}-touch` 92 | * `has-tooltip-#{$direction}-desktop` 93 | * `has-tooltip-#{$direction}-desktop-only` 94 | * `has-tooltip-#{$direction}-until-widescreen` 95 | * `has-tooltip-#{$direction}-widescreen` 96 | * `has-tooltip-#{$direction}-widescreen-only` 97 | * `has-tooltip-#{$direction}-until-fullhd` 98 | * `has-tooltip-#{$direction}-fullhd` 99 | 100 | Don't forget to replace `#${direction}` by one of the avaiblable direction: `top`, `right`, `bottom`, `left`. 101 | 102 | ### Text alignement 103 | * `has-tooltip-text-#{$direction}-mobile` 104 | * `has-tooltip-text-#{$direction}-tablet` 105 | * `has-tooltip-text-#{$direction}-tablet-only` 106 | * `has-tooltip-text-#{$direction}-touch` 107 | * `has-tooltip-text-#{$direction}-desktop` 108 | * `has-tooltip-text-#{$direction}-desktop-only` 109 | * `has-tooltip-text-#{$direction}-until-widescreen` 110 | * `has-tooltip-text-#{$direction}-widescreen` 111 | * `has-tooltip-text-#{$direction}-widescreen-only` 112 | * `has-tooltip-text-#{$direction}-until-fullhd` 113 | * `has-tooltip-text-#{$direction}-fullhd` 114 | 115 | Don't forget to replace `#${direction}` by one of the avaiblable direction: `left`, `centered`, `right`. 116 | 117 | #### Hide tooltip 118 | |Class|Mobile|Tablet|Desktop|Widescreen|FullHD| 119 | |--- |--- |--- |--- |--- |--- | 120 | |has-tooltip-hidden-mobile|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}| 121 | |has-tooltip-hidden-tablet-only|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}| 122 | |has-tooltip-hidden-desktop-only|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}| 123 | |has-tooltip-hidden-widescreen-only|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}| 124 | |has-tooltip-hidden-touch|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}| 125 | |has-tooltip-hidden-tablet|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}| 126 | |has-tooltip-hidden-desktop|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}| 127 | |has-tooltip-hidden-widescreen|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}|{{< tag danger "hidden" >}}| 128 | |has-tooltip-hidden-fullhd|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag success "visible" >}}|{{< tag danger "hidden" >}}| 129 | -------------------------------------------------------------------------------- /docs/changelog/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Changelog - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

Changelog

126 | 127 |
128 |
129 |

130 | v1.2.0 (2020-05-17) 131 |

132 | 133 |
134 |

New modifiers and better multiline support

135 |
    136 |
  • 137 | 138 | 139 | added 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | New sass variables to customize tooltip fade animation
    • 151 |
  • 152 | 153 | 154 | added 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | New modifier to change tooltip text alignment
    • 166 |
  • 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | docs 177 | 178 | 179 | 180 | Add missing multiline tooltip documentation
    • 181 |
182 | 183 |
184 |
185 |
186 | 187 |
188 |
189 |

190 | v1.1.0 (2020-05-10) 191 |

192 | 193 |
194 |

New helpers and fixes

195 |
    196 |
  • 197 | 198 | 199 | 200 | 201 | fixed 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | Issues with combination of arrow and directions options
    • 221 |
  • 222 | 223 | 224 | added 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | helpers - New helper to hide tooltip on specific breakpoints
    • 236 |
  • 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | docs 247 | 248 | 249 | 250 | Add missing responsiveness documentation
    • 251 |
252 | 253 |
254 |
255 |
256 | 257 |
258 |
259 |

260 | v1.0.2 (2020-03-29) 261 |

262 | 263 |
264 |

Minor Fixes

265 |
    266 |
  • 267 | 268 | 269 | 270 | 271 | fixed 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | Tooltip remains visible after clicking a button
    • 291 |
  • 292 | 293 | 294 | 295 | 296 | fixed 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | docs - Test on LAN : Docs site is now availabel on LAN when using npm run doc:serve
    • 306 |
  • 307 | 308 | 309 | 310 | 311 | fixed 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | docs - Changelog display issue
    • 321 |
322 | 323 |
324 |
325 |
326 | 327 |
328 |
329 |

330 | v1.0.1 (2020-03-29) 331 |

332 | 333 |
334 |

Minor Fixes

335 |
    336 |
  • 337 | 338 | 339 | 340 | 341 | fixed 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | docs - Issue with generated site
    • 351 |
352 | 353 |
354 |
355 |
356 | 357 |
358 |
359 |

360 | v1.0.0 (2020-03-21) 361 |

362 | 363 |
364 |

First working version

365 |
    366 |
  • 367 | 368 | 369 | added 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | Styles : with or without arrow
    • 381 |
  • 382 | 383 | 384 | added 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | Multi-colors
    • 396 |
  • 397 | 398 | 399 | added 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | Position modifiers
    • 411 |
412 | 413 |
414 |
415 |
416 | 417 | 418 | 419 |
420 |
421 |
422 |
423 |
424 | 425 | 426 | 427 | 428 | 429 | 430 | -------------------------------------------------------------------------------- /docs/how-to/customize/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Customize - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

How-To

126 |

Customize

127 |

This component has been designed to be easily customizable.

128 |

There is 2 ways to customize it, depending on the way you integrate this component into your project.

129 |

Sass

130 |

If you use the Sass source into your project, all you have to do is to customize variables before importing the component.

131 | 
$tooltip-radius: 6px
132 | 
133 | @import '@creativebulma/bulma-tooltip'
134 |

Variables

135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 |
Variable nameDescriptionDefault value
$tooltip-animation-duration.3s
animation-transition-timing-functionlinear
$tooltip-arrow-size6px
$tooltip-background-color$grey-dark
$tooltip-background-opacity0.9
$tooltip-color$white
$tooltip-font-family$family-primary
$tooltip-font-size$size-7
$tooltip-max-width15rem
$tooltip-padding.5rem 1rem
$tooltip-radius$radius-small
$tooltip-z-index1020
219 |

CSS

220 |

If you uses the CSS version you have to customize Sass source files then rebuild the CSS file.

221 |

First, let’s install some packages!

222 | 
npm install
223 |

This command will install all development required package.

224 |

Customize

225 |

Customize Sass variables defined wihtin src/sass/_variables.sass file.

226 |

Build

227 |

You can build CSS files by launching the build process with the command:

228 | 
npm run build
229 |

Styles are built using node-sass from src/sass directory and minify them. 230 | Built files will be copied into /dist directory (can be customized within package.json).

231 | 232 |
233 |
234 |
235 |
236 |
237 | 238 | 239 | 240 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /docs/js/clipboard.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * clipboard.js v2.0.4 3 | * https://zenorocha.github.io/clipboard.js 4 | * 5 | * Licensed MIT © Zeno Rocha 6 | */ 7 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return function(n){var o={};function r(t){if(o[t])return o[t].exports;var e=o[t]={i:t,l:!1,exports:{}};return n[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=n,r.c=o,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function o(t,e){for(var n=0;n 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Get Started - BulmaTooltip 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 |
34 |
35 | 90 |
91 | 122 | 123 |
124 |
125 |

Get started

126 |

You only need 1 CSS file to use BulmaTooltip

127 |

Installation

128 |

First, let’s install the component!

129 |

There are several ways to get started with BulmaTooltip.

130 |
131 |
    132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 165 | 166 | 167 |
168 |
169 |
170 | 171 | 172 | 173 | 174 | 175 | 176 |
177 |

Use npm to install the bulma-tooltip package recommended

178 | 
npm install @creativebulma/bulma-tooltip
 179 |
180 |
181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
191 |

Use the jsDelivr CDN to link to the BulmaTooltip stylesheet

192 | 
https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tooltip
 193 |
194 |
195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 |
205 |

Use the GitHub repository to get the latest development version.

206 |

Download from the repository https://github.com/CreativeBulma/bulma-tooltip/tree/master/dist/

207 | 208 |
209 | 210 | 211 | 212 |
213 |

Usage

214 |

Tooltips are displayed into a small grey box on top of the element. All you have to do is to add tooltip dataset with the text you want to display as value.

215 |

Styles

216 |

Default

217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 |
225 |
226 |
    227 | 230 | 231 |
  • 232 | Code 233 |
    • 234 | 235 |
236 |
237 |
238 |
239 | 240 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

241 | 242 |
243 |
244 | 

 245 | <p>Lorem ipsum dolor sit amet, <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>
 246 |
247 |
248 |
249 |
250 |

Tooltip can be used on any type of HTML element supporting dataset. 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 |

259 |
260 |
    261 | 264 | 265 |
  • 266 | Code 267 |
    • 268 | 269 |
270 |
271 |
272 |
273 | 274 | 275 | 276 |
277 |
278 | 

 279 | <button class="button" data-tooltip="Tooltip Text">top tooltip</button>
 280 |
281 |
282 |
283 |

284 |

With Arrow

285 |

For design purpose, you can display an arrow on the tooltip box by adding has-tooltip-arrow class on the element. 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 |

294 |
295 |
    296 | 299 | 300 |
  • 301 | Code 302 |
    • 303 | 304 |
305 |
306 |
307 |
308 | 309 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

310 | 311 |
312 |
313 | 

 314 | <p>Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow" 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>
 315 |
316 |
317 |
318 |

319 |

Position

320 |

Tooltip position can be changed by adding one of the following classes to the HTML element containing the tooltip: has-tooltip-right, has-tooltip-bottom, has-tooltip-left. 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 |

329 |
330 |
    331 | 334 | 335 |
  • 336 | Code 337 |
    • 338 | 339 |
340 |
341 |
342 |
343 | 344 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

345 | 346 |
347 |
348 | 

 349 | <p>Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow" data-tooltip="Tooltip content on top">consectetur adipisicing elit</span>. Ipsa fugit <span class="has-tooltip-arrow has-tooltip-right" data-tooltip="Right tooltip content">dolores</span> earum quod distinctio ducimus non dignissimos <span class="has-tooltip-arrow has-tooltip-bottom" data-tooltip="Bottom tooltip content">molestias</span> amet corrupti voluptatum assumenda impedit beatae <span class="has-tooltip-arrow has-tooltip-left" data-tooltip="Left tooltip content">veritatis</span> nemo veniam error, hic cumque.</p>
 350 |
351 |
352 |
353 |

354 |

Multiline

355 |

Display long tooltip content by adding has-tooltip-multiline class on the element.

356 |

You can change tooltip text alignement by adding has-tooltip-text-left, has-tooltip-text-centered or has-tooltip-text-right modifier. 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 |

365 |
366 |
    367 | 370 | 371 |
  • 372 | Code 373 |
    • 374 | 375 |
376 |
377 |
378 |
379 | 380 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

381 | 382 |
383 |
384 | 

 385 | <p>Lorem ipsum dolor sit amet, <span class="has-tooltip-arrow has-tooltipl-multiline" data-tooltip="Multiline&#10;Content&#10;World!">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>
 386 |
387 |
388 |
389 |

390 |

Colors

391 |

Tooltip supports colors modifier by adding one of the following classes to the HTML element containing the tooltip: has-tooltip-info, has-tooltip-warning, has-tooltip-primary, has-tooltip-success, has-tooltip-danger. 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 |

400 |
401 |
    402 | 405 | 406 |
  • 407 | Code 408 |
    • 409 | 410 |
411 |
412 |
413 |
414 | 415 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

416 | 417 |
418 |
419 | 

 420 | <p>Lorem ipsum <span class="has-tooltip-arrow has-tooltip-info" data-tooltip="Info tooltip content">dolor</span> sit amet, <span class="has-tooltip-arrow has-tooltip-warning" data-tooltip="Warning tooltip content">consectetur adipisicing elit</span>. Ipsa fugit <span class="has-tooltip-arrow has-tooltip-right has-tooltip-success" data-tooltip="Success tooltip content">dolores</span> earum quod distinctio ducimus non dignissimos <span class="has-tooltip-arrow has-tooltip-bottom has-tooltip-primary" data-tooltip="Primary tooltip content">molestias</span> amet corrupti voluptatum assumenda impedit beatae <span class="has-tooltip-arrow has-tooltip-left has-tooltip-danger" data-tooltip="Danger tooltip content">veritatis</span> nemo veniam error, hic cumque.</p>
 421 |
422 |
423 |
424 |

425 |

Always active

426 |

You can set tooltip to be always visible by adding has-tooltip-active class on the element. 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 |

435 |
436 |
    437 | 440 | 441 |
  • 442 | Code 443 |
    • 444 | 445 |
446 |
447 |
448 |
449 | 450 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.

451 | 452 |
453 |
454 | 

 455 | <p>Lorem ipsum dolor sit amet, <span class="has-tooltip-active" 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>
 456 |
457 |
458 |
459 |

460 |

Responsiveness

461 |

Position

462 |

Tooltip position can be based on responsiveness breakpoints by adding one of the following classes to the HTML element containing the tooltip:

463 |
    464 |
  • has-tooltip-#{$direction}-mobile
    • 465 |
  • has-tooltip-#{$direction}-tablet
    • 466 |
  • has-tooltip-#{$direction}-tablet-only
    • 467 |
  • has-tooltip-#{$direction}-touch
    • 468 |
  • has-tooltip-#{$direction}-desktop
    • 469 |
  • has-tooltip-#{$direction}-desktop-only
    • 470 |
  • has-tooltip-#{$direction}-until-widescreen
    • 471 |
  • has-tooltip-#{$direction}-widescreen
    • 472 |
  • has-tooltip-#{$direction}-widescreen-only
    • 473 |
  • has-tooltip-#{$direction}-until-fullhd
    • 474 |
  • has-tooltip-#{$direction}-fullhd
    • 475 |
476 |

Don’t forget to replace #${direction} by one of the avaiblable direction: top, right, bottom, left.

477 |

Text alignement

478 |
    479 |
  • has-tooltip-text-#{$direction}-mobile
    • 480 |
  • has-tooltip-text-#{$direction}-tablet
    • 481 |
  • has-tooltip-text-#{$direction}-tablet-only
    • 482 |
  • has-tooltip-text-#{$direction}-touch
    • 483 |
  • has-tooltip-text-#{$direction}-desktop
    • 484 |
  • has-tooltip-text-#{$direction}-desktop-only
    • 485 |
  • has-tooltip-text-#{$direction}-until-widescreen
    • 486 |
  • has-tooltip-text-#{$direction}-widescreen
    • 487 |
  • has-tooltip-text-#{$direction}-widescreen-only
    • 488 |
  • has-tooltip-text-#{$direction}-until-fullhd
    • 489 |
  • has-tooltip-text-#{$direction}-fullhd
    • 490 |
491 |

Don’t forget to replace #${direction} by one of the avaiblable direction: left, centered, right.

492 |

Hide tooltip

493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 522 | 537 | 552 | 567 | 582 | 583 | 584 | 585 | 600 | 615 | 630 | 645 | 660 | 661 | 662 | 663 | 678 | 693 | 708 | 723 | 738 | 739 | 740 | 741 | 756 | 771 | 786 | 801 | 816 | 817 | 818 | 819 | 834 | 849 | 864 | 879 | 894 | 895 | 896 | 897 | 912 | 927 | 942 | 957 | 972 | 973 | 974 | 975 | 990 | 1005 | 1020 | 1035 | 1050 | 1051 | 1052 | 1053 | 1068 | 1083 | 1098 | 1113 | 1128 | 1129 | 1130 | 1131 | 1146 | 1161 | 1176 | 1191 | 1206 | 1207 | 1208 |
ClassMobileTabletDesktopWidescreenFullHD
has-tooltip-hidden-mobile 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | hidden 521 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | visible 534 | 535 | 536 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | visible 549 | 550 | 551 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | visible 564 | 565 | 566 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | visible 579 | 580 | 581 |
has-tooltip-hidden-tablet-only 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | visible 597 | 598 | 599 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | hidden 614 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | visible 627 | 628 | 629 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | visible 642 | 643 | 644 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | visible 657 | 658 | 659 |
has-tooltip-hidden-desktop-only 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | visible 675 | 676 | 677 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | visible 690 | 691 | 692 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 706 | hidden 707 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | visible 720 | 721 | 722 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | visible 735 | 736 | 737 |
has-tooltip-hidden-widescreen-only 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | visible 753 | 754 | 755 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | visible 768 | 769 | 770 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | visible 783 | 784 | 785 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | hidden 800 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | visible 813 | 814 | 815 |
has-tooltip-hidden-touch 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | hidden 833 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | hidden 848 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | visible 861 | 862 | 863 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | visible 876 | 877 | 878 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | visible 891 | 892 | 893 |
has-tooltip-hidden-tablet 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | visible 909 | 910 | 911 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | hidden 926 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | hidden 941 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | hidden 956 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | 966 | 967 | 968 | 969 | 970 | hidden 971 |
has-tooltip-hidden-desktop 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | visible 987 | 988 | 989 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | visible 1002 | 1003 | 1004 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | hidden 1019 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | hidden 1034 | 1036 | 1037 | 1038 | 1039 | 1040 | 1041 | 1042 | 1043 | 1044 | 1045 | 1046 | 1047 | 1048 | hidden 1049 |
has-tooltip-hidden-widescreen 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | visible 1065 | 1066 | 1067 | 1069 | 1070 | 1071 | 1072 | 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | visible 1080 | 1081 | 1082 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 | visible 1095 | 1096 | 1097 | 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | 1107 | 1108 | 1109 | 1110 | 1111 | hidden 1112 | 1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | hidden 1127 |
has-tooltip-hidden-fullhd 1132 | 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | 1139 | 1140 | 1141 | 1142 | visible 1143 | 1144 | 1145 | 1147 | 1148 | 1149 | 1150 | 1151 | 1152 | 1153 | 1154 | 1155 | 1156 | 1157 | visible 1158 | 1159 | 1160 | 1162 | 1163 | 1164 | 1165 | 1166 | 1167 | 1168 | 1169 | 1170 | 1171 | 1172 | visible 1173 | 1174 | 1175 | 1177 | 1178 | 1179 | 1180 | 1181 | 1182 | 1183 | 1184 | 1185 | 1186 | 1187 | visible 1188 | 1189 | 1190 | 1192 | 1193 | 1194 | 1195 | 1196 | 1197 | 1198 | 1199 | 1200 | 1201 | 1202 | 1203 | 1204 | hidden 1205 |
1209 | 1210 |
1211 |
1212 |
1213 |
1214 |
1215 | 1216 | 1217 | 1218 | 1219 | 1220 | 1221 | 1222 | --------------------------------------------------------------------------------