display text on hover

user_10526355 0
Viewed 4330

When hovering over a in html I want to display a text. Right now I have it this way:

echo "<td onmouseover='' style='cursor: pointer; background-color:#ffeb3b'  title=$text id=$text></td>";

The problem is that it looks very small and without design. How could I make it look bigger and with a little look?

I would like to do something similar to this in html.A box that appears on the right

https://ayudawp.com/wp-content/uploads/2020/07/tooltip.png

css html
2 Answers

For more information look here

body {
  text-align: center;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: default;
}

.tooltip .tooltiptext {
  visibility: hidden;
  padding: 0.25em 0.5em;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 0.25em;
  white-space: nowrap;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 100%;
  transition-property: visibility;
  transition-delay: 0s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  transition-delay: 0.3s;
}
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

user_124936480

This is how you can do it. First, create the main element, I'm using a text, and next to it add the text you wish to show on hover. Style everything according to your taste. Make sure you set the display of the extra text to none. Basically, we'll hide it and show it only when someone hovers over the main element.

Now, in the CSS, I've added .Main-Text:hover + .Extra-Text CSS Selector to achieve what we are trying to do. This basically means that when someone hovers on the element with class Main-Text, something will happen to the element with the class Extra-Text.

You can read about this more here.

* {
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    min-height: 100vh;
}

.Main-Text:hover + .Extra-Text {
    display: block;
}

.Extra-Text {
    background-color: #FFFFFF;
    margin-top: 10px;
    width: 200px;
    border: 2px solid #000000;
    padding: 10px;
    font-size: 16px;
    display: none;
}
<html>
    <div>
    <p class="Main-Text">
        Hover me to know more about me.
    </p>
    <div class="Extra-Text">
        <p>
        This is the extra information that will be displayed when the text is hovered.
        </p>
    </div>
    </div>
</html>

I don't think so if this is something you are looking for but it's worth mentioning. You can use the title attribute in the HTML Elements to display some text when the user hovers over the element. Try it yourself. Run the snippet below and hover over the text.

* {
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    min-height: 100vh;
}
<html>
    <div>
    <p class="Main-Text" title="This is some extra text">
        Hover me to know more about me.
    </p>
    </div>
</html>

user_136467500
Related