File size: 6,205 Bytes
77c7af4 1f05ebf 77c7af4 1a01674 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 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 |
---
title: "Popover Position"
groupTitle: "Examples"
sort: 7
---
import { CodeSample } from "../../components/CodeSample.tsx";
You can control the popover position using the `side` and `align` options. The `side` option controls the side of the element where the popover will be shown and the `align` option controls the alignment of the popover with the element.
> **Note:** Popover is intelligent enough to adjust itself to fit in the viewport. So, if you set `side` to `left` and `align` to `start`, but the popover doesn't fit in the viewport, it will automatically adjust itself to fit in the viewport. Consider highlighting and scrolling the browser to the element below to see this in action.
```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver();
driverObj.highlight({
element: '#left-start',
popover: {
title: 'Animated Tour Example',
description: 'Here is the code example showing animated tour. Let\'s walk you through it.',
side: "left",
align: 'start'
}
});
```
<div id="sample-box" className='p-12 bg-gray-200 rounded-md flex items-center justify-center'>
<p>Use the buttons below to show the popover.</p>
</div>
<div className="flex flex-wrap mt-3 gap-1 justify-start">
<CodeSample
buttonText={"Left Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left Start Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'start'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Left Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left Center Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'center'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Left End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Left End Example',
description: 'We have side set to <mark>left</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "left",
align: 'end'
}
}}
id={"left-start"}
client:load
/>
<CodeSample
buttonText={"Top Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top Start Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'start'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top Center Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'center'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Top End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Top End Example',
description: 'We have side set to <mark>top</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "top",
align: 'end'
}
}}
id={"top-start"}
client:load
/>
<CodeSample
buttonText={"Right Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right Start Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'start'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right Center Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'center'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Right End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Right End Example',
description: 'We have side set to <mark>right</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "right",
align: 'end'
}
}}
id={"right-start"}
client:load
/>
<CodeSample
buttonText={"Bottom Start"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom Start Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>start</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'start'
}
}}
id={"bottom-start"}
client:load
/>
<CodeSample
buttonText={"Bottom Center"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom Center Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>center</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'center'
}
}}
id={"bottom-start"}
client:load
/>
<CodeSample
buttonText={"Bottom End"}
highlight={{
element: '#sample-box',
popover: {
title: 'Bottom End Example',
description: 'We have side set to <mark>bottom</mark> and align set to <mark>end</mark>. PS, we can use HTML in the title and descriptions of popover.',
side: "bottom",
align: 'end'
}
}}
id={"right-start"}
client:load
/>
</div> |