What is the best method for showcasing a popup directly above an element?

Question

What is the best method for showcasing a popup directly above an element?

I am utilizing Svelte and Flowbite, both of which have a Popover feature.

By default, the Popover view appears above the element that triggered it. How can I make the Popover display above a different element? For example, I want to click a button at the bottom of the page and have the Popover appear at the top of the page above a text field. Essentially, I want the display location and trigger element to be different.

https://i.sstatic.net/b8khn.png

<button data-popover-target="popover-click" data-popover-trigger="click" type="button" class="...">
    <div class="...">
        <h3 class="...">Trigger Popover on Click</h3>
    </div>
    <div class="...">
        <p>Here is some engaging content. Pretty cool, right?</p>
    </div>
    <div data-popper-arrow></div>
</button>

javascript typescript tailwind-css svelte flowbite

Answer 1

Answer №1

give this a shot

<div class="..." style="position: absolute;">
    <p>Check out this fantastic material. It's incredibly captivating, isn't it?</p>
    <div data-popper-arrow></div>
</div>

Answer 2

give this a shot

<div class="..." style="position: absolute;">
    <p>Check out this fantastic material. It's incredibly captivating, isn't it?</p>
    <div data-popper-arrow></div>
</div>

Answer 3

Answer №2

If you want to trigger one button click event with another button click, you can easily achieve this using a simple technique. I have provided all the necessary comments in the code snippet below for your reference. Don't hesitate to reach out if you have any questions.

 // This script will make #source-btn trigger the click event of #destination-btn
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>
    <!-- Button that triggers the event -->
    <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>

    <!-- Element where the popover content will be displayed -->
    <div class="flex justify-center">
        <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>    
    
    <!-- Popover 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>

Answer 4

If you want to trigger one button click event with another button click, you can easily achieve this using a simple technique. I have provided all the necessary comments in the code snippet below for your reference. Don't hesitate to reach out if you have any questions.

 // This script will make #source-btn trigger the click event of #destination-btn
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>
    <!-- Button that triggers the event -->
    <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>

    <!-- Element where the popover content will be displayed -->
    <div class="flex justify-center">
        <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>    
    
    <!-- Popover 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>

Answer 5

Answer №3

Original solution using flowbite-svelte following an official response.

<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="Display Position: {placement}">
    Content being displayed here is highly stimulating. Don't you agree?
</Popover>

Answer 6

Original solution using flowbite-svelte following an official response.

<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="Display Position: {placement}">
    Content being displayed here is highly stimulating. Don't you agree?
</Popover>

Answer 7

Answer №4

To display another div, you can add a new button and then simulate a click event

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

For a demonstration, visit: https://www.codeply.com/go/bp/7oM1aoycIi

Answer 8

To display another div, you can add a new button and then simulate a click event

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

For a demonstration, visit: https://www.codeply.com/go/bp/7oM1aoycIi

What is the best method for showcasing a popup directly above an element?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Observe changes in nest handlebar partial files

Implementing a Radial Cursor with a Custom Background Image in JavaScript

How can I create an animation effect that shows and hides slides using jQuery?

What is the best way to inform TypeScript that the output of the subscribe method should be recognized as an array containing elements of type

Knockout.JS encounters difficulty retrieving the value attribute in a select tag when the data is sourced from the server

Highlight the active class on the Angular Navbar

Accessing global scope variables within callback functions in JavaScript is a common task that can be achieved in a

The event listener for onChange on my dropdown menu is not functioning as expected

Calculating a bowling score by looping through a JavaScript array

How can you access a sibling of the parent element of the current element in Jquery?

Manipulate the timing of css animations using javascript

What steps do I need to take in order to obtain the value for insertion into a form for editing, so that the record

Update the useState value whenever I input something into the input field

Cordova Application experiencing freeze on loading Splash Screen

Converting a numeric value to a string in JavaScript involves using

Dynamically uploading an HTML file using AJAX

Update the content of the page without reloading images

Binding ngModel to a method within $scope in Angular

Update the variables upon a click event following the completion of an AJAX request

jQuery iScroll: The scrolling feature does not stop when reaching the end of the content