Skip to content
This repository was archived by the owner on Dec 13, 2019. It is now read-only.

Update tooltip.md #511

Open
smolinari wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Update tooltip.md #511

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion source/components/tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,36 @@ You can replace QBtn and the QPopover content with any DOM elements or component

The idea is to place QTooltip inside your DOM element / component (as **direct child in DOM hierarchy**), when you want it to be the trigger for the QTooltip. Don't worry about QTooltip content inheriting CSS from the container. This won't occur, since QTooltip will be injected as a direct child of `<body>`.

With that in mind, if you want to have a tooltip for say, a rating component, it is best to wrap the component in a ´div´ and add the tool tip as a child of the ´div . Note: this isn't necessary for buttons, as ´QBtn´ is built to support Tooltips.

``` html
<template>
<div class="q-ma-xl">
<div class="inline-block">
<q-tooltip class="tooltip-style" anchor="top middle" self="bottom middle" :offset="[15,15]">Rate to the best of your ability!</q-tooltip>
<q-rating
v-model="ratingModel"
:max="5"
>
</q-rating>
</div>
</div>
</template>

<script>
export default {
data () {
return {
ratingModel: 4
}
}
}
</script>
```
You can also use `v-model`and Vue's event system to toggle, show or hide the Tooltip on certain events.

## Toggle through v-model
``` html
``` html
<template>
<div>
<q-btn color="primary" @click="showing = true" label="Show" />
Expand Down