I have this piece of html:
<i class="fa fa-fw fa-comment" title="Hello"></i>
This displays comment icon from Font Awesome. When I hoover over this icon, tooltip with text Hello is displayed. There is a delay between hoovering over icon and displaying the text. How do I change length of this delay? To be more specific, I would like to display title instantly.
I am aware, that this could be achieved by writing my own tooltip. However, I would like to avoid it and (if possible) use native solution.
Related
I am trying to add a dynamic string to the tooltip of the font awesome icon but somehow it is not displaying the value even the ng-reflect-title has value.
Am I missing something here?
Below is the stackblitz link
https://stackblitz.com/edit/icon-font-awesome-kqxkgk
You can use:
<span>
<fa name="cog" title="{{text}}"></fa>
Text
</span>
And it should work.
Remember that title is used to show extra information about an element, and that information is shown as a tooltip text when the mouse is over the element.
This question already has answers here:
how to set cursor style to pointer for links without hrefs
(7 answers)
Closed 2 years ago.
I'm using a template that includes an image that is link that when clicked takes the dashboard view to its home.
The HTML code is written like this:
<i class="fa fa-eye"></i> <span>CompanyName</span>
I need to do a simple modification. When this is clicked, instead of its current action it should open up a dialog and show some text. I will do this with a JS function. So I've modified the HTML so that it looks like this:
<a onclick="showDialog()" class="site_title"><i class="fa fa-eye"></i> <span>CompanyName</span></a>
This works just fine, but when the mouse hovers over the image the mouse icon changes to I instead of the hand.
To fix this, I tried modifying the HTML so like so:
<i class="fa fa-eye"></i> <span>CompanyName</span>
This works makes the mouse change into a hand, but clicking it reloads the page.
So my question is, how can I get the behaviour of the second option, but in such a way that the mouse, when hovering, changes to a hand and not to a I?
If you aren't linking somewhere: don't use a link.
Use a <button> instead.
Apply CSS to make it look the way you want.
The cursor property determines what the mouse pointer will look like:
button {
cursor: pointer;
}
I am working on a website, making it accessible. But I am having some trouble with the voice reader focus going into the items located in the footer.
I tried using aria-label but it didn't work.
I'll attach an image.
The elements enter focus, which I can tell because of the blue ring around the item, but I don't know how to get the orange ring to focus to those anchor elements in the footer.
The problem was created due to the use of "fontawesome.com" for the social media Icons. In order to include an alternative text or label to the element (provide by fontawesome.com) you need to use a different method: In my specific case this solved it:
<a href="https://www.instagram.com/iamthonystark/" aria-label="Instagram">
<i aria-hidden="true" class="fab fa-instagram fa-3x"></i>
</a>
Here is the link to this solution and the solution to other possible issues related to accessibility and fontawesome.com
https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility
When i hover over the button on my sites menu bar a little box appears, for exmaple when i hover over Home a little box comes up saying "Home".
Is there any pure HTML/CSS way to hide this? I notice that normal sites such as stackoverflow have this turned off.
Thanks
<span>Home</span>
Remove the title attribute, change:
<span>Home</span>
to
<span>Home</span>
You will need to remove the title attribute as it creates a popup displaying the value given to title. You will have to remove the title attribute from where you don't want it.
<span>Home</span>
You can learn more about the title attribute from http://www.w3schools.com/tags/att_global_title.asp
I am looking for the code to make this image http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg hover over this one http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg on a mouse over.
I am trying to link these to http://www.ciob-online-documents.co.uk/AnnualReview2010
Thanks for your help
P.S I have looked everywhere and tried all sorts of examples.
I am using a Drupal WYSIWYG editor in rich text.
Try to open HTML mode in your Drupal WYSIWYG editor. The code for changing an image on hover could be the following:
<a href="http://www.ciob-online-documents.co.uk/AnnualReview2010" title="">
<img src="http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg" alt="" onmouseover="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg';" onmouseout="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg'" />
</a>
So, when a user is going mouseover image element, it's src attribute will be changed to your second image. As soon as user mouseout src of the image will change again.
A link on the top of the image, is going to turn user to a page you mentioned onclick.