Discover the hidden content within a div by hovering over it

Here is an example of a div:

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

If you hover the cursor on this div, would it be possible to show all its content in a bubble or something similar without using JavaScript?

javascriptjqueryhtmlcss

Answer №1

Absolutely, you can achieve this by utilizing the hover property. Simply transfer your inline style to a class. Check out this example for more clarity:

http://jsfiddle.net/buC6t/

.exdiv {
    width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 
}
.exdiv:hover {
    overflow:visible;
}

<div class="exdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

Answer №2

For a simple, CSS- and JavaScript-free solution, you can utilize tooltips:

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. ">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. 
</div>

Hovering over this div will reveal text in the tooltip. You can leave the initial title empty and use JavaScript to populate it dynamically like so:

myDivObj.title = myDivObj.innerHTML;

Answer №3

If you desire a bubble effect without using JavaScript to avoid duplicated content, it is still achievable: http://jsfiddle.net/7e4hC/

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris... 
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris...</span></div>

.test span {
    display: none;
}
.test:hover span {
    display: block;
    width: 500px;
    background-color: #ddd;
    overflow: visible;
    white-space: normal;
}

Another option for a cleaner approach:

<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris...</div>

.test:hover {
    display: block;
    background-color: #ddd;
    overflow: visible;
    white-space: normal !important;
}

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 there a way to automatically dismiss a notify.js notification?

I am currently attempting to forcefully close an opened notification by clicking a button, following the instructions provided in the advanced example of the notify.js API. Can someone please explain how this can be accomplished? function CLOSE() { $( ...

javascriptjquerynotifyjs

Unable to match the height of the inner card image in bootstrap with the height of the outer card image

I'm facing an issue with two bootstrap cards, one nested inside the other, both containing images. Check out the StackBlitz here The inner image doesn't flex to the same height as the outer one, resulting in a small space between the two cards ...

htmlcsstwitter-bootstrap

Neglecting to review the CSS - embracing ejs layouts in Express

I am encountering an issue with the express ejs layouts where only the mainPage is able to read the CSS, while the other pages are unable to do so (even though the HTML reads it). Additionally, if I want to use another layout such as "layout2.ejs", what s ...

javascripthtmlcssnode.jsexpress

I have a collection of dictionaries that I need to integrate into a Django application. What is the best approach for doing this?

My data structure consists of an array of dictionaries: [{'name': 'X','class':'A'},{'name':'Y','class':'B'}] I need the HTML to display as follows: Name:X, Class:A Name:Y, C ...

pythonhtmldjango

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

phphtml

I'm looking to customize and expand the functionality of the IFormFile Interface in .NET Core. Specifically, I need to find a way to include additional data to the serialized array whenever an

I am in need of assistance with uploading a file using .net core. Currently, I am utilizing a multipart form and AJAX for this purpose. However, my requirement is slightly unique. I must be able to include additional data in the serialized array before b ...

jqueryasp.netajaxasp.net-coremodel-binding

Table design with fixed left columns and header that adjust to different screen sizes

After reading various articles on this issue, I have been unable to find a solution. Most of the examples I've come across feature tables with a single row for the header and rows that consist of just one row, similar to a calendar. My table, on the o ...

htmlhtml-tableresponsive

Experiencing a problem with Datatables where all columns are being grouped together in a single row

After creating a table with one row using colspan and adding my data to the next row, I encountered an issue with the datatables library. An error message appeared in the console: Uncaught TypeError: Cannot set property '_DT_CellIndex' of unde ...

javascriptjqueryhtmldatatables

Generating variables dynamically within a React Native component

In my React Native component, I need to create a variable that will be used multiple times. Each instance of this component should have a different variable name for reference. <View ref={view => { shapeView = view; }} onLayout={({ nativeE ...

javascriptreact-native

Conceal the scrollbar on the body to enhance user experience without compromising the ability to navigate the page using jQuery scrollTo

Seems like a bad idea in terms of UX, but let's give it a try. I'm experimenting with jQuery scrollTo to navigate through absolutely positioned div sections. My goal is to disable the scrollbars so that the user can only move between sections us ...

jqueryscrolloverflowscrollto

Tips for showcasing an uploaded image with ajax

I am looking to upload an image and display it without having to reload the page. I believe this can be achieved using Ajax form submission. However, I have tried some code but the Ajax form submit function does not seem to be working for me. Can someone p ...

javascriptphpjqueryhtmlajax

Tips on utilizing a function that was generated within the constructor

I'm currently in the process of developing a function within the constructor, and it is essential that this function be placed inside the constructor. I am interested in implementing a button to trigger this function from an external source, but unfor ...

javascriptangulartypescriptfunctionionic-framework

Can anyone tell me what js stands for?

I stumbled upon this snippet of code and am curious about what it does. Is it some sort of array? test = {a: [1,0,0], b:[0,1,0], c:[0,0,1]}; If I wanted to access the array for A specifically, how would I do that? console.log(bases[a]); This results in ...

javascriptarrays

Using React to create multiple modals and dynamically passing props

Each item in my list (ProjectActivityList) has an Edit button which, when clicked, should open a modal for editing that specific item. The modal requires an ID to identify the item being edited. var ProjectActivities = React.createClass({ onEditItem: ...

javascriptreactjssemantic-ui

Authenticating the identity of the client application - the client is currently within the browser

I have a PHP backend (although it's not really important) and a Javascript client that runs in the browser. Here is how the application operates: The user accesses a URL and receives raw templates for rendering data An Ajax GET query is sent to the ...

javascriptphpajaxsecurity

The fixed navigation bar is obscured by the address bar in Chrome mobile

After starting a new project, I encountered an issue with my fixed navbar while testing it on Chrome on mobile iOS. Initially, I believed it to be a browser bug, but after reviewing previous projects, I realized that they functioned properly with the fixed ...

htmlgoogle-chromemobilescrollcss-position

issue with splice function

I have a JavaScript function that is supposed to collect all input values from text boxes and store them in an array. However, I want to remove any input value with the type "button" from the array before proceeding. Here is the code snippet: <!-- lang ...

javascripthtml

Display the div only during the printing process

Imagine I have a situation where there is a block of content that I only want to show when printing. It looks something like this: <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div&g ...

javascripthtmlcss

Managing JSON Forms using jQuery on Google's App Engine

Having difficulty getting jQuery to function properly on GAE in python 2.7. The main issue is that jQuery is unable to retrieve the json data sent by the server. A basic comment form with no special features: <form action="/postcomment/" method="post" ...

javascriptjquerypythonjsongoogle-app-engine

When the mouse leaves the area, I would like the iframe within the div to be refreshed

When you hover over the button on the right, a slide panel appears with an iframe. Each time this page loads, it has a different background. I want a new background to load every time there is a new hover, requiring a refresh of the div. How can I achieve ...

jqueryhtmlcssiframe