Show a substantial amount of text when the cursor hovers over

I have incorporated a pop-up tooltip from the following link:

This feature enables a message to appear whenever I mouse-over a [?] sign.

The script is structured as follows:

<a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a>

Within this structure, I am required to input the text that will be displayed in the popup within the showhint function.

However, I encounter an issue when trying to display a large amount of text (equivalent to half a page of a Word document) with line breaks between paragraphs.

When I attempt to include this chunk of text within the first parameter of the showhint function, it does not work as intended.

Could anyone advise me on how to configure the tooltip to exhibit my lengthy message appropriately with necessary line breaks?

Thank you!

asp.nethtmlcsstooltipmouseover

Answer №1

Your current implementation of the "Show Hint" script appears to be capable of processing HTML tags such as inside, enabling you to format your text within a paragraph.

<a href="#" class="hintanchor" onMouseover="showhint('<p>Please choose a username.</p><p>Should consist of alphanumeric characters only.</p>', this, event, '150px')">[?]</a>

Answer №2

Feel free to include HTML tags within the showhint text itself, just like in the example shown below. It's a great feature!

<a href="#" class="hintanchor" onmouseover="showhint('<b>Don't forget to complete all required fields!</b> &lt;p&gt;Make sure to double-check your information before submitting.&lt;/p&gt;', this, event, '200px')">[?]</a>

Answer №3

One suggestion is to experiment with different characters like \n, \n\r, <br>, or <br/> to create line breaks in your content. This technique has been useful for me before.

Answer №4

Typically, hover-help is not intended for that specific purpose. It may be more beneficial to utilize showhint in order to present a brief preview and a link to access additional content such as a sidebar where standard HTML can be displayed. This sidebar could remain visible while the user interacts with the interface.

The documentation confirms that HTML is accepted, so have you experimented with inserting text like:

<html>line-1<br/>line-2</html>

Answer №5

Have you attempted using <br> for line breaks? (without spaces)

For example:

<a href="#" class="hintanchor" onMouseover="showhint('Please select a username. <br> It should only contain alphanumeric characters.', this, event, '150px')">[?]</a>

Answer №6

To ensure text wrapping in your popup CSS, make sure to include the following code:

     <div id='row' style='word-wrap:break-word;'>

This will automatically wrap the text as needed.

    #hintbox{ 
     /*CSS for pop up hint box */ 
    position:absolute; top: 0; 
    background-color:lightyellow; width: 150px;
    /*Default width of hint.*/ 
    padding: 3px; border:1px solid black;  
    font:normal 11px Verdana; 
    line-height:18px; 
    z-index:100; 
    border-right: 
    3px solid black; 
    border-bottom: 
    3px solid black; 
    visibility: hidden; 
    Word-wrap:break-word;

}

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

Tips for clearing a text box on an AngularJS page when clicking a link within the page

On my HTML page, I have a search box and various category links. When a user enters text in the search box, I want to display: p in Products | filter {searchedText} If a user clicks on a category link, I want to display: p in Products | filter {categor ...

htmlangularjs

An HTML attribute with a blank value will not display the equals sign operator

jQuery can be used like this: $select.append('<option value="">All</option>'); This code appears to insert the element in HTML as follows: <option value>All</option> However, what is intended is to append the elemen ...

javascriptjqueryhtml

What steps can I take to add a horizontal scroll bar and view the entirety of my image?

<img src="the fake.png" width="3268" height="538" class="table" alt=""/> I have a large image that is getting cut off on the page. I need to add a horizontal scrollbar so I can view the entire image ...

phphtmlcssweb

Forwarding the main webpage from the child Html.renderAction without the need for Ajax, Java, Jquery, or similar technologies

Having an issue with a form in Html.RenderAction where after submitting the form, I need to reload the parent but keep running into the error message "Child actions can not perform redirect actions." Any suggestions on how to resolve this without using Aja ...

c#htmlasp.net-mvc

Challenges encountered when redirecting users with a combination of javascript and php

I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...

javascriptphpjqueryhtmlforms

PHP for creating dynamic website search capabilities

As a beginner, I am working on developing an agriculture application to enhance my skills and take on a more advanced project. However, I am facing difficulties in implementing search functionality within the application. Here's what I have: - 4 sele ...

phphtmlsearchmysqli

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

javascriptcssmapshere-api

jQuery divs seem to "gaze up" towards the mouse pointer

I am attempting to recreate a fascinating effect using jQuery - where "cards" move in response to the mouse cursor as if they are looking up at it. I have come across a script that almost achieves what I need, but I require the ability to control the mov ...

javascriptjquerycss

Applying position: absolute in HTML/CSS to lock parent and child elements in

Transform the boxes into concentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px. html: <div id="p10"> <div id ...

htmlcsspositioncss-positionabsolute

Vue application experiencing issues with applying Sweet Alert CSS styles

I successfully integrated vue-sweetalert2 into my Vue app (version 2.6). The setup in my main.js file looks like this: import VueSweetalert2 from 'vue-sweetalert2'; Vue.use(VueSweetalert2); In one of my components, I have a basic button with a ...

cssvue.jssweetalert2

What is the best way to change the color behind the SVG to black?

I'm having some trouble creating a signup form with SVG logos. The colors seem to clash and no matter what I do, the color doesn't change from white. My goal is to have the actual SVG logo remain white while the background behind it is black. He ...

htmlcsssvgfrontendbootstrap-5

What is the best way to have text fit perfectly into a table cell?

In my asp.net table, the first column contains captions for each row of data. The length of these captions varies, with different amounts of words in each one. I am looking to align the first letters of each caption at the beginning edge of the cells (left ...

htmlcssasp.net

Tips for successfully transferring an image through an XMLHttpRequest

I found this helpful resource at: I decided to test out the second block of code. When I made changes in the handleForm function, it looked like this: function handleForm(e) { e.preventDefault(); var data = new FormData(); f ...

javascriptphpjqueryhtmlcss

What is the best way to modify URLs in ASP.NET?

Is there a way to programmatically conceal the inner workings of my URL? I am aware of using: Server.Transfer("url",boolean) However, this method does not suit my current needs. I am looking for a way to modify the URL after retrieving the nec ...

c#.netasp.net

Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...

htmlcssreactjsbootstrap-4flexbox

Problem with the visibility of the drop-down menu when hovering over it

I am currently developing a ReactJS application using reactstrap. One of the components I have created is a dropdown with submenus nested inside. My goal is to make the submenus appear when hovering over the dropdown, and if there are multiple dropdowns ( ...

cssreactjstwitter-bootstrapreactstrapmegamenu

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

Has the submit button become inactive once it has been inserted into a collapse?

I have recently implemented a collapse feature and inserted a form into it, but unfortunately, the submit buttons are not functioning properly. They are failing to send the data to the PHP file. <div class="container"> <div class= ...

jqueryhtmltwitter-bootstrap

Unable to retrieve input values from the text fields using JavaScript

In my project, I have created two PHP pages - "doc.php" and "chkval.php". The issue I am facing is that the textfield values are not being captured in the "chkval.php" page using $POST method. An error that I encountered is: Use of undefined constant re ...

phpjavascriptmysqlhtmltextfield

Displaying data from a PHP form

I'm working on a table that is populated with data from my controller. The issue I am facing is that only the first record, in this case Sephen C. Cox, does not redirect me when I click the "add employee" button. For all other records, the button work ...

phphtml