Suppose I have a link <a href="#" title="Hello, World!">. I want to style parts of the title tooltip attribute. For example, I want to have the Hello part be bold. I'm not trying to style both Hello and World, just the Hello part.
I have tried putting HTML tags inside of the attribute, but they appear to have no effect (if I enter <a href="#" title="<b>Hello,</b> World!">, the title text prints out <b>Hello,</b> World!, which is not what I want. I have made a JSFiddle demo of what happens.
Is it possible to do this using pure CSS?
Also, I have seen this, but it's not what I wanted. It's close, however.
You can't put HTML in the attribute title, it's not a valid code but I beleive you can use hint.css library: http://kushagragour.in/lab/hint/. Completely css-based and easy-to-use:
Your link
I think the only way for you to achieve what you want is to make a div with the style you want, hide it, and on hover - show it.
Related
I am trying to set HTML content to the title attribute of an image tag which comes from the backend like below.
<span style="color:blue;font-weight:bold;"> <sup>superscript</sup> </span>
When I set the title using property binding and DOM sanitization, when I hover on the image it supposed to show rendered HTML but it is showing direct HTML content as it coming from the backend.
I have created the Slackblitz for the issue.
I really appreciate your help. Thank you for your help in advance.
Title attribute accepts string and it displays as it is. In case you are looking for a functionality like tooltip, you can position the span relative to the image and then change the display property on mouseover of image.
is your goal similar to this? take a look if you haven't seen it yet.
https://www.geeksforgeeks.org/how-to-insert-html-into-view-from-angularjs-controller/
I want to make a button with the discord logo but when I try to add the anchor tag the text goes down a bit and it becomes uncentered.
Is there a way to fix this or a different way I should be approaching this?
HTML Code:
<li class="nav__btn">
Join our Discord
</li>
Try reading this to see if it could help out.
https://coder-coder.com/how-to-center-button-with-html-css/
I would assume it would work the same way with an image button. Also try experimenting with div tags.
You have mistake in your code here: "button" >< img class.
Better use button tag for this, see example button with icon.
Also, provide some screenshot what exactly do you need.
I have a image tag inside an tag having title with html tags.
<a href="img_url" title="test #hashtag<br><a href='some_url'>More...</a>">
<img src="img_url" alt="" title="" border="0" align="center">
</a>
but while displaying the tag it displays with the tags.
Is there a way to do this?
EDIT
What I am trying to accomplish here to render the title tag like plain html and not showing the tags.
This is used in image library where I am using a jQuery plugin swipe-box which uses the title attribute of the tag to display as a caption So like yahoo gallery I want to link the image to the main article.
Any ideas?
So you are using a plugin that reads the title attribute of an a element and constructs a presentation where that value is used as a visible title for an image. And you want that value to contain an a element, but you don’t want the markup to appear when the user mouses over the image
This is a feature of the plugin you are using. Modify it, or find a different plugin that suits your needs. If the visible title may need to contain HTML markup, a different approach is needed (unless you want the markup to be shown on mouseover). For example, you could make the plugin use data-title (perhaps falling back to title if data-title is not present.
The title attribute value is by definition just text (except that character references are interpreted), and this is how browsers treat it.
If I'm understanding you correctly, you want to render the contents of the title tag as HTML. That is not supported.
What exactly are you trying to accomplish here? If you want a tooltip containing HTML to show up, I would put your HTML into a hidden div and have your div show up above the cursor or link on hover.
I have designed a table whereby I want to display tooltips when hover over an item.
This is what I mean.
http://i.stack.imgur.com/snSMC.png
However, the problem I am now having is that the title displays twice! Once using the style I created and once as the default browser behavior with the <a title=""> element...
How can I solve this?
Edit: I have now attached an image, so you can see what I am talking about.
You can make your own and store the title attribute's data in there and then use the new attribute to display that data and yes remove the title attribute.
Ok so let's explain it, I see you have used the title property's text of those tabs hyperlinks to show that popup. I am suggesting you to make another property, it could be named anything like data-popup, then remove your title attribute and then change your script and make the use of the data-popup property.
Sorry for ""attribute"" :P.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>