I am looking for a basic information icon like this:
After some more searching, I myself have found the entity. The code for it is â, and it looks like this: â
There's đ (U+1F6C8, CIRCLED INFORMATION SOURCE). As an HTML entity: đ.
There are plenty of tools, many online, that let you search for, and get more information about, Unicode characters. My personal favourite is this one.
this may help you ,
using html and css we can achieve this results
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">đ
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
UNICODE U+02139
HEX CODE âš
HTML CODE âš
CSS CODE \2139
// css example
span {
content: "\2139";
}
HTML Example
<span>âš</span>
Source
These days I use emoji for "info" âšī¸ or "documentation" đ or "source" đ
Previously, I would put the â inside superscript â because it reflects that it is a footnote to the text.
<sup>â</sup>
Also, consider the â° symbol over the đ as it respects the baseline.
Use the unicode: â into the HTML.
HTML Code: âš
CSS Code: \2139
Use tailwind CSS (https://tailwindcss.com/) then the code below will create a nice info button.
<div class="flex items-center justify-center italic
text-stone-500 cursor-default w-5 h-5
rounded-full border border-gray-500 bg-green-100">
i
</div>
Related
I have a CSS-only tooltip that uses a special element attribute to provide the content:
<li class="privTooltip" data-tooltip="My tooltip text">
Which is then handled in CSS:
<style>
[data-tooltip]:after {
content: attr(data-tooltip);
...styling...
}
</style>
But this only supports raw text. If I try to provide any HTML tags, like data-tooltip="<b>Granted through role paths</b>...more stuff", they aren't interpreted:
Text decoration, maybe a simple HTML table, etc.. would make these a lot nicer. I know I can write a DOM-based tooltip that does just about anything, but I'd like to know if it's possible with this lighter-weight pseudo-element CSS-only method.
This solution doesn't use your exact method, but it is CSS-only, which it sounds like is the important part for your use-case. You could try something like this, which allows you to style the tooltip's content with CSS.
EDIT: here's a live version of this in CodePen
HTML
<div class="tooltip">
<!-- put the content you want to hover over here -->
<img style="width: 40px; padding: 16px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Infobox_info_icon.svg/1200px-Infobox_info_icon.svg.png">
<span class="tooltiptext">
<!-- put the tooltip here -->
<strong>Title 1:</strong> Lorem ipsum.<br><br>
<strong>Title 2:</strong> Lorem ipsum.<br><br>
<strong>Title 3:</strong> Lorem ipsum.<br><br>
<strong>Title 4:</strong> Lorem ipsum.
</span>
</div>
CSS
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #fff;
color: #000;
text-align: left;
border-radius: 4px;
border: 1px solid #d0d0d0;
padding: 8px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
I have been trying to make tooltips on my site look nice and have recently come across the tooltips on Godaddy.com which I would love to be able to replicate the text formating on:
Currently my own tooltips look like this:
This is my current code, it is very important that the tooltip appears when hovering over an image(looks messy I know but please ignore that):
<img src="image URL here" width="20" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! If you do not wish to use this leave 'None'">
What I am primarily trying to do is to be able to create new lines with in the Tooltip.
Any suggestions would be much appriciated!
You can do something like this:
you can add new line by adding <br /> between the contents, that should work for you.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
text-align: justify;
/* This is what you need */
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover me
<span class="tooltiptext">A short description of your project/solution (max 250 characters), will only be displayed on the home screen. <br /> <br /> Second para not in your post! If you do not wish to use this leave 'None</span>
</div>
Fixed by adding
data-html="true"
This allowed me to use <br/> in the title text
The final code snippet:
<img src="image URL here" width="20" data-html="true" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! <br/> If you do not wish to use this leave 'None'">
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
Anyone know of a css hack to change the link text in here:
<div id = "foo"> Long Text for Regular site </div>
to this shorter version.
<div id = "foo"> Shorter Text </div>
I was able to add text before or after the link, using pseudoselectors but no luck modifying the link text itself.
I'm using a squarespace template, so I'm not able to use javascript to do this or generate better html.
You can accomplish something similar to what you're trying to do with with CSS3 text-overflow property:
HTML
<p>The quick brown fox jumped over the lazy dogs.</p>
CSS
P {
font-size:12pt;
line-height:12pt;
}
.truncate {
display:inline-block;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height:11pt;
}
JSFiddle
http://jsfiddle.net/LcS7a/
Try:
#foo a{
text-indent: -9999px;
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#foo a:after{
content: "New Text";
visibility: visible;
word-spacing:normal;
letter-spacing: normal;
}
Demo: http://jsfiddle.net/8DK9g/
** Edit **
Just read you can't alter the HTML that is being generated, leaving this here for anyone that may find it useful
** /Edit **
Using Duver Jaramillo's example, I've moved the shortened text onto the a tag using a data- attribute.
See http://jsfiddle.net/3n1gm4/KrwWL/
HTML
<div id = "foo">
Long Text for Regular site
</div>
And the CSS
#foo a{
text-indent: -9999px;
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px;
}
#foo a:after{
content: attr(data-short-text);
visibility: visible;
word-spacing:normal;
letter-spacing: normal;
}
I tried something with div tag as follows,
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
It is working fine but the problem is list is not displaying on the first click. Any thing wrong with my code.??
Your code doesn't work as you expect it to due to the way element.style works.
Check this MDN link on element.style: https://developer.mozilla.org/en/DOM/element.style
Since the style property has the same (and highest) priority in the
CSS cascade as an inline style declaration via the style attribute, it
is useful for setting style on one specific element.
However, it is not useful for learning about the element's style in
general, since it represents only the CSS declarations set in the
element's inline style attribute, not those that come from style
rules elsewhere, such as style rules in the section, or
external style sheets.
So when you first run your code and even if your element.style.hidden is declared in the external CSS sheet, the style declaration remains empty and you need to perform additional checks.
if (!list.style.visibility || list.style.visibility === 'hidden') {...}
You can take a look at the fiddle to see it work: http://jsfiddle.net/Kk6TJ/1/
Also:
It's best to use triple equal === to perform strict comparison without converting variable type.
You don't need curly braces in your event handlers. If you were hoping that they would create scope - they don't! Only functions in JavaScript have scope.
list.style.visibility=='hidden' is a false statement on first click
try this
{if(list.style.visibility=='hidden' || list.style.visibility='')
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>â
This is because your if..else are not in order. Re-ordering of decision statement corrected the behavior, Now first click is showing the menu items.
Also, If you run your script and watch it in firebug console you'll see your javascript code is throwing warning on first click.
I've updated your code -
<style type="text/css">
#hello{
visibility: visible;
cursor: pointer;
position: absolute;
}
#list{
visibility: hidden;
cursor: pointer;
position: absolute;
top: 30px;
z-index: 1;
background-color: aqua;
}
#second{
position: absolute;
}
</style>
<script type="text/javascript">
function Clickme()
{
var list = document.getElementById('list');
if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
<div id="second">Welcome to smartdata</div>
<div id="list">
Home <br/>
SignOut <br/>
</div>
Styles defined in style tags and css files are not in the element.style.property property, they are available if the element has its style set inline <element style="property:value;"> or explicitly element.style.property = value;
To get styles for an element defined in style tags/sheets use window.getComputedStyle(element, null).getPropertyValue(property);`
So you can either inline the styles on list, use getComputedStyle getPropertyValue or use the fact that list.style.visibility is going to be empty on the first click.
Go for something like this -
if(list.style.visibility=="visible")
{
list.style.visibility="hidden";
}
else
{
list.style.visibility="visible"
}