How can I apply CSS onto HTML tag directly?-CodePudding

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span title="Hello world!">Hover this text to see the result.</span>
  </body>
</html>

I have a lot of information to put inside the hover text and when I make the screen smaller my text goes beyond the screen (it's not responsive). Is there a way I can add styles within the tag? I tried creating a tooltip class and because of the project structure I am unable to see the label itself.

Could I add style=display:block; or something similar like this?

I tried this way and this makes my label disappears

<!DOCTYPE html>
<html>

  <head>
    <title>Title of the document</title>
  </head>
<style>
  .tooltip {
    position: relative; 
  }
  .tooltip:before {
    content: attr(data-text); 
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 15px; 
    width: 600px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-align: justify;

    display: none; /* hide by default */
  }
  .tooltip:hover:before {
    display: block;
  }
</style>
  <body>
    <span title="Hello world!">
         <label for="my lable"><span  data-text="<custom:config bundleObj=""some text here" key="the key" />">
            
           </span>
  </body>
</html>

<custom:config bundleObj=""some text here" key="the key" /> has some paths to traslation.

CodePudding user response：

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements

Internal - by using a element in the section

External - by using a element to link to an external CSS file

For your purposes you would do something like this:

<p style="property:value;">Some text</p>
<h1 style="color:blue;">A Blue Heading</h1>
etc...

UPDATE:

Keep in mind that this won't fix your problem with responsiveness of the website itself for that you need to use CSS Media Queries:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

UPDATE 2 (STYLING TITLE ATTRIBUTE):

There is a pure CSS solution, by setting CSS attr expression, generated content and attribute selectors (which suggests that it works as far back as IE8):

span[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}