How to center a big Popover using Twitter Bootstrap for maximum screen coverage

Imagine having a Bootstrap Popover on your website set up like this:

HTML:

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" 
data-content="Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here. Insert the very large instructions to a game that participants need a reminder on how to play here.">
</button>

SCRIPTS:

$(function () {
    $('[data-toggle="popover"]').popover()
})

However, with such lengthy content in the Popover, is there a way to center it on the screen and resize it to take up 75% of the total area? If a Popover isn't ideal for this situation, any suggestions for better components would be greatly appreciated.

javascripthtmljquerycsstwitter-bootstrap

Answer №1

In my opinion, the most suitable option for this scenario would be utilizing a Bootstrap Modal

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Modal example</title>
  </head>
  <body>



   <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to switch out the background image using jQuery

I am currently using jQuery to dynamically change the background image of a web page. Right now, I have implemented two separate buttons that toggle between Image A and Image B. By default, Image A is displayed on the page. My goal is to enhance this func ...

javascriptjqueryhtmlcss

Various image resolutions designed for extra small, small, medium, and large screens

My image has a relative width and currently the src points to a single, large file (approximately 1000px). The issue arises on small devices with Opera and IE where the browser scaling results in pixelated images. Conversely, using a smaller image leads to ...

htmlcssimage

Managing error responses while fetching a blob through AJAX

Is it possible to execute an AJAX call that has the potential to return either a blob or a text string based on the server's response? My current task involves using AJAX to transform a user-provided video into an audio blob that can be utilized with ...

javascriptajax

Adding 2-dimensional text to a specified location with the help of three.js

let startPosition = new THREE.Vector3(-5,0,0); let targetPosition = new THREE.Vector3(-5,2,0); let directionVector = new THREE.Vector3().sub(targetPos,startPosition); let arrowHelper = newTHREE.ArrowHelper(directionVector.clone().normalize(),startPosition, ...

javascriptthree.js

Having trouble getting the pull-right or float-right classes to work properly in Bootstrap 4?

Is there a way to update bootstrap-tabdrop.js to work with Bootstrap 4? Check out the Demo I tried changing pull-right to float-right but it didn't solve the issue :( Any assistance would be greatly appreciated. ...

javascriptjquerytwitter-bootstrapbootstrap-4

Asynchronous processing of a list in Node.js

I've been working on a feature that involves fetching data for symbols stored in an array. Take a look at my code snippet below. While iterating through the array using a for loop, I noticed that all the processing in my code seems to be focused only ...

javascriptarraysnode.jsasynchronous

Limit the size of images in Summernote rich text editor to a specific height and width

When I upload an image in the editor, I am able to determine its size. However, I want to restrict its height and width to be below a certain limit. Below is the result that is displayed when I upload an image: Check out the uploaded image The current si ...

javascriptreactjsfile-uploadrich-text-editorsummernote

Is there a way to merge all this data into a single Object?

This particular situation is quite complex. Let's consider the following scenario: I have two JavaScript objects that are fetched via REST calls, using two different callbacks. So, we have: call1() - POST method - parsed JSON to JavaScript object, ...

javascriptjqueryjsonnode.js

What is the process for developing a personalized search feature in VueJS?

How can I create a custom search function in VueJS that allows me to input partial product names and receive relevant results? For example, I have 2 products named PlayStation Plus 90 Days IE and PlayStation Plus 90 Days NO. Currently, I have to input the ...

javascriptvue.jsvuejs2vue-component

Traversing a hierarchical structure and building a REACT user interface based on it

Currently, I am tasked with a project that involves working with a hierarchy tree. The goal is to loop through the data provided by the tree and create a user-friendly UI representation of the hierarchy for seamless navigation. Here's an illustration ...

javascriptreactjshierarchy

Tips for showcasing the complete image within v-parallax

For my project, I decided to go with vuetify as the frontend framework. It's a great choice! Now, I have a question about v-parallax - how can I make it display the full image without cropping? Below is some code snippet, and you can find the full cod ...

cssvue.jsvuetify.js

How to retrieve the chosen option from dropdown list using jQuery dialog

Having some trouble with a jQuery dialog in ASP.NET. I'm attempting to retrieve the selected value from a dropdownlist that is displayed within the jQuery dialog. The process involves the user clicking a button to open the dialog, selecting an item fr ...

jqueryasp.netmodal-dialog

Achieving perfect alignment of two images within a block and maintaining their center position even when resizing

While working within a Wordpress post, my goal is to insert two images side by side with the block of images centered, one aligned left and the other aligned right (which I have achieved). As the page size decreases, I want the images to stack on top of e ...

htmlcsswordpress

Assign AngularJS directives to DOM element using controller

I'm experimenting with the idea of controlling the angular directive('ng-show') from the controller. Here is what I'm attempting to do: var node = `<div ng-show="this.length > 5">...</div>`; var child = document.creat ...

javascriptangularjs

Execute functions during jquery's .animate() operation

This is a snippet of code I use to smoothly scroll the browser back to the top: $('html, body').animate({scrollTop: 0}, 500, "easeOutQuart"); Now, I am looking for a way to prevent the user from scrolling while this animation is running. Once t ...

javascriptjqueryhtml

Tips for aligning the text of a button and placeholder vertically

I am facing an issue with centering placeholder/input text and button text vertically on my website. I used Bootstrap to create the site and utilized its input and button classes, but I couldn't figure out how to achieve vertical alignment. I tried ad ...

htmlcssbutton

A guide to integrating ffmpeg with NuxtJS

I am completely new to Nuxt and currently in the process of migrating a Vue application that generates gifs using ffmpeg.wasm over to Nuxt.js. However, every time I try to access the page, the server crashes with the following error message: [fferr] reques ...

javascriptnode.jsvue.jsnuxt.js

Retrieve a single node from an XML file using jQuery AJAX and embed it in an HTML file

I am working with an xml file that contains information about average wait times. My goal is to read this file using jquery and ajax or explore other technologies for a better solution. After retrieving the data from the specified node, I will need to tran ...

jqueryxmlajax

What is the best way to ensure jQuery loads before CSS code on a website

I am currently working on a blog project that allows visitors to customize the background color by simply clicking on one of five available buttons. $(function(){ //Checking if a color scheme has already been selected var chosenColor = ...

javascriptjqueryhtmlcss

Stylish hover effects displayed on disabled button using Styled Components

I am currently working on a button using Styled Components. However, even when the button is in a disabled state (:disabled), it still exhibits hover behavior that should not be present. I am wondering if there is a proper way to prevent hover effects when ...

javascriptreactjsstyled-components