├── .gitignore ├── package.json ├── src ├── style.scss └── index.js ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-bulma-tooltip", 3 | "version": "2.0.0-alpha.0", 4 | "description": "Tooltip Component for Vue Bulma", 5 | "main": "src/index.js", 6 | "peerDependencies": { 7 | "bulma": ">=0.6", 8 | "vue": ">=2.0" 9 | }, 10 | "repository": "vue-bulma/tooltip", 11 | "keywords": [ 12 | "vue", 13 | "bulma", 14 | "vue-bulma", 15 | "vue-bulma-component", 16 | "vue-bulma-tooltip", 17 | "tooltip" 18 | ], 19 | "author": "Fangdun Cai ", 20 | "license": "MIT", 21 | "dependencies": { 22 | "classnames": "^2.2.6", 23 | "hint.css": "^2.5.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | @import '~bulma/sass/utilities/initial-variables'; 2 | @import '~bulma/sass/utilities/functions'; 3 | @import '~bulma/sass/utilities/derived-variables'; 4 | 5 | $hintPrefix: 'tooltip--'; 6 | $hintFontFamily: $family-sans-serif; 7 | $hintTextShadowDarkenAmount: 0; 8 | $hintWarningColor: $warning; 9 | $hintInfoColor: $info; 10 | $hintSuccessColor: $success; 11 | 12 | @import '~hint.css/src/hint'; 13 | 14 | .tooltip--warning:after { 15 | color: $warning-invert; 16 | } 17 | 18 | .#{$hintPrefix}primary { 19 | @include hint-type($primary); 20 | } 21 | 22 | .#{$hintPrefix}danger { 23 | @include hint-type($danger); 24 | } 25 | 26 | .#{$hintPrefix}rounded:after { 27 | border-radius: $radius; 28 | } 29 | 30 | [class*='#{$hintPrefix}']:after { 31 | box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1); 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | 3 | Tooltip component is based on [hint.css](https://github.com/chinchang/hint.css) for Vue Bulma. 4 | 5 | 6 | ## Installation 7 | 8 | ``` 9 | $ npm install vue-bulma-tooltip --save 10 | ``` 11 | 12 | 13 | ## Examples 14 | 15 | ```vue 16 | 23 | 24 | 33 | ``` 34 | 35 | 36 | ## Badges 37 | 38 | ![](https://img.shields.io/badge/license-MIT-blue.svg) 39 | ![](https://img.shields.io/badge/status-stable-green.svg) 40 | 41 | --- 42 | 43 | > [fundon.me](https://fundon.me)  ·  44 | > GitHub [@fundon](https://github.com/fundon)  ·  45 | > Twitter [@_fundon](https://twitter.com/_fundon) 46 | 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | (The MIT License) 2 | 3 | Copyright (c) 2016 fundon <cfddream@gmail.com< 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/index.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames' 2 | 3 | import './style.scss' 4 | 5 | export default { 6 | name: 'tooltip', 7 | abstract: true, 8 | 9 | props: { 10 | type: String, 11 | size: { 12 | type: String, 13 | default: 'medium', 14 | validator: value => ['small', 'medium', 'large'].includes(value) 15 | }, 16 | always: Boolean, 17 | noAnimate: Boolean, 18 | rounded: Boolean, 19 | label: { 20 | type: String, 21 | default: '' 22 | }, 23 | placement: { 24 | type: String, 25 | default: 'bottom' 26 | } 27 | }, 28 | 29 | render () { 30 | let children = this.$slots.default 31 | if (!children) { 32 | return 33 | } 34 | 35 | // filter out text nodes (possible whitespaces) 36 | children = children.filter(c => c.tag) 37 | /* istanbul ignore if */ 38 | if (!children.length) { 39 | return 40 | } 41 | 42 | const rawChild = children[0] 43 | 44 | 45 | rawChild.data.attrs = rawChild.data.attrs || {} 46 | Object.assign(rawChild.data.attrs, { 47 | 'aria-label': this.label 48 | }) 49 | 50 | rawChild.data.class = Array.isArray(rawChild.data.class) ? rawChild.data.class : [rawChild.data.class] 51 | rawChild.data.class.push(classNames( 52 | 'tooltip', 53 | `tooltip--${this.placement}`, 54 | { 55 | [`tooltip--${this.type}`]: this.type, 56 | [`tooltip--${this.size}`]: this.size, 57 | 'tooltip--rounded': this.rounded, 58 | 'tooltip--always': this.always, 59 | 'tooltip--no-animate': this.noAnimate 60 | } 61 | )) 62 | 63 | return rawChild 64 | }, 65 | 66 | watch: { 67 | label (val) { 68 | this.$el.setAttribute('aria-label', val) 69 | } 70 | } 71 | 72 | } 73 | --------------------------------------------------------------------------------