项目作者: haztivity

项目描述 :
Resource for haztivity to create tooltips.
高级语言: CSS
项目地址: git://github.com/haztivity/hz-tooltip.git
创建时间: 2017-05-16T15:05:24Z
项目社区:https://github.com/haztivity/hz-tooltip

开源协议:MIT License

下载


hz-tooltip

hz-tooltip is an haztivity resource to create tooltips.\
hz-tooltip uses tooltipster under the hood.

Dependencies

Simple use

  1. Import @haztivity/hz-tooltip
  2. Add HzTooltipResource to the page
  3. Set data-hz-resource to the trigger element (the element that has the tooltip)
  4. Set the title attribute with the text for the tooltip

Ts

  1. import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
  2. import template from "./page.pug";
  3. import {HzTooltipResource} from "@haztivity/hz-tooltip";
  4. export let page: PageRegister = PageFactory.createPage(
  5. {
  6. name: "myPage",
  7. resources: [
  8. HzTooltipResource
  9. ],
  10. template: template
  11. }
  12. );

Pug

  1. button(data-hz-resource="HzTooltip" title="Tooltip content!") Hover me!

or

HTML

  1. <button data-hz-resource="HzTooltip" title="Tooltip content!">
  2. Hover me!
  3. </button>

Use templates

For more complex tooltips tooltipster allows to include html in the tooltip using templates.\
To specify a template for a tooltip, use the data-tooltip-content attribute with a valid jquery selector.\
For more info visit tooltipster page

Pug

  1. button(data-hz-resource="HzTooltip" data-tooltip-content="#tooltip-template") HTML Content
  2. div#tooltip-template.tooltip-template
  3. p
  4. img(src="./pages/6611/assets/images/rocket.png")

or

HTML

  1. <button data-hz-resource="HzTooltip" data-tooltip-content="#tooltip-template"> HTML Content </button>
  2. <div class="tooltip-template" id="tooltip-template">
  3. <p>
  4. <img src="./pages/6611/assets/images/rocket.png"/>
  5. </p>
  6. </div>

SCSS

  1. //Hide the template where is not inside the tooltip
  2. .tooltip-template{
  3. display:none;
  4. }
  5. .tooltipster-box{
  6. .tooltip-template{
  7. display: initial;
  8. }
  9. }

or

CSS

  1. /*Hide the template where is not inside the tooltip*/
  2. .tooltip-template{
  3. display:none;
  4. }
  5. .tooltipster-box .tooltip-template{
  6. display: initial;
  7. }

Options

All the options of tooltipster excepts functions could be specified by attributes using:

  1. data-opt-tooltipster-[option]=[value]

If the option have multiple words, use dashes, for example animationDuration will be animation-duration

Examples

Pug

  1. // Delay
  2. button(data-hz-resource="HzTooltip"
  3. title="Tooltip content!"
  4. data-opt-tooltipster-delay="2000") Delay 2s
  5. // Trigger click
  6. button(data-hz-resource="HzTooltip"
  7. title="Tooltip content!"
  8. data-opt-tooltipster-trigger="click") Click me!
  9. // Multiple options
  10. button(data-hz-resource="HzTooltip"
  11. title="Tooltip content!"
  12. data-opt-tooltipster-animation-duration="1000"
  13. data-opt-tooltipster-animation="slide") Multiple options

or

HTML

  1. <!-- Delay option -->
  2. <button data-hz-resource="HzTooltip" title="Tooltip content!" data-opt-hz-tooltip-delay="2000"> Delay 2s </button>
  3. <!-- Trigger option -->
  4. <button data-hz-resource="HzTooltip" title="Tooltip content!" data-opt-hz-tooltip-trigger="click"> Click me! </button>
  5. <!-- Multiple options -->
  6. <button data-hz-resource="HzTooltip"
  7. title="Tooltip content!"
  8. data-opt-hz-tooltip-animation-duration="1000"
  9. data-opt-hz-tooltip-animation="slide">
  10. Multiple options
  11. </button>

For more info see tooltipster options