sv-bootstrap-tooltip (Svelte Bootstrap Tooltip)

Svelte Tooltip Component for Bootstrap (Bootstrap’s tooltip plugin in svlete applications), can be used with sapper or standalone with svelte.Just like Vainilla bootstrap this plugin too is built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. But Unlike Vainilla bootstrap we are using PopperJs V2 instead of V1

How to install

1. npm install --save-dev sv-bootstrap-tooltip @rollup/plugin-replace
2. Add below code in your rollup config

import replace from '@rollup/plugin-replace';
..
..
..
plugins: [
  ..., // Other Plugins
  ..., // Other Plugins
replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
       include: '**/node_modules/**',
    })
]

Requirements

Bootstrap CSS needs to be present globally in project

Simple Demo

Demo link

Usage

Simple

Example

<script>
  import Tooltip from "sv-bootstrap-tooltip";
  let referenceEle;
</script>

<button type="button" class="btn btn-secondary" bind:this={referenceEle}>
Tooltip on top
</button>
<Tooltip triggerElement={referenceEle}>Tooltip</Tooltip>

HTML inside Tooltip

You can pass the any html between opening and closing tag of Tooltip Element

Example

<script>
  import Tooltip from "sv-bootstrap-tooltip";
  let referenceEle;
</script>

<button type="button" class="btn btn-secondary" bind:this={referenceEle}>
Tooltip on top
</button>
<Tooltip triggerElement={referenceEle}>
<em>Tooltip</em>
<u>with</u>
<b>HTML</b>
</Tooltip>

Placement

This option is used to define the placement of tooltip on an triggerElement. By default the placement is top

Example

<script>
  import Tooltip from "sv-bootstrap-tooltip";
  let referenceEle;
</script>

<button type="button" class="btn btn-secondary" bind:this={referenceEle}>
    Tooltip on top
  </button>
<Tooltip triggerElement={referenceEle} placement="left">Tooltip</Tooltip>

Complete Placement Options

Options are similar to Vanilla Bootstrap

Flip

This option should tell the Tooltip to filp side if there is no space on the prefered side

Example

<script>
    import Tooltip from "sv-bootstrap-tooltip";
    let referenceEle;
</script>

<button type="button" class="btn btn-secondary" bind:this={referenceEle}>
Tooltip on top
</button>
<Tooltip flip="false" triggerElement={referenceEle}>
</Tooltip>

Component Options

NOTE

For only manual triggering just pass empty string "" to trigger option and use open option to handle the tooltip manually

Todo

• Animation
• Adding More Placement options

License

MIT