Issue
<!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?
Solution
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;
}
Answered By - str1ng Answer Checked By - Cary Denson (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.