How to display popup above element?

Question

I use svelte and flowbite that contain Popover view.

By default, popover view display above element that trigged it. How to display popover above other element? For example, I click button in the bottom of the page and popover display in the top of the page above some textfield. I mean, that display place and trigger element are different.

<button data-popover-target="popover-click" data-popover-trigger="click" type="button" class="...">
    <div class="...">
        <h3 class="...">Popover click</h3>
    </div>
    <div class="...">
        <p>And here's some amazing content. It's very engaging. Right?</p>
    </div>
    <div data-popper-arrow></div>
</button>

Check these [docs](https://flowbite.com/docs/components/popover/#example). — 0xts, Aug 04 '23 at 10:26

score 0 · Answer 1 · answered Aug 04 '23 at 10:26

0

try this one

<div class="..." style="position: relative;">
    <p>And here's some amazing content. It's very engaging. Right?</p>
    <div data-popper-arrow></div>
</div>

answered Aug 04 '23 at 10:26

Krishna Gunda

1

Emma Ngo · Answer 2 · 2023-08-09T04:53:50.927

0

You can create another button and then trigger click

$('#button').click(function(){
   $('#the_div_want_to_show').popover('toggle');
});

Example here: https://www.codeply.com/go/bp/7oM1aoycIi

edited Aug 09 '23 at 04:53

answered Aug 04 '23 at 10:52

Emma Ngo

59
7

Example: https://www.codeply.com/go/bp/7oM1aoycIi – Emma Ngo Aug 04 '23 at 10:53
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 09 '23 at 04:08

Md. Rakibul Islam · Answer 3 · 2023-08-05T09:01:25.620

You can use one button click event to trigger other button click. Using this simple technique it can be done. I have added all the necessary comments. Feel free to ask questions.

 // When you click the #source-btn it will trigger the #destination-btn click to popup the content
document.querySelector('#source-btn').addEventListener('click', function(){
    document.querySelector('#destination-btn').click();            
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.css" rel="stylesheet" />
</head>
<body>
    <!-- Your button where you will click -->
    <button type="button" id="source-btn" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Click Me</button>
    
    <!-- Other contents -->
    <div class="h-[300px] w-full bg-green-200 flex justify-center items-center">Other Content</div>

    <!-- Your target element where you want to see the popover content -->
    <div class="flex justify-center">
        <!-- Depending on your use you may need to position this button to position your popup content -->
        <button id="destination-btn" class="relative top-[5px] left-[75px]" data-popover-target="popover-click" data-popover-trigger="click"></button>
        <div class="border-double border-4 border-indigo-600 p-2">Show it above me</div>
    </div>    
    
    <!-- popup content -->
    <div data-popover id="popover-click" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
        <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
            <h3 class="font-semibold text-gray-900 dark:text-white">Popover click</h3>
        </div>
        <div class="px-3 py-2">
            <p>I am other element and still showing the popup. See?</p>
        </div>
        <div data-popper-arrow></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.0/flowbite.min.js"></script>
</body>
</html>

score 0 · Accepted Answer · answered Aug 05 '23 at 17:47

Native solution by flowbite-svelte after issue.

<script>
  import { Popover, Button } from 'flowbite-svelte'
  let placement = "";
</script>

<div id="ext-ref" class="p-2 rounded-lg border">External reference</div>
<div class="space-x-4">
<Button id="ref-1" on:mouseenter={()=> placement="left"}>Left</Button>
<Button id="ref-2" on:mouseenter={()=> placement="top"}>Top</Button>
<Button id="ref-3" on:mouseenter={()=> placement="right"}>Right</Button>
</div>
<Popover reference='#ext-ref' triggeredBy="[id^='ref-']" class="w-64 text-sm font-light " {placement} title="Placement: {placement}">
    And here's some amazing content. It's very engaging. Right?
</Popover>

How to display popup above element?

4 Answers4