Is there a way to show the text within a div tag in a tooltip without relying on jQuery?

Question

Is there a way to show the text within a div tag in a tooltip without relying on jQuery?

Is there a way to display the text content of an HTML element inside a tooltip? I am struggling to achieve this, as I would like to have the word test appear in the tooltip, but it's not working.

Unfortunately, we are not using jQuery in our code base, so I can't rely on any jQuery plugins. However, we do write JavaScript code as needed. Here is my current setup:

The HTML div looks like this:

<div class="tooltip message">test</div>

Here is the CSS setup:

.tooltip {
    display: inline;
    position: relative;
}
.tooltip.message:before {
    background: #333;
    background: rgba(0, 0, 0, .8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    box-sizing: border-box;
}
.tooltip.message:after {
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Here is the link to my fiddle: http://jsfiddle.net/7LNJc/3/

javascript html css tooltip

Answer 1

Answer №1

Add an id to your class='tooltip message', for example:

<div class='tooltip message' id='test'>test</div>

Take a look at the following:

var doc = document;
function E(e){
  return doc.getElementById(e);
}

Now using E('test') is equivalent to document.getElementById('id'), so you won't need it anymore;

var test = E('test').innerHTML; // stores the html

If the Element has a value attribute, like an input, you would use:

var test = E('test').value; // stores the value of the html attribute

To update the innerHTML or value, you can do the following:

var test = E('test');
test.innerHTML = 'some text';

or

test.value = 'some value';

You can even simplify it to:

E('test').innerHTML = 'some text';

Answer 2

Add an id to your class='tooltip message', for example:

<div class='tooltip message' id='test'>test</div>

Take a look at the following:

var doc = document;
function E(e){
  return doc.getElementById(e);
}

Now using E('test') is equivalent to document.getElementById('id'), so you won't need it anymore;

var test = E('test').innerHTML; // stores the html

If the Element has a value attribute, like an input, you would use:

var test = E('test').value; // stores the value of the html attribute

To update the innerHTML or value, you can do the following:

var test = E('test');
test.innerHTML = 'some text';

or

test.value = 'some value';

You can even simplify it to:

E('test').innerHTML = 'some text';

Answer 3

Answer №2

Experiment with using the CSS :hover selector on a div element instead of relying on the tooltip specified by the title attribute. This can provide a visually appealing tooltip effect.

div.tooltip {
  color: #ffffff;
}

div.tooltip:hover {
  border: 1px solid #000000;
  background-color: yellow;
  color: #000000;
}

Answer 4

Experiment with using the CSS :hover selector on a div element instead of relying on the tooltip specified by the title attribute. This can provide a visually appealing tooltip effect.

div.tooltip {
  color: #ffffff;
}

div.tooltip:hover {
  border: 1px solid #000000;
  background-color: yellow;
  color: #000000;
}

Answer 5

Answer №3

Are you looking for a custom tooltip feature, or are you satisfied with the standard tooltip available in HTML? If the custom tooltip is not a requirement, you can simply use the title attribute to display a tooltip without the need for any JavaScript:

<div class="tooltip example" title="hello">hello</div>

Answer 6

Are you looking for a custom tooltip feature, or are you satisfied with the standard tooltip available in HTML? If the custom tooltip is not a requirement, you can simply use the title attribute to display a tooltip without the need for any JavaScript:

<div class="tooltip example" title="hello">hello</div>

Is there a way to show the text within a div tag in a tooltip without relying on jQuery?

Answer №1

Answer №2

Answer №3

Similar questions

Determine if a mobile application has been installed using Vue.js

Aligning elements next to each other in html / css without using any top margins

Tips for maintaining alignment of components within an Angular Material tab:

discovering the nearest preceding sibling that includes the class .myClass

Despite utilizing the here() package, Pandoc is unable to locate the image path referenced in an external HTML file that has been imported into R Markdown

I am currently facing an issue with retrieving the class value that is being generated by PHP code

When there is an absence of data, the jQuery datatable mysteriously van

Encountered an error: Incorrect decomposition attempt on a non-iterable object

The element does not have the 'ariaHidden' attribute present

Mysterious error arises in Internet Explorer versions 7 and 8: An expected colon is missing

How can I transform an HTML div into a video file like MP4 using Python and Django?

Getting the WatchPosition update just one time

Tips for creating multiple row tabs in Material UI Tabs

Show the ajax response on a separate page

"Encountering a problem with a missing object in jQuery when referencing

Tips for programmatically choosing dropdown menus in Angular 5

How can I ensure that the state is only updated after the map function has finished executing in React?

The 'getGridMerchantLocationData' function contains duplicate definitions for both DataSource and DataSourceID. Please remove one of the definitions

Organizing your project with VueJS, VuelidateJS, and NodeJS/Express for optimal structure

Guide on setting up create-next-app with version 12 instead of the latest version 13