What is the best way to show the title when a user hovers over a word?

Question

What is the best way to show the title when a user hovers over a word?

Below is an illustration of the code:

<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

How can I configure it so that when a user hovers over canine, equine, or allopolyploid, the title I designated using dfn title is shown to the user, providing the definitions of those complex words?

html css tooltip title

Answer 1

Answer №1

Utilize the title as content for the :after pseudo-element and showcase it as a tooltip!

p {
  margin: 60px auto;
}
dfn {
  position: relative;
}
dfn:hover:after {
  content: attr(title);
  background: #fff;
  padding: 5px 12px;
  border: solid 1px #ddd;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

Answer 2

Utilize the title as content for the :after pseudo-element and showcase it as a tooltip!

p {
  margin: 60px auto;
}
dfn {
  position: relative;
}
dfn:hover:after {
  content: attr(title);
  background: #fff;
  padding: 5px 12px;
  border: solid 1px #ddd;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

<p>Bob's <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

Answer 3

Answer №2

Opt for using the data-title attribute instead of title and apply styling to it.

You can enhance the styling using css.

If you stick to using only title, you may not be able to eliminate the default title tooltip.

dfn {
  border-bottom: 1px dotted black;
  position: relative;
}
dfn[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

<p>Bob's <dfn data-title="Dog">canine</dfn> mother and <dfn data-title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn data-title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

Answer 4

Opt for using the data-title attribute instead of title and apply styling to it.

You can enhance the styling using css.

If you stick to using only title, you may not be able to eliminate the default title tooltip.

dfn {
  border-bottom: 1px dotted black;
  position: relative;
}
dfn[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

<p>Bob's <dfn data-title="Dog">canine</dfn> mother and <dfn data-title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn data-title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>

Answer 5

Answer №3

Everything is already set up the way you desire.

<span title="When I hover over this text, something special happens">This particular text is meant to trigger a special effect on mouseover</span>

When you hover over the text, the title will be displayed.

If you prefer, you have the option to utilize https://jqueryui.com/tooltip/. Don't forget to add jQueryUI to your project.

<script type="text/javascript>
   $(document).ready(function(){
   $(this).tooltip();
});
</script>

Another option is to incorporate bootstrap by visiting http://getbootstrap.com/javascript/#tooltips.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hey, There's Some Important Info Here">Greetings...</button>

Answer 6

Everything is already set up the way you desire.

<span title="When I hover over this text, something special happens">This particular text is meant to trigger a special effect on mouseover</span>

When you hover over the text, the title will be displayed.

If you prefer, you have the option to utilize https://jqueryui.com/tooltip/. Don't forget to add jQueryUI to your project.

<script type="text/javascript>
   $(document).ready(function(){
   $(this).tooltip();
});
</script>

Another option is to incorporate bootstrap by visiting http://getbootstrap.com/javascript/#tooltips.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hey, There's Some Important Info Here">Greetings...</button>

Answer 7

Answer №4

Adjusting the title to a data-attribute and implementing a pseudo-element appears to be the most practical solution

div {
  width: 50%;
  margin: 25px auto;
  bordeR: 1px solid grey;
  padding: 1em;
}
dfn {
  position: relative;
}
dfn:hover:after {
  display: block;
}
dfn:after {
  display: none;
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 0;
  margin-top: -2em;
  white-space: nowrap;
  background: lightgreen;
  padding: .25em;
  border: 1px solid green;
}

<div>
  <p>Bob's <dfn data-title="Dog">canine</dfn> mother and <dfn data-title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn data-title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
</div>

This change also means that the `title' will no longer be displayed, replaced by the new tooltip type object.

It's important to note, however, that this approach may have limitations, such as long title text causing overflow issues.

Answer 8

Adjusting the title to a data-attribute and implementing a pseudo-element appears to be the most practical solution

div {
  width: 50%;
  margin: 25px auto;
  bordeR: 1px solid grey;
  padding: 1em;
}
dfn {
  position: relative;
}
dfn:hover:after {
  display: block;
}
dfn:after {
  display: none;
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: 0;
  margin-top: -2em;
  white-space: nowrap;
  background: lightgreen;
  padding: .25em;
  border: 1px solid green;
}

<div>
  <p>Bob's <dfn data-title="Dog">canine</dfn> mother and <dfn data-title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn data-title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p>
</div>

This change also means that the `title' will no longer be displayed, replaced by the new tooltip type object.

It's important to note, however, that this approach may have limitations, such as long title text causing overflow issues.

What is the best way to show the title when a user hovers over a word?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to merge two AngularJS form validation directives criteria using CSS?

Utilize Vue.js to sort by price bracket and category

What are the benefits of utilizing the useStyles MaterialUI function instead of traditional CSS?

Responsive design is achieved through the use of mobile media

What is the best way to position an image alongside an h2 heading?

Show the selected checkbox options upon clicking the submit button

Modifying the attributes/properties within a class of a bootstrap button

Ensuring proper input with JavaScript form validation

Gmail not displaying image - troubleshoot with Django Python-Postmark

After the initial iteration, the .length function ceases to function properly when

Is it possible to apply CSS to only the first element?

What is the best way to send an HTML form variable to a Perl script using AJAX?

Resolve a container overflow problem within the footer section

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

What is the best way to determine the variable height of a div in Angular 7?

Tips for verifying the compatibility of elements as parent or child components

Removing lines of text from the output of a JavaScript retrieval

AngularJs is being used to extract data from Firebase with the help of $value, $id, and

Hover to stop menu movement

Issue encountered while attempting to include a background image in React JS