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.
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/
Test
Is there a way to remove the tooltip when hovering over the a element but still keep the the title attribute value?
Demo
The whole purpose of the title attribute, is to hold the text for the tooltip, for better accessibility; It is a build in feature in every modern browser.
If you don't want the tooltip functionality, don't use the title attribute. You can alternatively use data attributes to attach the textual value to any element, and retrieve it later like so:
HTML
Test
JS
$('a').data('title'); // "This is a test";
You shouldn't use the title if you want to avoid the tooltip because it was made for this kind of use.
But, if you are using this for content optimization I suggest you to start using microdata with your HTML5 code.
However, you can use JavaScript and CSS to create a simple hack that will save the data in your code but won't show the title for a link.
Example
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 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>
Please see the picture
The Andrede option have red * , that is indicating mandatory field.
I've tried Andrede<span class=required>*</span> as option value , but its not working its showing the full html tags
Option elements can contain only text.
If you want to include markup, then you need to replace the entire select element with a JavaScript widget.
I recommend changing the design so that you have a real <label> instead of using a placeholder or default value (both of which come with serious implications for accessibility). It is a webpage, so scrollbars are available. There is no need to have a cramped design.
If you are talking the given picture then they have their own select box which is build of elements other than option element