The issue of the tooltip or title not showing for cell with more than 2000 characters in jqgrid

I've been attempting to implement a tooltip or title with 2000 characters for a cell within a table that contains an image. I've tried various approaches but haven't been successful in finding a solution. Can someone please assist me? Here is my code snippet for the column:

    {
    name: 'comments',
    index: 'comments',
    width: 80,
    align: 'center',
    resizable: true,
    sortable: false,
    editable: false,
    cellattr: function(rowId, val, rawObject) {
        return 'title="' + val + '"'
    },
    formatter: function(cellvalue, options, rowobject) {
        if (cellvalue.length <= 0) {
            return cellvalue;
        } else {
            var image = "<img src='/images/comment.png' />";
            return image;
        }
    }
},

For my second attempt at the code,

{
    name: 'comments',
    index: 'comments',
    width: 80,
    align: 'center',
    resizable: true,
    sortable: false,
    editable: false,
    formatter: function(cellvalue, options, rowobject) {
        if (cellvalue.length <= 0) {
            return cellvalue;
        } else {
            var image = "<img src='/images/comment.png' title='Comments:\n" + cellvalue + "'/>";
            return image;
        }
    }
},

Despite the above code, I still couldn't get the tooltip to display when there are 2000 characters.

I also experimented with the following code:

var image = '<figure><img src='/images/comment.png' title='Comments:\n"+cellvalue+"'/></figure>';

However, this approach is causing the tooltip to load very slowly. Any assistance would be greatly appreciated.

javascriptjqgridtooltipcelltitle

Answer №1

1) Avoid using a title that is 2000 characters long as it may be truncated by browsers like Firefox, causing slow performance.

Consider using the following code:

<figure><img src='/images/comment.png' id='img'/></figure>

var x = '1234567890';
var y = '';

for (var j=0;j<200;j++)
y+=x;

var i = document.getElementById('img');
i.title = y;

Check out the live demo: https://jsfiddle.net/hbofay8g/

2) Consider using a hover popup instead, as described in the following link:

Using a hover popup will give you more control over the style, including color, scrolls, and size.

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

Utilizing server-side cookies in next.js and nest.js for efficient data storage

I have been working on a small application using Next.js and Nest.js. One of the functionalities I implemented is a /login call in my client, which expects an HttpOnly Cookie from the server in response. Upon receiving a successful response, the user shoul ...

javascriptauthenticationnext.jscookiesnest

Reactjs throwing an Unsupported Media Type error with code 415

I am currently working on implementing a delete function to remove banner images. Here is the code snippet for my delete function: const [del, setDel] = useState([]); const DeleteBanner = async (banner) => { setDel(banner); ...

javascriptreactjsreact-hooksaxios

Issue with the positioning of bootstrap popover after content is added

Having trouble writing a function that adds a textarea to the bottom of a popover content when clicking on a button. The issue is that once the textarea is displayed, the popover extends downward and obscures the text. I'm looking for a solution where ...

javascriptjqueryhtmlcsstwitter-bootstrap

what is the process for configuring a Universal link using javascript?

I have taken all the necessary steps to utilize a universal link. I created an AASA file, verified it using aasa-validator, and configured it in XCODE as required. Now, I am facing the challenge of setting up a hyperlink on my webpage that can redirect us ...

javascriptiosdeep-linkingios-universal-links

Calling Node Express request inside a GET route

I am currently utilizing nodejs as an intermediary layer between my public website and an internal server within our network. Through the use of express.js, I have created a basic REST api where the endpoint should trigger a request call to a webservice a ...

javascriptnode.jsexpress

Show that a CPU-intensive JavaScript function is executing (animated GIF spinners do not spin)

Displaying animated indicator or spinner gifs, then hiding them, is an effective way to communicate to the user that their action is being processed. This helps to assure the user that something is happening while they wait for the action to complete, espe ...

javascriptcsscss-transitionsanimated-gifactivity-indicator

Guidelines for converting a number into an array of strings using JavaScript

Task: Write a function that takes a number and returns an array of strings, each element being the number cut off at each digit. Examples: For 420, the function should return ["4", "42", "420"]; For 2017, the function should return ["2", "20", "201", "2017 ...

javascriptarraysstringnumberspush

Creating a regular expression variable in Mongoose: A step-by-step guide

I am looking for a solution to incorporate a variable pattern in mongoose: router.get('/search/:name', async(req, res) => { name = req.params.name; const products = await Product.find({ name: /.*name*/i }).limit(10); res.send(prod ...

javascriptmongodbexpressmongoose

Adding more dynamic parameters to the external script in index.html using Vue.js

I am looking to pass username and userEmail from the getters/user method in Vuejs, which is within index.html. Here is an example of how I would like it to be passed: <script>window.appSettings={app_id:"appId", contact_name: "Alexander ...

javascriptvue.jsvuejs2vue-component

The component encounters a transformation in which prop values shift to undefined

My component seems to be encountering some instability. The value assigned to "this.state.list" from this.props is being immediately set to "undefined". I'm struggling to comprehend why this is happening. Can anyone spot the issue in the code? this.s ...

javascriptreactjsreact-native

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

javascriptjqueryhtmlcss

What is the best way to populate a text field in AngularJS with multiple selected values?

Seeking assistance with a dynamic text field value that changes based on an AngularJS post request. I am looking to modify this value through multiple selected options. Here is the HTML code: <tr ng-repeat="opt in myData"> <td> & ...

javascriptjqueryangularjs

I have encountered an issue where after declaring a JavaScript variable on a specific page, including the JavaScript file does not grant access to it

<script type="text/javascript"> $(document).ready(function () { var SOME_ID= 234; }); </script> <script type="text/javascript" src="<%= HtmlExtension.ScriptFile("~/somefile.js") %>"></script> ...

javascriptjquery

Switch up the Thumbnail Image based on the selected category

While testing a shopping site I created, I encountered an issue with changing the banners at the top of the page based on the category the user is viewing. This site is hosted on a server on my localhost, not using wordpress by the way. <div class=" ...

javascriptphphtmljquerycss

AngularJS and Karma: Revoking ng-dirty status using setPristine

I'm currently facing an issue in one of my unit tests where I am testing the removal of ng-dirty when using setPristine on an input element. Even after calling setPristine, the ng-dirty is not being removed. My suspicion is that I may be incorrectly ...

javascriptangularjskarma-runner

Vue JS ensures that it has all the necessary data before proceeding with the

I've been grappling with a VueJS data rendering issue for a few weeks now. My approach involves making axios calls, some nested within others. The problem I'm facing is that the data renders before the calls have completed, resulting in an empty ...

javascriptvue.jsvuejs2async-await

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

javascriptreactjsmaterial-ui

When the 'Show More' button is clicked, one Div will smoothly slide over another Div

I've been struggling for hours to find a way to make one DIV slide over another DIV below it instead of pushing it down. The setup is quite straightforward. I have a script that reveals more text when the 'Show More' button is clicked. Desp ...

javascriptjqueryhtmlcss

How to extract data from URLs in Angular

Looking into how to extract a specific value from the URL within Angular for parsing purposes. For example: http://localhost:1337/doc-home/#/tips/5?paginatePage=1 The goal is to retrieve the value "5". HTML snippet: <a href="#/tips/comments/{{ tip ...

javascriptangularjsangularjs-ng-route

Versatile route able to handle any request thrown its way

My Node.js app is up and running smoothly using the Express.js framework. All routes in my application are set to post routes, such as: app.post('/login', function(req, res){ //perform login validation }); app.post('/AppHomepage', fun ...

javascriptnode.jsexpressroutes