Element with absolute positioning causes overflow in flot tooltip display

I am currently utilizing jQuery Flot in my application, but am encountering an issue with the tooltip positioned furthest to the right, causing it to overflow outside of the window. When hovering over the left point on the green line of the graph, everything appears fine. However, when I hover over the rightmost point on the green line, the tooltip element extends beyond the window.

https://i.sstatic.net/81CSR.png

This is the CSS for the tooltip element:

$("<div id='tooltip'></div>").css({
    position: "absolute",
    display: "none",
    border: "1px solid #222",
    padding: "2px 5px",
    "background-color": "#000",
    opacity: 0.80,
    zIndex: 999,
    color: "#fff"
}).appendTo("body");

Any suggestions on how to ensure that the last tooltip remains within the visible area?

Thank you for your assistance.

javascriptjquerycssflotabsolute

Answer №1

When dealing with points located at the right edge of the chart, it is recommended to position the tooltip on the left side of the point. Take a look at this example:

function displayTooltip(_x, _y, _contents) {
    var _cssParameters = {
        position: 'absolute',
        display: 'none',
        border: '1px solid #222',
        padding: '2px 5px',
        'background-color': '#000',
        opacity: 0.80,
        zIndex: 999,
        color: "#fff"
    };
    if (_x < 0.8 * $(window).width()) {
        _cssParameters.left = _x + 10;
    }
    else {
        _cssParameters.right = $(window).width()- _x + 3;
    }
    if (_y < 0.8 * $(window).height()) {
        _cssParameters.top = _y + 3;
    }
    else {
        _cssParameters.bottom = $(window).height()- _y + 3;
    }
    $('<div id="tooltip">' + _contents + '</div>').css(_cssParameters).appendTo('body').fadeIn(100);
}

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

Is it possible for me to utilize jquery and AJAX to invoke a cgi-bin script, and then incorporate a message event to manage Server Sent Event?

I have a cgi-bin program that runs for a long time (3-15 minutes) and I am looking to invoke it using AJAX. While the program is running, I want to receive Server Sent Event data from it and display it on my web page. It's like having a progress monit ...

javascriptjqueryajaxserver-sent-events

Enabling the use of dot or full stop in JavaScript keycode for numeric input

I am facing a challenge with a method that is supposed to allow all numeric values, including the '.' symbol. Below is the code for my method. While it successfully allows numeric values, it seems to have an issue with keyCode == 190. function I ...

javascriptjqueryhtmlcsskeycode

Vue JS - Toggle visibility of an element based on radio button selection

When selecting between true or false radio buttons, I want a block to appear when "One" is clicked and be hidden when "No" is clicked. Here is the code snippet I used: <template> <div> <div> <label >One & ...

javascriptvue.jsvuejs2boolean

An issue occurred while employing Promise.all: TypeError - the intermediate value is not iterable within the code

I am currently attempting to halt a series of SQL instances, and due to its asynchronous nature, I have implemented the use of Promise.all. However, I'm encountering an error in the code on: TypeError: (intermediate value) is not iterable at Prom ...

javascriptnode.js

The content within an iframe is inaccessible through JavaScript when the onload event occurs

My current project involves integrating a payment service provider with 3Ds, and one of the steps in the process requires following specific instructions: Upon receiving the response to your initial API request, extract an URL along with some data. Embed ...

jqueryangularjsiframe

Issue encountered while assigning a class to the confirm button, resulting in an error

I encountered an issue with the Form helper when trying to add a class to a Form->postLink. Here is what I attempted: <?php echo $this->Form->postLink( 'Delete', array('action' => 'delete', $location[&a ...

cssformscakephpcakephp-2.0

Creating a personalized progress bar that reflects real-time data from an external API

I have developed an API that sends scores if someone solves math, chemistry, or physics problems correctly. The API responds with a JSON object like this: { "scores": { "maths": 28, "chemistry": 9, "physics": 26, } } When a person complet ...

javascriptreactjs

Error: Unable to locate module: Unable to resolve '@/src/components/layout/Header'

Compilation Error Encountered issue in Next.js (version 14.2.4) while trying to locate '@/src/components/layout/Header' at ./src/app/layout.js:3:1 Suddenly, 2 days ago the code was functioning properly but now it's throwing this error. Er ...

javascriptreactjsvisual-studio-codenext.jserror-handling

Challenge encountered when trying to store AngularJS response in a global variable

When making an HTTP call to the controller using angular.js, I am trying to save the response in a global variable like so: app.controller('dashBoardController', ['$scope', '$http', '$location', function ($scope ...

javascriptjqueryangularjshtml

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

javascripthtmlcssclient-sidestatic-html

Are JavaScript closures supposed to prevent the array from being editable through getArray()?

Primary objective: Allow arr information retrieval exclusively through the getArray method. Secondary objective: Enable arr data modification solely through the addToArray method. function TestObj(){ var arr = []; var b = 3; this.getArray = funct ...

javascriptarraysclosuresinstantiation

Have the getter functions for reactive objects in Vue 3 been transformed into computed values?

Is the memoization of bookCount in this instance handled equivalently to a computed reference? const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - ...

javascriptvue.jsvuejs3

When trying to make a POST request, the browser displayed an error message stating "net::ERR_CONNECTION

Currently, my project involves coding with React.js on the client side and Express.js on the server side. I have encountered an issue when attempting to use the POST method to transmit data from the client to the server for storage in a JSON file. The erro ...

javascriptreactjsexpress

What is the best way to use a CSS selector to target multiple divs such as block-11, block-12, and so

Here are several block IDs I have: <div id="block-11">content Here</div> <div id="block-12">content Here</div> <div id="block-13">content Here</div> <div id="block-14">conten ...

htmlcss

I attempted to position two input blocks side by side, but they are being displayed one on top of

//I have encountered an issue with the HTML code I am using. I am trying to create input buttons in a horizontal layout, but they are not displaying correctly. <div class="form-row"> <div class="form-group col-md-5"> ...

htmlcssbootstrap-4

Encountering unresolved JSX elements while utilizing input field

import React from 'react'; class AjaxIO extends React.Component { constructor(props) { super(props); this.state = { count: "1" } } render() { return ( <div> {this.state.count} </div> ...

javascriptreactjs

Encountering an issue of THREE.EventDispatcher being undefined while trying to create a THREE.OrbitControls instance using THREE.js, THREE.OrbitControls, and TypeScript

Attempting to delve into typescript alongside three.js, I've encountered a perplexing error that has me stumped. The root of the issue lies within the init function where I initialize a new THREE.OrbitControls controller. Utilizing the setup provided ...

javascripttypescriptthree.jswebpack

What is the best way to conceal overflowing text with ellipsis by utilizing dynamic Bootstrap columns?

I'm having trouble aligning a text alongside an icon within a card. The card is enclosed in the Bootstrap "col" class, which dynamically adjusts its size based on the number of items in a row. When there isn't enough space, the text wraps and ap ...

htmlcsstwitter-bootstrapbootstrap-4

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

Issues encountered when updating MySql Database from WordPress with Error 500, whereas the code functions properly when used outside of WordPress environment

Question: How can I update a MySQL database from within a JavaScript function on a WordPress WooCommerce page using Ajax? I have a working code snippet for updating the database, but when I integrate it into my WordPress page, I encounter a 500 error. To ...

javascriptphpmysqlajaxwordpress